Image Filter quality

samples/Sample7_FlyUI/WindowContentElement.cs

@@ -25,7 +25,7 @@ public class WindowContentElement : StatelessElement
                         margin: Edges.Symmetric(25, 0), 
                         backgroundColor: Color.FromRgba(25, 25, 25, 255),
                         child: new Column(
-                            new Image("/Pizza.png")))
+                            new Image("/Pizza.png", filterQuality: FilterQuality.None)))
                 )
             )
         );

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

@@ -63,12 +63,12 @@
                                 </ImageBrush>
                             </Border.Background>
                             <Image Source="{Binding Folder.PreviewBitmap, ElementName=folderControl}" Stretch="Uniform" Width="30" Height="30">
-                                <helpers:RenderOptionsBindable.BitmapInterpolationMode>
+                                <ui:RenderOptionsBindable.BitmapInterpolationMode>
                                     <MultiBinding Converter="{converters:WidthToBitmapScalingModeConverter}">
                                         <Binding Path="Folder.PreviewBitmap.PixelSize.Width" ElementName="folderControl"/>
                                         <Binding RelativeSource="{RelativeSource Mode=Self}" Path="Bounds.Width"/>
                                     </MultiBinding>
-                                </helpers:RenderOptionsBindable.BitmapInterpolationMode>
+                                </ui:RenderOptionsBindable.BitmapInterpolationMode>
                             </Image>
                         </Border>
                         <Border 

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

@@ -6,6 +6,7 @@
              xmlns:converters="clr-namespace:PixiEditor.AvaloniaUI.Helpers.Converters"
              xmlns:input="clr-namespace:PixiEditor.AvaloniaUI.Views.Input"
              xmlns:ui1="clr-namespace:PixiEditor.AvaloniaUI.Helpers.UI"
+             xmlns:ui="clr-namespace:PixiEditor.Extensions.UI;assembly=PixiEditor.Extensions"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              Name="uc"
              x:Class="PixiEditor.AvaloniaUI.Views.Main.Navigation">
@@ -60,7 +61,7 @@
                 </TextBlock.Text>
             </TextBlock>
         </StackPanel>
-        <Grid Grid.Row="2" HorizontalAlignment="Right" Margin="0,0,5,0" ui1:RenderOptionsBindable.BitmapInterpolationMode="{Binding ElementName=backgroundButton, Path=ActiveItem.ScalingMode}">
+        <Grid Grid.Row="2" HorizontalAlignment="Right" Margin="0,0,5,0" ui:RenderOptionsBindable.BitmapInterpolationMode="{Binding ElementName=backgroundButton, Path=ActiveItem.ScalingMode}">
             <StackPanel Orientation="Horizontal">
                 <input:ListSwitchButton x:Name="formatButton" Margin="0,0,5,0" Height="20">
                     <input:ListSwitchButton.Items>

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

@@ -7,6 +7,7 @@
              xmlns:converters1="clr-namespace:PixiEditor.AvaloniaUI.Helpers.Converters"
              xmlns:ui="clr-namespace:PixiEditor.AvaloniaUI.Helpers.UI"
              xmlns:visuals="clr-namespace:PixiEditor.AvaloniaUI.Views.Visuals"
+             xmlns:ui1="clr-namespace:PixiEditor.Extensions.UI;assembly=PixiEditor.Extensions"
              mc:Ignorable="d"
              x:Name="uc"
              HorizontalAlignment="Center"
@@ -19,11 +20,11 @@
         Surface="{Binding TargetBitmap, ElementName=uc}"
         Stretch="Uniform"
         SizeChanged="OnImageSizeChanged">
-        <ui:RenderOptionsBindable.BitmapInterpolationMode>
+        <ui1:RenderOptionsBindable.BitmapInterpolationMode>
             <MultiBinding Converter="{converters1:WidthToBitmapScalingModeConverter}">
                 <Binding ElementName="uc" Path="TargetBitmap.Size.X"/>
                 <Binding ElementName="mainImage" Path="Bounds.Width"/>
             </MultiBinding>
-        </ui:RenderOptionsBindable.BitmapInterpolationMode>
+        </ui1:RenderOptionsBindable.BitmapInterpolationMode>
     </visuals:SurfaceControl>
 </UserControl>

src/PixiEditor.AvaloniaUI/Views/Main/ViewportControls/Viewport.axaml

@@ -137,7 +137,7 @@
             FadeOut="{Binding Source={viewModels:ToolVM ColorPickerToolViewModel}, Path=PickOnlyFromReferenceLayer, Mode=OneWay}"
             DefaultCursor="{Binding Source={viewModels:MainVM}, Path=ToolsSubViewModel.ToolCursor, Mode=OneWay}"
             CheckerImagePath="/Images/CheckerTile.png"
-            ui1:RenderOptionsBindable.BitmapInterpolationMode="{Binding Scale, Converter={converters:ScaleToBitmapScalingModeConverter}, RelativeSource={RelativeSource Self}}"/>
+            ui:RenderOptionsBindable.BitmapInterpolationMode="{Binding Scale, Converter={converters:ScaleToBitmapScalingModeConverter}, RelativeSource={RelativeSource Self}}"/>
         <!--<zoombox:Zoombox
             Tag="{Binding ElementName=vpUc}"
             x:Name="zoombox"

src/PixiEditor.AvaloniaUI/Views/Windows/HelloTherePopup.axaml

@@ -120,12 +120,12 @@
                                                         Margin="10"
                                                         Stretch="Uniform"
                                                         x:Name="image">
-                                                        <ui1:RenderOptionsBindable.BitmapInterpolationMode>
+                                                        <ui:RenderOptionsBindable.BitmapInterpolationMode>
                                                             <MultiBinding Converter="{converters:WidthToBitmapScalingModeConverter}">
                                                                 <Binding Path="PreviewBitmap.Size.X"/>
                                                                 <Binding ElementName="image" Path="Width"/>
                                                             </MultiBinding>
-                                                        </ui1:RenderOptionsBindable.BitmapInterpolationMode>
+                                                        </ui:RenderOptionsBindable.BitmapInterpolationMode>
                                                     </visuals:SurfaceControl>
                                                     <Border Grid.Row="1" Height="8" Width="8" x:Name="extensionBorder" Margin="5"
                                                             Background="{Binding FileExtension, Converter={converters:FileExtensionToColorConverter}}" 

src/PixiEditor.Extensions.CommonApi/FlyUI/Properties/FilterQuality.cs

@@ -0,0 +1,10 @@
+namespace PixiEditor.Extensions.CommonApi.FlyUI.Properties;
+
+public enum FilterQuality : byte
+{
+    Unspecified,
+    None,
+    Low,
+    Medium,
+    High,
+}

src/PixiEditor.Extensions.Wasm/Api/FlyUI/Image.cs

@@ -26,13 +26,15 @@ public class Image : StatelessElement
     public double Width { get; set; } 
     public double Height { get; set; }
     public FillMode FillMode { get; set; }
+    public FilterQuality FilterQuality { get; set; }
 
-    public Image(string source, double width = -1, double height = -1, FillMode fillMode = FillMode.Uniform)
+    public Image(string source, double width = -1, double height = -1, FillMode fillMode = FillMode.Uniform, FilterQuality filterQuality = FilterQuality.Unspecified)
     {
         Source = source;
         Width = width;
         Height = height;
         FillMode = fillMode;
+        FilterQuality = filterQuality;
     }
 
     public override CompiledControl BuildNative()
@@ -43,6 +45,7 @@ public class Image : StatelessElement
         image.AddProperty(Width);
         image.AddProperty(Height);
         image.AddProperty((int)FillMode);
+        image.AddProperty((byte)FilterQuality);
         
         BuildPendingEvents(image);
         return image;

src/PixiEditor.Extensions/FlyUI/Elements/Image.cs

@@ -4,9 +4,11 @@ using Avalonia.Controls;
 using Avalonia.Data;
 using Avalonia.Layout;
 using Avalonia.Media;
+using Avalonia.Media.Imaging;
 using PixiEditor.Extensions.CommonApi.FlyUI.Properties;
 using PixiEditor.Extensions.Extensions;
 using PixiEditor.Extensions.FlyUI.Converters;
+using PixiEditor.Extensions.UI;
 
 namespace PixiEditor.Extensions.FlyUI.Elements;
 
@@ -16,15 +18,29 @@ public class Image : StatelessElement, IPropertyDeserializable
     private double _width = -1;
     private double _height = -1;
     private FillMode _fillMode = FillMode.Uniform;
+    private FilterQuality _filterQuality = FilterQuality.None;
+    private Avalonia.Controls.Image _image = null!;
     
     public string Source { get => _source; set => SetField(ref _source, value); }
     public double Width { get => _width; set => SetField(ref _width, value); }
     public double Height { get => _height; set => SetField(ref _height, value); }
     public FillMode FillMode { get => _fillMode; set => SetField(ref _fillMode, value); }
+
+    public FilterQuality FilterQuality
+    {
+        get => _filterQuality;
+        set
+        {
+            if (SetField(ref _filterQuality, value) && _image != null)
+            {
+                RenderOptions.SetBitmapInterpolationMode(_image, (BitmapInterpolationMode)(byte)FilterQuality);
+            }
+        }
+    }
     
     public override Control BuildNative()
     {
-        Avalonia.Controls.Image image = new();
+        _image = new();
         
         Binding sourceBinding = new()
         {
@@ -52,12 +68,13 @@ public class Image : StatelessElement, IPropertyDeserializable
             Converter = new EnumToEnumConverter<FillMode, Stretch>()
         };
         
-        image.Bind(Avalonia.Controls.Image.SourceProperty, sourceBinding);
-        image.Bind(Layoutable.WidthProperty, widthBinding);
-        image.Bind(Layoutable.HeightProperty, heightBinding);
-        image.Bind(Avalonia.Controls.Image.StretchProperty, fillModeBinding);
+        _image.Bind(Avalonia.Controls.Image.SourceProperty, sourceBinding);
+        _image.Bind(Layoutable.WidthProperty, widthBinding);
+        _image.Bind(Layoutable.HeightProperty, heightBinding);
+        _image.Bind(Avalonia.Controls.Image.StretchProperty, fillModeBinding);
+        RenderOptions.SetBitmapInterpolationMode(_image, (BitmapInterpolationMode)(byte)FilterQuality);
         
-        return image;
+        return _image;
     }
 
 
@@ -68,7 +85,8 @@ public class Image : StatelessElement, IPropertyDeserializable
         yield return Width;
         yield return Height;
         
-        yield return (int)FillMode;
+        yield return FillMode;
+        yield return FilterQuality;
     }
 
     public void DeserializeProperties(ImmutableList<object> values)
@@ -82,6 +100,7 @@ public class Image : StatelessElement, IPropertyDeserializable
         Width = Width < 0 ? double.NaN : Width;
         Height = Height < 0 ? double.NaN : Height;
         
-        FillMode = (FillMode)valuesList.ElementAtOrDefault(3, (int)FillMode.Uniform);
+        FillMode = (FillMode)valuesList.ElementAtOrDefault(3, FillMode.Uniform);
+        FilterQuality = (FilterQuality)valuesList.ElementAtOrDefault(4, FilterQuality.Unspecified);
     }
 }

src/PixiEditor.AvaloniaUI/Helpers/UI/RenderOptionsBindable.cs → src/PixiEditor.Extensions/UI/RenderOptionsBindable.cs

@@ -2,7 +2,7 @@
 using Avalonia.Media;
 using Avalonia.Media.Imaging;
 
-namespace PixiEditor.AvaloniaUI.Helpers.UI;
+namespace PixiEditor.Extensions.UI;
 
 public class RenderOptionsBindable
 {