|
| 1 | +--- |
| 2 | +title: Image Interpolation |
| 3 | +description: CONCEPTS |
| 4 | +--- |
| 5 | + |
| 6 | +When displaying images in Avalonia, particularly when scaling them to sizes different from their native resolution, the quality of the rendering depends on the interpolation mode being used. This guide explains how to control image interpolation in your Avalonia applications. |
| 7 | + |
| 8 | +## Default Behavior |
| 9 | + |
| 10 | +As of Avalonia 11, the default interpolation mode is set to `LowQuality`. This setting prioritizes performance but may result in less smooth image rendering when scaling images, particularly when displaying them at sizes significantly smaller than their original dimensions. |
| 11 | + |
| 12 | +## Interpolation Modes |
| 13 | + |
| 14 | +Avalonia supports several bitmap interpolation modes that can be applied to image rendering: |
| 15 | + |
| 16 | +- `None`: No interpolation |
| 17 | +- `LowQuality`: Basic interpolation (default) |
| 18 | +- `MediumQuality`: Balanced interpolation |
| 19 | +- `HighQuality`: Smooth interpolation, best for downsizing images |
| 20 | + |
| 21 | +## Setting the Interpolation Mode |
| 22 | + |
| 23 | +### Per-Control Setting |
| 24 | + |
| 25 | +You can set the interpolation mode on individual controls using the `RenderOptions.BitmapInterpolationMode` attached property: |
| 26 | + |
| 27 | +```xml |
| 28 | +<Image Source="assets/myimage.png" |
| 29 | + RenderOptions.BitmapInterpolationMode="HighQuality" /> |
| 30 | +``` |
| 31 | + |
| 32 | +This can also be applied to containers: |
| 33 | + |
| 34 | +```xml |
| 35 | +<Border RenderOptions.BitmapInterpolationMode="HighQuality"> |
| 36 | + <Image Source="assets/myimage.png" /> |
| 37 | +</Border> |
| 38 | +``` |
| 39 | + |
| 40 | +### Common Use Cases |
| 41 | + |
| 42 | +1. **Icon Display**: When displaying icons that are being scaled down, using `HighQuality` interpolation can prevent jagged edges: |
| 43 | +```xml |
| 44 | +<Button> |
| 45 | + <Image Source="assets/icon.png" |
| 46 | + Width="16" |
| 47 | + Height="16" |
| 48 | + RenderOptions.BitmapInterpolationMode="HighQuality" /> |
| 49 | +</Button> |
| 50 | +``` |
| 51 | + |
| 52 | +2. **Image Galleries**: For image galleries where quality is important: |
| 53 | +```xml |
| 54 | +<ItemsControl RenderOptions.BitmapInterpolationMode="HighQuality"> |
| 55 | + <ItemsControl.ItemTemplate> |
| 56 | + <DataTemplate> |
| 57 | + <Image Source="{Binding ImagePath}" /> |
| 58 | + </DataTemplate> |
| 59 | + </ItemsControl.ItemTemplate> |
| 60 | +</ItemsControl> |
| 61 | +``` |
| 62 | + |
| 63 | +## Performance Considerations |
| 64 | + |
| 65 | +The interpolation mode is set per-control by design for performance reasons. Higher quality interpolation requires more computational resources, so consider these guidelines: |
| 66 | + |
| 67 | +- Use `HighQuality` for: |
| 68 | + - Important UI elements like logos |
| 69 | + - Scaled-down images where quality is crucial |
| 70 | + - Photo galleries or image-focused interfaces |
| 71 | + |
| 72 | +- Use default `LowQuality` for: |
| 73 | + - Background images |
| 74 | + - Decorative elements where quality is less critical |
| 75 | + - Performance-sensitive applications |
| 76 | + |
| 77 | +## Creating a Global Setting |
| 78 | + |
| 79 | +While Avalonia doesn't provide a built-in way to set a global interpolation mode, you can create a custom attached property or behavior to manage this across your application. Here's an example approach: |
| 80 | + |
| 81 | +```csharp |
| 82 | +public static class GlobalImageOptions |
| 83 | +{ |
| 84 | + public static readonly AttachedProperty<BitmapInterpolationMode> InterpolationModeProperty = |
| 85 | + AvaloniaProperty.RegisterAttached<Image, BitmapInterpolationMode>( |
| 86 | + "InterpolationMode", |
| 87 | + typeof(GlobalImageOptions), |
| 88 | + defaultValue: BitmapInterpolationMode.HighQuality); |
| 89 | + |
| 90 | + public static void SetInterpolationMode(Image image, BitmapInterpolationMode value) |
| 91 | + { |
| 92 | + image.SetValue(RenderOptions.BitmapInterpolationModeProperty, value); |
| 93 | + } |
| 94 | +} |
| 95 | +``` |
| 96 | + |
| 97 | +Then in your XAML: |
| 98 | + |
| 99 | +```xml |
| 100 | +<Style Selector="Image"> |
| 101 | + <Setter Property="(local:GlobalImageOptions.InterpolationMode)" |
| 102 | + Value="HighQuality" /> |
| 103 | +</Style> |
| 104 | +``` |
| 105 | + |
| 106 | +## Tips for Best Results |
| 107 | + |
| 108 | +1. **Asset Preparation**: |
| 109 | + - Provide images at appropriate resolutions for their intended display size |
| 110 | + - Consider including multiple resolutions for important assets |
| 111 | + - Use vector formats (SVG) when possible for resolution-independent graphics |
| 112 | + |
| 113 | +2. **Layout Considerations**: |
| 114 | + - Be mindful of the original image dimensions versus display size |
| 115 | + - Use appropriate containers and layout panels to manage image scaling |
| 116 | + - Consider using `UniformToFill` or `Uniform` stretch modes with high-quality interpolation |
| 117 | + |
| 118 | +3. **Testing**: |
| 119 | + - Test image rendering on different screen densities |
| 120 | + - Verify performance impact when using high-quality interpolation on many images |
| 121 | + - Check memory usage with different interpolation settings |
0 commit comments