Ported Navigation

src/PixiEditor.AvaloniaUI.Desktop/Program.cs

@@ -2,7 +2,7 @@
 using Avalonia;
 using PixiEditor.AvaloniaUI;
 
-namespace PixiEditor.AvaloniaUI.Desktop;
+namespace PixiEditor.Avalonia.Desktop;
 
 public class Program
 {

src/PixiEditor.AvaloniaUI/App.axaml

@@ -5,17 +5,24 @@
              xmlns:templates="clr-namespace:ColorPicker.AvaloniaUI.Templates;assembly=ColorPicker.AvaloniaUI"
              x:Class="PixiEditor.AvaloniaUI.App"
              RequestedThemeVariant="Dark">
-             <!-- "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options. -->
-             <Application.DataTemplates>
-                 <avaloniaUi:ViewLocator />
-             </Application.DataTemplates>
+    <!-- "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options. -->
+    <Application.DataTemplates>
+        <avaloniaUi:ViewLocator />
+    </Application.DataTemplates>
     <Application.Styles>
         <themes:PixiEditorTheme />
-        <templates:PixiPerfectColorPickerTheme/>
-        <StyleInclude Source="/Styles/PixiEditor.Controls.axaml"/>
-        <StyleInclude Source="/Styles/PixiEditor.Animators.axaml"/>
-        <StyleInclude Source="/Styles/PixiEditor.Handles.axaml"/>
-        <StyleInclude Source="/Styles/PixiEditor.Layers.axaml"/>
-        <StyleInclude Source="/Styles/PixiEditorPopupTemplate.axaml"/>
+        <templates:PixiPerfectColorPickerTheme />
+        <StyleInclude Source="/Styles/PixiEditor.Controls.axaml" />
+        <StyleInclude Source="/Styles/PixiEditor.Animators.axaml" />
+        <StyleInclude Source="/Styles/PixiEditor.Handles.axaml" />
+        <StyleInclude Source="/Styles/PixiEditor.Layers.axaml" />
+        <StyleInclude Source="/Styles/PixiEditorPopupTemplate.axaml" />
     </Application.Styles>
+    <Application.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceInclude Source="/Styles/Templates/ListSwitchButton.axaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Application.Resources>
 </Application>

src/PixiEditor.AvaloniaUI/Data/Localization/Languages/en.json

@@ -587,5 +587,4 @@
   "ADD_PRIMARY_COLOR_TO_PALETTE_DESCRIPTIVE": "Add primary color to current palette",
 
   "EXPORT_SAVE_TITLE": "Choose a location to save the image",
-  "PREVIEW_BACKGROUND": "Preview background"
 }

src/PixiEditor.AvaloniaUI/Styles/Templates/ListSwitchButton.axaml

@@ -0,0 +1,29 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:input="clr-namespace:PixiEditor.AvaloniaUI.Views.Input"
+                    xmlns:ui="clr-namespace:PixiEditor.AvaloniaUI.Helpers.UI">
+    <ControlTheme x:Key="{x:Type input:ListSwitchButton}" TargetType="input:ListSwitchButton">
+            <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderLowBrush}"/>
+            <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}"/>
+            <Setter Property="BorderThickness" Value="1"/>
+            <Setter Property="FontSize" Value="12"/>
+            <Setter Property="Cursor" Value="Hand"/>
+            <Setter Property="Focusable" Value="False"/>
+            <Setter Property="Padding" Value="5, 0"/>
+            <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="input:ListSwitchButton">
+                        <Border
+                            CornerRadius="{TemplateBinding CornerRadius}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            Background="{Binding Path=ActiveItem.Background, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type input:ListSwitchButton}}}"
+                            BorderThickness="{TemplateBinding BorderThickness}">
+                            <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Path=ActiveItem.Content, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type input:ListSwitchButton}}}"
+                                       FontSize="{TemplateBinding FontSize}" Padding="{TemplateBinding Padding}"/>
+                        </Border>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+    </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.AvaloniaUI/Views/Input/ListSwitchButton.cs

@@ -7,13 +7,13 @@ using Avalonia.Media;
 
 namespace PixiEditor.AvaloniaUI.Views.Input;
 
-internal class ListSwitchButton : Button
+internal class ListSwitchButton : Button, INotifyPropertyChanged
 {
     public static readonly StyledProperty<ObservableCollection<SwitchItem>> ItemsProperty =
         AvaloniaProperty.Register<ListSwitchButton, ObservableCollection<SwitchItem>>(nameof(Items));
 
     public static readonly StyledProperty<SwitchItem> ActiveItemProperty =
-        AvaloniaProperty.Register<ListSwitchButton, SwitchItem>(nameof(ActiveItem), new SwitchItem(new SolidColorBrush(Brushes.Transparent.Color), "", null));
+        AvaloniaProperty.Register<ListSwitchButton, SwitchItem>(nameof(ActiveItem));
 
     public event PropertyChangedEventHandler? PropertyChanged;
 
@@ -31,8 +31,7 @@ internal class ListSwitchButton : Button
 
     static ListSwitchButton()
     {
-        //TODO: Validate it is not needed
-        //DefaultStyleKeyProperty.OverrideMetadata(typeof(ListSwitchButton), new FrameworkPropertyMetadata(typeof(ListSwitchButton)));
+        ItemsProperty.Changed.Subscribe(CollChanged);
     }
 
     public ListSwitchButton()

src/PixiEditor.AvaloniaUI/Views/Input/SwitchItem.cs

@@ -1,12 +1,21 @@
-using Avalonia.Media;
+using Avalonia;
+using Avalonia.Media;
 using Avalonia.Media.Imaging;
 
 namespace PixiEditor.AvaloniaUI.Views.Input;
 
-internal class SwitchItem
+internal class SwitchItem : AvaloniaObject
 {
     public string Content { get; set; } = "";
-    public IBrush? Background { get; set; }
+
+    public static readonly StyledProperty<IBrush?> BackgroundProperty = AvaloniaProperty.Register<SwitchItem, IBrush?>(
+        "Background");
+
+    public IBrush? Background
+    {
+        get => GetValue(BackgroundProperty);
+        set => SetValue(BackgroundProperty, value);
+    }
     public object Value { get; set; }
 
     public BitmapInterpolationMode ScalingMode { get; set; } = BitmapInterpolationMode.HighQuality;

src/PixiEditor.AvaloniaUI/Views/Main/Navigation.axaml

@@ -21,8 +21,9 @@
               IsVisible="{Binding !!Document, ElementName=uc}"
               Margin="10" Background="Transparent"
               d:Width="8" d:Height="8">
+            <!--TODO: In WPF, delayed was True and yet viewport refreshed instantly, here I had to switch it to False so it happens.-->
             <viewportControls:FixedViewport
-                Delayed="True"
+                Delayed="False"
                 x:Name="viewport"
                 Document="{Binding Document, ElementName=uc}"
                 Background="{Binding ActiveItem.Value, ElementName=backgroundButton}"/>
@@ -30,8 +31,8 @@
                     x:Name="colorCursor" Width="1" Height="1"
                     Margin="{Binding ColorCursorPosition, ElementName=uc}"
                     HorizontalAlignment="Left" VerticalAlignment="Top"
-                    BorderBrush="Black" BorderThickness=".1"
-                    IsVisible="{Binding IsMouseOver, ElementName=imageGrid}">
+                    BorderBrush="{DynamicResource ThemeBorderLowBrush}" BorderThickness=".1"
+                    IsVisible="{Binding IsPointerOver, ElementName=imageGrid}">
                 <Border BorderThickness=".1" BorderBrush="White"/>
             </Border>
         </Grid>
@@ -41,7 +42,7 @@
                 <SolidColorBrush Color="{Binding ColorCursorColor, ElementName=uc, FallbackValue=Black}"/>
             </Grid.Background>
         </Grid>
-        <StackPanel Grid.Row="2" Orientation="Horizontal" MinHeight="30"
+        <StackPanel Margin="10, 0, 0, 0" Grid.Row="2" Orientation="Horizontal" MinHeight="30"
                     Background="{DynamicResource ThemeBackgroundBrush}" MaxHeight="60">
             <StackPanel.Styles>
                 <Style Selector="TextBlock">
@@ -63,20 +64,20 @@
         </StackPanel>
         <Grid Grid.Row="2" HorizontalAlignment="Right" Margin="0,0,5,0" ui1:RenderOptionsBindable.BitmapInterpolationMode="{Binding ElementName=backgroundButton, Path=ActiveItem.ScalingMode}">
             <StackPanel Orientation="Horizontal">
-                <input:ListSwitchButton x:Name="formatButton" Margin="0,0,5,0" Height="20" Width="40" BorderBrush="Black">
+                <input:ListSwitchButton x:Name="formatButton" Margin="0,0,5,0" Height="20">
                     <input:ListSwitchButton.Items>
                         <input:SwitchItemObservableCollection>
-                            <input:SwitchItem Content="RGBA" Background="#353535" Value="RGBA"/>
-                            <input:SwitchItem Content="HEX" Background="#353535" Value="HEX"/>
+                            <input:SwitchItem Content="RGBA" Background="{DynamicResource ThemeControlMidBrush}" Value="RGBA"/>
+                            <input:SwitchItem Content="HEX" Background="{DynamicResource ThemeControlMidBrush}" Value="HEX"/>
                         </input:SwitchItemObservableCollection>
                     </input:ListSwitchButton.Items>
                 </input:ListSwitchButton>
-                <input:ListSwitchButton BorderBrush="{StaticResource DarkerAccentColor}" Width="25" Height="20" x:Name="backgroundButton" ui:Translator.TooltipKey="PREVIEW_BACKGROUND">
+                <input:ListSwitchButton RenderOptions.BitmapInterpolationMode="None" BorderBrush="{DynamicResource ThemeBorderMidBrush}" Width="25" Height="20" x:Name="backgroundButton">
                     <input:ListSwitchButton.Items>
                         <input:SwitchItemObservableCollection>
                             <input:SwitchItem ScalingMode="None">
                                 <input:SwitchItem.Background>
-                                    <ImageBrush Source="/Images/CheckerTile.png" TileMode="Tile" DestinationRect="0, 0, 1, 1"/>
+                                    <ImageBrush Source="/Images/CheckerTile.png" TileMode="Tile" DestinationRect="0, 0, 25 25"/>
                                 </input:SwitchItem.Background>
                                 <input:SwitchItem.Value>
                                     <ImageBrush DestinationRect="0, 10, 10, 10" Source="/Images/CheckerTile.png" TileMode="Tile"/>

src/PixiEditor.AvaloniaUI/Views/Main/ViewportControls/FixedViewport.axaml.cs

@@ -14,7 +14,7 @@ using PixiEditor.DrawingApi.Core.Numerics;
 
 namespace PixiEditor.AvaloniaUI.Views.Main.ViewportControls;
 
-internal partial class FixedViewport : UserControl
+internal partial class FixedViewport : UserControl, INotifyPropertyChanged
 {
     public static readonly StyledProperty<DocumentViewModel> DocumentProperty =
         AvaloniaProperty.Register<FixedViewport, DocumentViewModel>(nameof(Document), null);
@@ -137,7 +137,7 @@ internal partial class FixedViewport : UserControl
     private void OnImageSizeChanged(object sender, SizeChangedEventArgs e)
     {
         PropertyChanged?.Invoke(this, new(nameof(TargetBitmap)));
-        Document?.Operations.AddOrUpdateViewport(GetLocation());
+        //Document?.Operations.AddOrUpdateViewport(GetLocation()); //TODO: This causes deadlock
     }
 }
 

src/PixiEditor.Tests/AvaloniaTestRunner.cs

@@ -2,6 +2,7 @@
 using Avalonia.Headless;
 using Avalonia.Platform;
 using Avalonia.Threading;
+using PixiEditor.Avalonia.Desktop;
 using Xunit.Abstractions;
 using Xunit.Sdk;
 
@@ -55,7 +56,7 @@ namespace PixiEditor.Tests
                 {
                     try
                     {
-                        PixiEditor.AvaloniaUI.Desktop.Program.BuildAvaloniaApp()
+                        Program.BuildAvaloniaApp()
                             .UseHeadless(new AvaloniaHeadlessPlatformOptions { FrameBufferFormat = PixelFormat.Bgra8888, UseHeadlessDrawing = false })
                             .SetupWithoutStarting();
                         tcs.SetResult(SynchronizationContext.Current);

src/PixiEditor.UI.Common/Accents/Base.axaml

@@ -22,6 +22,7 @@
             <Color x:Key="ThemeControlHighlightColor">#515151</Color>
             <Color x:Key="HighlightForegroundColor">#FFFFFF</Color>
 
+            <Color x:Key="ThemeBorderLowColor">#1A1A1A</Color>
             <Color x:Key="ThemeBorderMidColor">#3F3F46</Color>
             <Color x:Key="ThemeBorderHighColor">#4F4F4F</Color>
 
@@ -54,6 +55,7 @@
             <SolidColorBrush x:Key="ThemeControlHighlightBrush" Color="{StaticResource ThemeControlHighlightColor}" />
             <SolidColorBrush x:Key="ThemeHighlightForegroundBrush" Color="{StaticResource HighlightForegroundColor}" />
 
+            <SolidColorBrush x:Key="ThemeBorderLowBrush" Color="{StaticResource ThemeBorderLowColor}" />
             <SolidColorBrush x:Key="ThemeBorderMidBrush" Color="{StaticResource ThemeBorderMidColor}" />
             <SolidColorBrush x:Key="ThemeBorderHighBrush" Color="{StaticResource ThemeBorderHighColor}" />