Reference layer and layers

src/PixiEditor.AvaloniaUI/Styles/PortingWipStyles.axaml

@@ -19,10 +19,6 @@
 
     </Style>
 
-    <Style Selector="CheckBox.ImageCheckBox">
-
-    </Style>
-
     <Style Selector="Button.ImageButtonStyle">
         <Setter Property="Template">
             <ControlTemplate>
@@ -34,18 +30,20 @@
     </Style>
 
     <Style Selector="CheckBox.ImageCheckBox">
+        <Setter Property="Content" Value="{DynamicResource icon-eye-off}"/>
         <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>
+            <Setter.Value>
+                <ControlTemplate>
+                    <Border Cursor="Hand" Background="{TemplateBinding Background}">
+                        <TextBlock Text="{TemplateBinding Content}" FontSize="16" Classes="pixi-icon"/>
+                    </Border>
+                </ControlTemplate>
+            </Setter.Value>
         </Setter>
     </Style>
 
-    <Style Selector="CheckBox.ImageCheckBox:checked Image">
-        <Setter Property="Source" Value="../Images/Eye.png" />
+    <Style Selector="CheckBox.ImageCheckBox:checked">
+        <Setter Property="Content" Value="{DynamicResource icon-eye}"/>
     </Style>
 
     <Style Selector="ToggleButton.ExpandCollapseToggleStyle">

src/PixiEditor.AvaloniaUI/Views/Layers/FolderControl.axaml

@@ -40,7 +40,7 @@
                 <RowDefinition Height="10"/>
             </Grid.RowDefinitions>
             <Grid DragDrop.AllowDrop="True" helpers:DragDropEvents.DragEnter="Grid_DragEnter" helpers:DragDropEvents.Drop="Grid_Drop_Top" helpers:DragDropEvents.DragLeave="Grid_DragLeave" Grid.Row="0" Grid.ColumnSpan="3" Background="Transparent" Panel.ZIndex="3"/>
-            <Grid IsVisible="True" x:Name="middleDropGrid" Grid.Row="1" DragDrop.AllowDrop="True" Panel.ZIndex="2" Background="Transparent" helpers:DragDropEvents.DragEnter="Grid_CenterEnter" helpers:DragDropEvents.Drop="Grid_Drop_Center" helpers:DragDropEvents.DragLeave="Grid_CenterLeave" />
+            <Grid IsVisible="True" Margin="20, 0, 0,0" x:Name="middleDropGrid" Grid.Row="1" DragDrop.AllowDrop="True" Panel.ZIndex="2" Background="Transparent" helpers:DragDropEvents.DragEnter="Grid_CenterEnter" helpers:DragDropEvents.Drop="Grid_Drop_Center" helpers:DragDropEvents.DragLeave="Grid_CenterLeave" />
             <Grid x:Name="centerGrid" Grid.Row="0" Grid.RowSpan="3" Background="Transparent">
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="24"/>
@@ -48,7 +48,7 @@
                 </Grid.ColumnDefinitions>
                 <CheckBox Classes="ImageCheckBox" VerticalAlignment="Center"
                       IsThreeState="False" HorizontalAlignment="Center"
-                      IsChecked="{Binding Path=Folder.IsVisibleBindable, ElementName=folderControl}" Grid.Column="0" Height="16"/>
+                      IsChecked="{Binding Path=Folder.IsVisibleBindable, ElementName=folderControl, Mode=TwoWay}" Grid.Column="0" Height="16"/>
 
                 <StackPanel Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Left">
                     <Rectangle Width="{Binding Path=(helpers:TreeViewItemHelper.Indent).Value, Mode=OneWay, RelativeSource={RelativeSource AncestorType=ItemsPresenter}}" Fill="Transparent" StrokeThickness="0"/>
@@ -123,7 +123,7 @@
                             </StackPanel>
                         </StackPanel>
                     </StackPanel>
-                    <Image Source="/Images/Folder.png" Height="20" Margin="0,0,10,0" HorizontalAlignment="Right"/>
+                    <TextBlock Text="{DynamicResource icon-folder}" Classes="pixi-icon" FontSize="20" Margin="0,0,10,0" HorizontalAlignment="Right"/>
                 </StackPanel>
             </Grid>
             <Grid

src/PixiEditor.AvaloniaUI/Views/Layers/LayerControl.axaml

@@ -49,7 +49,7 @@
                 </Grid.ColumnDefinitions>
                 <CheckBox Classes="ImageCheckBox" VerticalAlignment="Center"
                       IsThreeState="False" HorizontalAlignment="Center"
-                      IsChecked="{Binding Path=Layer.IsVisibleBindable, ElementName=uc}"
+                      IsChecked="{Binding Path=Layer.IsVisibleBindable, ElementName=uc, Mode=TwoWay}"
                       Grid.Column="0" Height="16" />
                 <StackPanel Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Left">
                     <Rectangle Width="{Binding Path=(helpers:TreeViewItemHelper.Indent).Value, Mode=OneWay, RelativeSource={RelativeSource AncestorType=ItemsPresenter}}" Fill="Transparent" StrokeThickness="0"/>

src/PixiEditor.AvaloniaUI/Views/Layers/ReferenceLayer.axaml

@@ -12,8 +12,16 @@
              xmlns:viewModels="clr-namespace:PixiEditor.AvaloniaUI.ViewModels"
              xmlns:ui1="clr-namespace:PixiEditor.AvaloniaUI.Helpers.UI"
              xmlns:visuals="clr-namespace:PixiEditor.AvaloniaUI.Views.Visuals"
+             xmlns:layers="clr-namespace:PixiEditor.AvaloniaUI.Views.Layers"
              mc:Ignorable="d"
              d:DesignHeight="60" d:DesignWidth="350" VerticalAlignment="Center" x:Name="uc">
+    <UserControl.Styles>
+        <Style Selector=":topmost Button#topmostBtn">
+            <Setter Property="RenderTransform">
+                <RotateTransform Angle="180" />
+            </Setter>
+        </Style>
+    </UserControl.Styles>
     <Border BorderThickness="0 2 0 0" MinWidth="60"
             Focusable="True" DragDrop.AllowDrop="True"
             ui1:DragDropEvents.DragEnter="ReferenceLayer_DragEnter"
@@ -59,17 +67,12 @@
                         </Grid>
                         <Button Cursor="Hand" DockPanel.Dock="Left"
                                 Command="{cmds:Command PixiEditor.Layer.ToggleReferenceLayerTopMost}"
-                                Classes="ImageButtonStyle"
+                                Name="topmostBtn"
+                                Classes="pixi-icon"
+                                Content="{DynamicResource icon-reference-layer}"
                                 ToolTip.Tip="{Binding Document.ReferenceLayerViewModel.IsTopMost, ElementName=uc, Converter={converters:BoolToValueConverter FalseValue='localized:PUT_REFERENCE_LAYER_ABOVE', TrueValue='localized:PUT_REFERENCE_LAYER_BELOW'}}"
                                 RenderOptions.BitmapInterpolationMode="HighQuality"
-                                Width="20" Height="20" HorizontalAlignment="Right">
-                            <Button.Background>
-                                <ImageBrush
-                                    Source="{Binding Document.ReferenceLayerViewModel.IsTopMost, ElementName=uc, Converter={converters:BoolToBitmapValueConverter
-                                    FalseValue='/Images/ReferenceLayerBelow.png',
-                                    TrueValue='/Images/ReferenceLayerAbove.png'}}" />
-                            </Button.Background>
-                        </Button>
+                                Width="24" Height="24" HorizontalAlignment="Right"/>
                         <Border
                             HorizontalAlignment="Left" DockPanel.Dock="Left"
                             Width="30" Height="30"
@@ -83,34 +86,26 @@
                         </Border>
                         <Button Cursor="Hand" Grid.Column="1" DockPanel.Dock="Right"
                                 Command="{cmds:Command PixiEditor.Layer.DeleteReferenceLayer}"
-                                Classes="ImageButtonStyle"
+                                Classes="pixi-icon"
                                 RenderOptions.BitmapInterpolationMode="HighQuality"
                                 Margin="3,0,5,0"
-                                Width="20" Height="20" HorizontalAlignment="Right">
-                            <Button.Background>
-                                <ImageBrush Source="/Images/Trash.png" />
-                            </Button.Background>
-                        </Button>
+                                Content="{DynamicResource icon-trash}"
+                                Width="24" Height="24" HorizontalAlignment="Right"/>
                         <Button Cursor="Hand" DockPanel.Dock="Right"
                                 Command="{cmds:Command PixiEditor.Layer.ResetReferenceLayerPosition}"
-                                Classes="ImageButtonStyle"
+                                Classes="pixi-icon"
+                                Content="R"
+                                Margin="2, 0, 0, 0"
                                 ui:Translator.TooltipKey="RESET_REFERENCE_LAYER_POS"
                                 RenderOptions.BitmapInterpolationMode="HighQuality"
-                                Width="20" Height="20" HorizontalAlignment="Right">
-                            <Button.Background>
-                                <ImageBrush Source="/Images/Layout.png" />
-                            </Button.Background>
-                        </Button>
+                                Width="24" Height="24" HorizontalAlignment="Right"/>
                         <Button Cursor="Hand" DockPanel.Dock="Right"
                                 Command="{cmds:Command PixiEditor.Layer.TransformReferenceLayer}"
-                                Classes="ImageButtonStyle"
+                                Classes="pixi-icon"
+                                Content="{DynamicResource icon-crop}"
                                 ui:Translator.TooltipKey="TRANSFORM_REFERENCE_LAYER"
                                 RenderOptions.BitmapInterpolationMode="HighQuality"
-                                Width="20" Height="20" HorizontalAlignment="Right">
-                            <Button.Background>
-                                <ImageBrush Source="/Images/Crop.png" />
-                            </Button.Background>
-                        </Button>
+                                Width="24" Height="24" HorizontalAlignment="Right"/>
                         <TextBlock IsEnabled="{Binding ElementName=uc, Path=IsEnabled}" HorizontalAlignment="Center"
                                    Margin="0 0 5 0" Foreground="White"
                                    FontSize="15" VerticalAlignment="Center" ui:Translator.Key="REFERENCE" />

src/PixiEditor.AvaloniaUI/Views/Layers/ReferenceLayer.axaml.cs

@@ -1,4 +1,5 @@
-using Avalonia;
+using System.ComponentModel;
+using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Input;
 using PixiEditor.AvaloniaUI.Models.Commands;
@@ -21,12 +22,39 @@ internal partial class ReferenceLayer : UserControl
         get => GetValue(DocumentProperty);
         set => SetValue(DocumentProperty, value);
     }
+    
+    static ReferenceLayer()
+    {
+        DocumentProperty.Changed.Subscribe(OnDocumentChanged);
+    }
 
     public ReferenceLayer()
     {
         command = CommandController.Current.Commands["PixiEditor.Clipboard.PasteReferenceLayer"];
         InitializeComponent();
     }
+    
+    private static void OnDocumentChanged(AvaloniaPropertyChangedEventArgs<DocumentViewModel> e)
+    {
+        ReferenceLayer referenceLayer = (ReferenceLayer)e.Sender;
+        if (e.OldValue.HasValue && e.OldValue.Value != null)
+        {
+            e.OldValue.Value.ReferenceLayerViewModel.PropertyChanged -= referenceLayer.OnDocumentPropertyChanged;
+        }
+        
+        if (e.NewValue.HasValue && e.NewValue.Value != null)
+        {
+            e.NewValue.Value.ReferenceLayerViewModel.PropertyChanged += referenceLayer.OnDocumentPropertyChanged;
+        }
+    }
+
+    private void OnDocumentPropertyChanged(object? sender, PropertyChangedEventArgs e)
+    {
+        if (e.PropertyName == nameof(ReferenceLayerViewModel.IsTopMost))
+        {
+            PseudoClasses.Set(":topmost", Document.ReferenceLayerViewModel.IsTopMost);
+        }
+    }
 
     private void ReferenceLayer_DragEnter(object sender, DragEventArgs e)
     {