avalonia: rearranged buttons in image editor

InABox.Avalonia/Components/ImageEditor/ImageEditor.axaml

@@ -7,16 +7,68 @@
 			 xmlns:system="using:System"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="InABox.Avalonia.Components.ImageEditor">
+	<UserControl.Styles>
+		<Style Selector="Button">
+			<Setter Property="Background"
+					Value="Transparent"/>
+			<Setter Property="ClipToBounds"
+					Value="False"/>
+		</Style>
+		<Style Selector="Button:flyout-open /template/ ContentPresenter">
+			<Setter Property="BoxShadow"
+					Value="0 0 10 DarkGray"/>
+		</Style>
+		<Style Selector="Button.active /template/ ContentPresenter">
+			<Setter Property="BoxShadow"
+					Value="0 0 10 DarkGray"/>
+		</Style>
+		<Style Selector="Button:disabled">
+			<Setter Property="Foreground"
+					Value="#909090"/>
+		</Style>
+		<Style Selector="Button:disabled /template/ ContentPresenter">
+			<Setter Property="Background"
+					Value="Transparent"/>
+		</Style>
+		<Style Selector="Button:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+			<Setter Property="BorderBrush" Value="{Binding $parent[Button].BorderBrush}" />
+			<Setter Property="BorderThickness" Value="{Binding $parent[Button].BorderThickness}" />
+			<Setter Property="Background" Value="{Binding $parent[Button].Background}" />
+			<Setter Property="Foreground" Value="{Binding $parent[Button].Foreground}" />
+		</Style>
+		
+		<Style Selector="FlyoutPresenter">
+			<Setter Property="Padding" Value="5"/>
+			<Setter Property="Background" Value="Transparent"/>
+			<Setter Property="BorderThickness" Value="0"/>
+			<Setter Property="CornerRadius" Value="0"/>
+			<Setter Property="ClipToBounds" Value="False"/>
+		</Style>
+		<Style Selector="FlyoutPresenter > Border">
+			<Setter Property="Padding" Value="{StaticResource PrsControlSpacing}"/>
+			<Setter Property="BorderBrush" Value="Black"/>
+			<Setter Property="BorderThickness" Value="0"/>
+			<Setter Property="Background" Value="White"/>
+			<Setter Property="BoxShadow" Value="0 0 10 Gray"/>
+		</Style>
+		<Style Selector="Rectangle.Separator">
+			<Setter Property="Fill" Value="Gray"/>
+			<Setter Property="Width" Value="1"/>
+			<Setter Property="VerticalAlignment" Value="Stretch"/>
+			<Setter Property="Margin" Value="0,10"/>
+		</Style>
+	</UserControl.Styles>
 	<UserControl.Resources>
 		<converters:DoubleCalculator x:Key="Add1Calculator" Constants="1.0" Type="Sum"/>
 	</UserControl.Resources>
 	<Border CornerRadius="{Binding $parent[components:ImageEditor].CornerRadius}" ClipToBounds="True">
 		<Grid>
 			<Grid.RowDefinitions>
+				<RowDefinition Height="Auto"/>
 				<RowDefinition Height="*"/>
 				<RowDefinition Height="Auto"/>
 			</Grid.RowDefinitions>
-			<Canvas Name="OuterCanvas" Background="White">
+			<Canvas Name="OuterCanvas" Grid.Row="1" Background="White">
 				<Canvas.Styles>
 					<Style Selector="Thumb">
 						<Setter Property="Template">
@@ -41,37 +93,41 @@
 					</Grid>
 				</Border>
 			</Canvas>
-			<Border Grid.Row="1"
+			<Border Grid.Row="0"
+					BoxShadow="0 0 10 Gray"
+					IsVisible="{Binding $parent[components:ImageEditor].ShowButtons}">
+				<Border ClipToBounds="True"
+						Background="White">
+					<Grid>
+						<Grid.ColumnDefinitions>
+							<ColumnDefinition Width="*"/>
+							<ColumnDefinition Width="Auto"/>
+							<ColumnDefinition Width="*"/>
+						</Grid.ColumnDefinitions>
+						<ItemsControl Grid.Column="1" ItemsSource="{Binding $parent[components:ImageEditor].ModeButtons}">
+							<ItemsControl.ItemTemplate>
+								<DataTemplate DataType="components:ImageEditorModeButton">
+									<Button Classes.active="{Binding Active}"
+											Width="40" Height="40" Margin="10"
+											CommandParameter="{Binding Mode}"
+											Command="{Binding $parent[components:ImageEditor].SetModeCommand}"
+											Content="{Binding Content}"/>
+								</DataTemplate>
+							</ItemsControl.ItemTemplate>
+							<ItemsControl.ItemsPanel>
+								<ItemsPanelTemplate>
+									<UniformGrid Margin="-10" Rows="1"/>
+								</ItemsPanelTemplate>
+							</ItemsControl.ItemsPanel>
+						</ItemsControl>
+					</Grid>
+				</Border>
+			</Border>
+			<Border Grid.Row="2"
 					BoxShadow="0 0 10 Gray"
 					IsVisible="{Binding $parent[components:ImageEditor].ShowButtons}">
 				<Border ClipToBounds="True"
 						Background="White">
-					<Border.Styles>
-						<Style Selector="Button">
-							<Setter Property="Background"
-									Value="Transparent"/>
-							<Setter Property="ClipToBounds"
-									Value="False"/>
-						</Style>
-						<Style Selector="Button:flyout-open /template/ ContentPresenter">
-							<Setter Property="BoxShadow"
-									Value="0 0 10 DarkGray"/>
-						</Style>
-						<Style Selector="Button:disabled">
-							<Setter Property="Foreground"
-									Value="#909090"/>
-						</Style>
-						<Style Selector="Button:disabled /template/ ContentPresenter">
-							<Setter Property="Background"
-									Value="Transparent"/>
-						</Style>
-						<Style Selector="Button:pointerover /template/ ContentPresenter#PART_ContentPresenter">
-							<Setter Property="BorderBrush" Value="{Binding $parent[Button].BorderBrush}" />
-							<Setter Property="BorderThickness" Value="{Binding $parent[Button].BorderThickness}" />
-							<Setter Property="Background" Value="{Binding $parent[Button].Background}" />
-							<Setter Property="Foreground" Value="{Binding $parent[Button].Foreground}" />
-						</Style>
-					</Border.Styles>
 					<Grid>
 						<Grid.ColumnDefinitions>
 							<ColumnDefinition Width="*"/>
@@ -80,65 +136,6 @@
 						</Grid.ColumnDefinitions>
 						<StackPanel Grid.Column="1" Margin="-10"
 									Orientation="Horizontal">
-							<StackPanel.Styles>
-								<!--
-								<Style Selector="FlyoutPresenter">
-									<Setter Property="Padding" Value="{StaticResource PrsControlSpacing}"/>
-									<Setter Property="CornerRadius" Value="{StaticResource PrsCornerRadius}"/>
-									<Setter Property="BorderBrush" Value="Black"/>
-									<Setter Property="MinWidth" Value="0"/>
-									<Setter Property="Background" Value="White"/>
-								</Style>
-								-->
-								<Style Selector="FlyoutPresenter">
-									<Setter Property="Padding" Value="5"/>
-									<Setter Property="Background" Value="Transparent"/>
-									<Setter Property="BorderThickness" Value="0"/>
-									<Setter Property="CornerRadius" Value="0"/>
-									<Setter Property="ClipToBounds" Value="False"/>
-								</Style>
-								<Style Selector="FlyoutPresenter > Border">
-									<Setter Property="Padding" Value="{StaticResource PrsControlSpacing}"/>
-									<Setter Property="BorderBrush" Value="Black"/>
-									<Setter Property="BorderThickness" Value="0"/>
-									<Setter Property="Background" Value="White"/>
-									<Setter Property="BoxShadow" Value="0 0 10 Gray"/>
-								</Style>
-								<Style Selector="Rectangle.Separator">
-									<Setter Property="Fill" Value="Gray"/>
-									<Setter Property="Width" Value="1"/>
-									<Setter Property="VerticalAlignment" Value="Stretch"/>
-									<Setter Property="Margin" Value="0,10"/>
-								</Style>
-							</StackPanel.Styles>
-							<Button Name="ShapeButton"
-									Width="40" Height="40"
-									Margin="10">
-								<Button.Flyout>
-									<Flyout Placement="Top" VerticalOffset="0">
-										<Border>
-											<ItemsControl ItemsSource="{Binding $parent[components:ImageEditor].ModeButtons}">
-												<ItemsControl.ItemTemplate>
-													<DataTemplate DataType="components:ImageEditorModeButton">
-														<Button Width="40" Height="40" Margin="10"
-																CommandParameter="{Binding Mode}"
-																Command="{Binding $parent[components:ImageEditor].SetModeCommand}"
-																Content="{Binding Content}"/>
-													</DataTemplate>
-												</ItemsControl.ItemTemplate>
-												<ItemsControl.ItemsPanel>
-													<ItemsPanelTemplate>
-														<UniformGrid Margin="-10" Rows="1"/>
-													</ItemsPanelTemplate>
-												</ItemsControl.ItemsPanel>
-											</ItemsControl>
-										</Border>
-									</Flyout>
-								</Button.Flyout>
-							</Button>
-							
-							<Rectangle Classes="Separator"/>
-							
 							<Button Name="LineThicknessButton" Width="40" Height="40"
 									Margin="10">
 								<Canvas Width="25" Height="21"

InABox.Avalonia/Components/ImageEditor/ImageEditor.axaml.cs

@@ -18,6 +18,7 @@ using SkiaSharp;
 using System.Collections.ObjectModel;
 using System.Threading.Tasks;
 using Avalonia.LogicalTree;
+using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace InABox.Avalonia.Components;
 
@@ -30,11 +31,14 @@ public enum ImageEditingMode
     Dimension
 }
 
-public class ImageEditorModeButton(ImageEditingMode mode, Control? content)
+public partial class ImageEditorModeButton(ImageEditingMode mode, Control? content, bool active) : ObservableObject
 {
     public ImageEditingMode Mode { get; set; } = mode;
 
     public Control? Content { get; set; } = content;
+
+    [ObservableProperty]
+    private bool _active = active;
 }
 
 public class ImageEditorTransparentImageBrushConverter : AbstractConverter<IBrush?, IBrush?>
@@ -304,8 +308,12 @@ public partial class ImageEditor : UserControl
     [RelayCommand]
     private void SetMode(ImageEditingMode mode)
     {
+        foreach(var button in ModeButtons)
+        {
+            button.Active = button.Mode == mode;
+        }
         Mode = mode;
-        ShapeButton.Content = CreateModeButtonContent(mode);
+        // ShapeButton.Content = CreateModeButtonContent(mode);
         SecondaryColour.IsVisible = HasSecondaryColour();
         LineThicknessButton.IsVisible = HasLineThickness();
     }
@@ -338,7 +346,7 @@ public partial class ImageEditor : UserControl
 
     private void AddModeButton(ImageEditingMode mode)
     {
-        ModeButtons.Add(new(mode, CreateModeButtonContent(mode)));
+        ModeButtons.Add(new(mode, CreateModeButtonContent(mode), mode == Mode));
     }
 
     private Control? CreateModeButtonContent(ImageEditingMode mode, bool bindColour = false)