Anchor picker wip

src/PixiEditor.AvaloniaUI/Styles/PortingWipStyles.axaml

@@ -27,7 +27,7 @@
         <Setter Property="Template">
             <ControlTemplate>
                 <Border Cursor="Hand" Background="{TemplateBinding Background}">
-                    <ContentPresenter/>
+                    <ContentPresenter />
                 </Border>
             </ControlTemplate>
         </Setter>
@@ -35,17 +35,17 @@
 
     <Style Selector="CheckBox.ImageCheckBox">
         <Setter Property="Template">
-                <ControlTemplate TargetType="{x:Type CheckBox}">
-                    <StackPanel Orientation="Horizontal">
-                        <Image Cursor="Hand" x:Name="checkboxImage" Source="../Images/Eye-off.png"/>
-                        <ContentPresenter/>
-                    </StackPanel>
+            <ControlTemplate TargetType="{x:Type CheckBox}">
+                <StackPanel Orientation="Horizontal">
+                    <Image Cursor="Hand" x:Name="checkboxImage" Source="../Images/Eye-off.png" />
+                    <ContentPresenter />
+                </StackPanel>
             </ControlTemplate>
         </Setter>
     </Style>
 
     <Style Selector="CheckBox.ImageCheckBox:checked Image">
-        <Setter Property="Source" Value="../Images/Eye.png"/>
+        <Setter Property="Source" Value="../Images/Eye.png" />
     </Style>
 
     <Style Selector="ToggleButton.ExpandCollapseToggleStyle">
@@ -53,12 +53,12 @@
     </Style>
 
     <Style Selector="Button.SocialMediaButton">
-        <Setter Property="Width" Value="50"/>
-        <Setter Property="Margin" Value="5,8,5,0"/>
-        <Setter Property="FontSize" Value="18"/>
-        <Setter Property="Height" Value="50"/>
-        <Setter Property="Cursor" Value="Hand"/>
-        <Setter Property="MinWidth" Value="0"/>
+        <Setter Property="Width" Value="50" />
+        <Setter Property="Margin" Value="5,8,5,0" />
+        <Setter Property="FontSize" Value="18" />
+        <Setter Property="Height" Value="50" />
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="MinWidth" Value="0" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="Button">
@@ -70,8 +70,10 @@
                         BorderBrush="{TemplateBinding BorderBrush}"
                         CornerRadius="5">
                         <ContentControl>
-                            <Image Margin="8" Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content,
-                            Converter={converters:ImagePathToBitmapConverter}}" RenderOptions.BitmapInterpolationMode="HighQuality"/>
+                            <Image Margin="8"
+                                   Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content,
+                            Converter={converters:ImagePathToBitmapConverter}}"
+                                   RenderOptions.BitmapInterpolationMode="HighQuality" />
                         </ContentControl>
                     </Border>
                 </ControlTemplate>
@@ -80,10 +82,36 @@
     </Style>
 
     <Style Selector="Button.SocialMediaButton:pointerover">
-        <Setter Property="Background" Value="{Binding Tag, RelativeSource={RelativeSource Self}}"/>
+        <Setter Property="Background" Value="{Binding Tag, RelativeSource={RelativeSource Self}}" />
     </Style>
 
     <Style Selector="ToggleButton.AnchorPointToggleButtonStyle">
+        <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}" />
+        <Setter Property="CornerRadius" Value="0" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate>
+                    <!--TODO: After toggling on and off, weird visual glitch appears on the corner of rounded anchor-->
+                    <Border CornerRadius="{TemplateBinding CornerRadius}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}">
+                        <Border.Background>
+                            <ImageBrush Source="/Images/AnchorDot.png"/>
+                        </Border.Background>
+                        <ContentPresenter Padding="{TemplateBinding Padding}"
+                                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                          Content="{TemplateBinding Content}"
+                                          ContentTemplate="{TemplateBinding ContentTemplate}"
+                                          RecognizesAccessKey="True"
+                                          TextElement.Foreground="{TemplateBinding Foreground}" />
+                    </Border>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
 
+    <Style Selector="ToggleButton.AnchorPointToggleButtonStyle:checked">
+        <Setter Property="BorderBrush" Value="{DynamicResource ThemeHighlightForegroundBrush}" />
     </Style>
-</Styles>
+</Styles>

src/PixiEditor.AvaloniaUI/Views/Dialogs/ResizeCanvasPopup.axaml

@@ -9,16 +9,18 @@
                          xmlns:input="clr-namespace:PixiEditor.AvaloniaUI.Views.Input"
                          xmlns:dialogs="clr-namespace:PixiEditor.AvaloniaUI.Views.Dialogs"
                          mc:Ignorable="d"
-                         Name="window"
+                         x:Name="window"
+                         CanResize="False"
+                         CanMinimize="False"
                          Title="RESIZE_CANVAS"
-                         Height="420" Width="320" MinHeight="420" MinWidth="320">
+                         Height="410" Width="320">
     <DockPanel Focusable="True">
-        <Button DockPanel.Dock="Bottom" Padding="5 0" HorizontalAlignment="Center" Margin="15"
+        <Button DockPanel.Dock="Bottom" HorizontalAlignment="Center" Margin="15"
                 ui:Translator.Key="RESIZE" Click="Button_Click"
                 IsDefault="True" />
 
-        <Border HorizontalAlignment="Center" Margin="0,30,0,0" Background="{DynamicResource ThemeBackgroundBrush}"
-                VerticalAlignment="Top" Grid.Row="1" Width="250" Height="290" CornerRadius="10">
+        <Border HorizontalAlignment="Center" Margin="0,30,0,0" Background="{DynamicResource ThemeBackgroundBrush1}"
+                VerticalAlignment="Top" Width="250" Height="290" CornerRadius="{DynamicResource ControlCornerRadius}">
             <StackPanel>
                 <input:SizePicker Margin="0,8,0,0"
                                          Width="240"
@@ -30,7 +32,7 @@
                                          ChosenPercentageSize="{Binding NewPercentageSize, Mode=TwoWay, ElementName=window}"
                                          SelectedUnit="{ Binding NewSelectedUnit, Mode=TwoWay, ElementName=window}"
                                          IsSizeUnitSelectionVisible="True" />
-                <Separator Margin="10,5,10,0" Background="{StaticResource AccentColor}" Height="1" />
+                <Separator Margin="10,5,10,0" Height="1" />
                 <DockPanel>
                     <Label ui:Translator.Key="ANCHOR_POINT" Foreground="White" Margin="25,5,0,0"
                            HorizontalAlignment="Left"

src/PixiEditor.AvaloniaUI/Views/Dialogs/ResizeDocumentPopup.axaml

@@ -1,29 +1,31 @@
 <dialogs:ResizeDocumentPopup x:Class="PixiEditor.AvaloniaUI.Views.Dialogs.ResizeDocumentPopup"
-                      x:ClassModifier="internal"
-                      xmlns="https://github.com/avaloniaui"
-                      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-                      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-                      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-                      xmlns:userControls="clr-namespace:PixiEditor.Views.UserControls"
-                      xmlns:ui="clr-namespace:PixiEditor.Extensions.UI;assembly=PixiEditor.Extensions"
-        xmlns:windows="clr-namespace:PixiEditor.AvaloniaUI.Views.Windows"
-        xmlns:input="clr-namespace:PixiEditor.AvaloniaUI.Views.Input"
-        xmlns:dialogs="clr-namespace:PixiEditor.AvaloniaUI.Views.Dialogs"
-        mc:Ignorable="d" Name="window"
-                      Title="RESIZE_IMAGE"
-                      Height="305" Width="310" MinHeight="305" MinWidth="310">
+                             x:ClassModifier="internal"
+                             xmlns="https://github.com/avaloniaui"
+                             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+                             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+                             xmlns:ui="clr-namespace:PixiEditor.Extensions.UI;assembly=PixiEditor.Extensions"
+                             xmlns:input="clr-namespace:PixiEditor.AvaloniaUI.Views.Input"
+                             xmlns:dialogs="clr-namespace:PixiEditor.AvaloniaUI.Views.Dialogs"
+                             mc:Ignorable="d" Name="window"
+                             Title="RESIZE_IMAGE"
+                             CanResize="False"
+                             CanMinimize="False"
+                             Height="305" Width="310" MinHeight="305" MinWidth="310">
     <DockPanel Focusable="True">
-        <Button DockPanel.Dock="Bottom" Padding="5 0" HorizontalAlignment="Center" Margin="15"
+        <Button DockPanel.Dock="Bottom" HorizontalAlignment="Center" Margin="15"
                 ui:Translator.Key="RESIZE" Click="Button_Click" IsDefault="True" />
 
         <input:SizePicker HorizontalAlignment="Center" Width="240" Height="180" Margin="0,30,0,0"
-            x:Name="sizePicker"
-            PreserveAspectRatio="True" Focusable="True"
-            ChosenHeight="{Binding NewAbsoluteHeight, Mode=TwoWay, ElementName=window}"
-            ChosenWidth="{Binding NewAbsoluteWidth, Mode=TwoWay, ElementName=window}" 
-            ChosenPercentageSize="{Binding NewPercentageSize, Mode=TwoWay, ElementName=window}"
-            SelectedUnit="{Binding NewSelectedUnit, Mode=TwoWay, ElementName=window}"
-            IsSizeUnitSelectionVisible="True"/>
+                          x:Name="sizePicker"
+                          Background="{DynamicResource ThemeBackgroundBrush1}"
+                          CornerRadius="{DynamicResource ControlCornerRadius}"
+                          PreserveAspectRatio="True" Focusable="True"
+                          ChosenHeight="{Binding NewAbsoluteHeight, Mode=TwoWay, ElementName=window}"
+                          ChosenWidth="{Binding NewAbsoluteWidth, Mode=TwoWay, ElementName=window}"
+                          ChosenPercentageSize="{Binding NewPercentageSize, Mode=TwoWay, ElementName=window}"
+                          SelectedUnit="{Binding NewSelectedUnit, Mode=TwoWay, ElementName=window}"
+                          IsSizeUnitSelectionVisible="True" />
 
     </DockPanel>
-</dialogs:ResizeDocumentPopup>
+</dialogs:ResizeDocumentPopup>

src/PixiEditor.AvaloniaUI/Views/Input/AnchorPointPicker.axaml

@@ -20,68 +20,32 @@
             <ColumnDefinition Width="26" />
             <ColumnDefinition Width="26" />
         </Grid.ColumnDefinitions>
-        <ToggleButton IsChecked="True" Checked="ToggleButton_Checked" PointerPressed="ToggleButton_Click" Margin="0.25"
-                      Classes="AnchorPointToggleButtonStyle" ui:Translator.TooltipKey="TOP_LEFT" Grid.Row="0"
-                      Grid.Column="0" BorderBrush="Black">
-            <ToggleButton.Background>
-                <ImageBrush Source="../../Images/AnchorDot.png" />
-            </ToggleButton.Background>
-        </ToggleButton>
-        <ToggleButton Checked="ToggleButton_Checked" PointerPressed="ToggleButton_Click" Margin="0.25"
-                      Classes="AnchorPointToggleButtonStyle" Grid.Row="0" ui:Translator.TooltipKey="TOP_CENTER"
-                      Grid.Column="1" BorderBrush="Black">
-            <ToggleButton.Background>
-                <ImageBrush Source="../../Images/AnchorDot.png" />
-            </ToggleButton.Background>
-        </ToggleButton>
-        <ToggleButton Checked="ToggleButton_Checked" PointerPressed="ToggleButton_Click" Margin="0.25"
-                      Classes="AnchorPointToggleButtonStyle" ui:Translator.TooltipKey="TOP_RIGHT" Grid.Row="0"
-                      Grid.Column="2" BorderBrush="Black">
-            <ToggleButton.Background>
-                <ImageBrush Source="../../Images/AnchorDot.png" />
-            </ToggleButton.Background>
-        </ToggleButton>
-        <ToggleButton Checked="ToggleButton_Checked" PointerPressed="ToggleButton_Click" Margin="0.25"
-                      Classes="AnchorPointToggleButtonStyle" Grid.Row="1" ui:Translator.TooltipKey="MIDDLE_LEFT"
-                      Grid.Column="0" BorderBrush="Black">
-            <ToggleButton.Background>
-                <ImageBrush Source="../../Images/AnchorDot.png" />
-            </ToggleButton.Background>
-        </ToggleButton>
-        <ToggleButton Checked="ToggleButton_Checked" PointerPressed="ToggleButton_Click" Margin="0.25"
-                      Classes="AnchorPointToggleButtonStyle" Grid.Row="1" Grid.Column="1"
-                      ui:Translator.TooltipKey="MIDDLE_CENTER" BorderBrush="Black">
-            <ToggleButton.Background>
-                <ImageBrush Source="../../Images/AnchorDot.png" />
-            </ToggleButton.Background>
-        </ToggleButton>
-        <ToggleButton Checked="ToggleButton_Checked" PointerPressed="ToggleButton_Click" Margin="0.25"
-                      Classes="AnchorPointToggleButtonStyle" Grid.Row="1" Grid.Column="2"
-                      ui:Translator.TooltipKey="MIDDLE_RIGHT" BorderBrush="Black">
-            <ToggleButton.Background>
-                <ImageBrush Source="../../Images/AnchorDot.png" />
-            </ToggleButton.Background>
-        </ToggleButton>
-        <ToggleButton Checked="ToggleButton_Checked" PointerPressed="ToggleButton_Click" Margin="0.25"
-                      Classes="AnchorPointToggleButtonStyle" Grid.Row="2" Grid.Column="0"
-                      ui:Translator.TooltipKey="BOTTOM_LEFT" BorderBrush="Black">
-            <ToggleButton.Background>
-                <ImageBrush Source="../../Images/AnchorDot.png" />
-            </ToggleButton.Background>
-        </ToggleButton>
-        <ToggleButton Checked="ToggleButton_Checked" PointerPressed="ToggleButton_Click" Margin="0.25"
-                      Classes="AnchorPointToggleButtonStyle" Grid.Row="2" Grid.Column="1"
-                      ui:Translator.TooltipKey="BOTTOM_CENTER" BorderBrush="Black">
-            <ToggleButton.Background>
-                <ImageBrush Source="../../Images/AnchorDot.png" />
-            </ToggleButton.Background>
-        </ToggleButton>
-        <ToggleButton Checked="ToggleButton_Checked" PointerPressed="ToggleButton_Click" Margin="0.25"
-                      Classes="AnchorPointToggleButtonStyle" Grid.Row="2" Grid.Column="2"
-                      ui:Translator.TooltipKey="BOTTOM_RIGHT" BorderBrush="Black">
-            <ToggleButton.Background>
-                <ImageBrush Source="../../Images/AnchorDot.png" />
-            </ToggleButton.Background>
-        </ToggleButton>
+        <ToggleButton IsChecked="True" IsCheckedChanged="ToggleButton_Checked" PointerPressed="ToggleButton_Click" Margin="0.25"
+                      Classes="AnchorPointToggleButtonStyle" ui:Translator.TooltipKey="TOP_LEFT" Grid.Row="0" Name="topLeft"
+                      Grid.Column="0" CornerRadius="5,0,0,0"/>
+        <ToggleButton IsCheckedChanged="ToggleButton_Checked" PointerPressed="ToggleButton_Click" Margin="0.25"
+                      Classes="AnchorPointToggleButtonStyle" Grid.Row="0" ui:Translator.TooltipKey="TOP_CENTER" Name="topCenter"
+                      Grid.Column="1" />
+        <ToggleButton IsCheckedChanged="ToggleButton_Checked" PointerPressed="ToggleButton_Click" Margin="0.25" Name="topRight"
+                      Classes="AnchorPointToggleButtonStyle" ui:Translator.TooltipKey="TOP_RIGHT" CornerRadius="0,5,0,0" Grid.Row="0"
+                      Grid.Column="2" />
+        <ToggleButton IsCheckedChanged="ToggleButton_Checked" PointerPressed="ToggleButton_Click" Margin="0.25"
+                      Classes="AnchorPointToggleButtonStyle" Grid.Row="1" ui:Translator.TooltipKey="MIDDLE_LEFT" Name="middleLeft"
+                      Grid.Column="0" />
+        <ToggleButton IsCheckedChanged="ToggleButton_Checked" PointerPressed="ToggleButton_Click" Margin="0.25"
+                      Classes="AnchorPointToggleButtonStyle" Grid.Row="1" Grid.Column="1" Name="middleCenter"
+                      ui:Translator.TooltipKey="MIDDLE_CENTER" />
+        <ToggleButton IsCheckedChanged="ToggleButton_Checked" PointerPressed="ToggleButton_Click" Margin="0.25"
+                      Classes="AnchorPointToggleButtonStyle" Grid.Row="1" Grid.Column="2" Name="middleRight"
+                      ui:Translator.TooltipKey="MIDDLE_RIGHT" />
+        <ToggleButton IsCheckedChanged="ToggleButton_Checked" PointerPressed="ToggleButton_Click" Margin="0.25"
+                      Classes="AnchorPointToggleButtonStyle" Grid.Row="2" Grid.Column="0" Name="bottomLeft"
+                      ui:Translator.TooltipKey="BOTTOM_LEFT" CornerRadius="0,0,0,5" />
+        <ToggleButton IsCheckedChanged="ToggleButton_Checked" PointerPressed="ToggleButton_Click" Margin="0.25"
+                      Classes="AnchorPointToggleButtonStyle" Grid.Row="2" Grid.Column="1" Name="bottomCenter"
+                      ui:Translator.TooltipKey="BOTTOM_CENTER" />
+        <ToggleButton IsCheckedChanged="ToggleButton_Checked" PointerPressed="ToggleButton_Click" Margin="0.25" Name="bottomRight"
+                      Classes="AnchorPointToggleButtonStyle" CornerRadius="0,0,5,0" Grid.Row="2" Grid.Column="2"
+                      ui:Translator.TooltipKey="BOTTOM_RIGHT" />
     </Grid>
 </controls:UserControl>

src/PixiEditor.AvaloniaUI/Views/Input/AnchorPointPicker.axaml.cs

@@ -21,12 +21,55 @@ internal partial class AnchorPointPicker : UserControl
         set => SetValue(AnchorPointProperty, value);
     }
 
+    static AnchorPointPicker()
+    {
+        AnchorPointProperty.Changed.Subscribe(OnAnchorPointChanged);
+    }
 
     private ToggleButton _selectedToggleButton;
 
     public AnchorPointPicker()
     {
         InitializeComponent();
+        _selectedToggleButton = topLeft;
+    }
+
+    private static void OnAnchorPointChanged(AvaloniaPropertyChangedEventArgs e)
+    {
+        AnchorPointPicker picker = (AnchorPointPicker)e.Sender;
+        if (e.NewValue is ResizeAnchor anchor)
+        {
+            switch (anchor)
+            {
+                case ResizeAnchor.TopLeft:
+                    picker.topLeft.IsChecked = true;
+                    break;
+                case ResizeAnchor.Top:
+                    picker.topCenter.IsChecked = true;
+                    break;
+                case ResizeAnchor.TopRight:
+                    picker.topRight.IsChecked = true;
+                    break;
+                case ResizeAnchor.Left:
+                    picker.middleLeft.IsChecked = true;
+                    break;
+                case ResizeAnchor.Center:
+                    picker.middleCenter.IsChecked = true;
+                    break;
+                case ResizeAnchor.Right:
+                    picker.middleRight.IsChecked = true;
+                    break;
+                case ResizeAnchor.BottomLeft:
+                    picker.bottomLeft.IsChecked = true;
+                    break;
+                case ResizeAnchor.Bottom:
+                    picker.bottomCenter.IsChecked = true;
+                    break;
+                case ResizeAnchor.BottomRight:
+                    picker.bottomRight.IsChecked = true;
+                    break;
+            }
+        }
     }
 
     private void ToggleButton_Checked(object sender, RoutedEventArgs e)

src/PixiEditor.UI.Common/Controls/ToggleButton.axaml

@@ -21,7 +21,6 @@
                           BorderBrush="{TemplateBinding BorderBrush}"
                           BorderThickness="{TemplateBinding BorderThickness}"
                           Content="{TemplateBinding Content}"
-                          Transitions="{TemplateBinding Transitions}"
                           ContentTemplate="{TemplateBinding ContentTemplate}"
                           CornerRadius="{TemplateBinding CornerRadius}"
                           RecognizesAccessKey="True"