PanAndZoom

PanAndZoom control for Avalonia

NuGet

PanAndZoom is delivered as a NuGet package.

You can find the NuGet packages here for Avalonia or by using nightly build feed:

• Add https://www.myget.org/F/panandzoom-nightly/api/v2 to your package sources
• Alternative nightly build feed https://pkgs.dev.azure.com/wieslawsoltes/GitHub/_packaging/CI/nuget/v3/index.json
• Update your package using PanAndZoom feed

You can install the package for Avalonia based projects like this:

Install-Package Avalonia.Controls.PanAndZoom -Pre

Package Dependencies

• Avalonia

Package Sources

• https://api.nuget.org/v3/index.json
• https://www.myget.org/F/panandzoom-nightly/api/v2

Resources

• GitHub source code repository.

Using PanAndZoom

Avalonia

MainWindow.xaml

<Window x:Class="AvaloniaDemo.MainWindow"
        xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:paz="clr-namespace:Avalonia.Controls.PanAndZoom;assembly=Avalonia.Controls.PanAndZoom"
        UseLayoutRounding="True"
        Title="PanAndZoom Avalonia Demo" Height="640" Width="640">
    <Grid RowDefinitions="Auto,12,Auto,12,*,12" ColumnDefinitions="50,*,50">
        <StackPanel Orientation="Vertical" 
                    HorizontalAlignment="Center" Grid.Row="0" Grid.Column="1">
            <TextBlock Text="F - Fill"/>
            <TextBlock Text="U - Uniform"/>
            <TextBlock Text="R - Reset"/>
            <TextBlock Text="T - Toggle Stretch Mode"/>
            <TextBlock Text="Mouse Wheel - Zoom to Point"/>
            <TextBlock Text="Mouse Left Button Down - Pan"/>
        </StackPanel>
        <StackPanel Orientation="Horizontal" 
                    HorizontalAlignment="Center" Grid.Row="2" Grid.Column="1">
            <TextBlock Text="PanButton:" VerticalAlignment="Center"/>
            <ComboBox Items="{x:Static paz:ZoomBorder.ButtonNames}" 
                      SelectedItem="{Binding #zoomBorder.PanButton, Mode=TwoWay}" 
                      Margin="2">
            </ComboBox>
            <TextBlock Text="Stretch:" VerticalAlignment="Center"/>
            <ComboBox Items="{x:Static paz:ZoomBorder.StretchModes}" 
                      SelectedItem="{Binding #zoomBorder.Stretch, Mode=TwoWay}" 
                      Margin="2">
            </ComboBox>
            <TextBlock Text="ZoomSpeed:" VerticalAlignment="Center"/>
            <TextBox Text="{Binding #zoomBorder.ZoomSpeed, Mode=TwoWay}" 
                     TextAlignment="Center" Width="50" Margin="2"/>
            <CheckBox IsChecked="{Binding #zoomBorder.EnablePan}" 
                      Content="EnablePan" VerticalAlignment="Center"/>
            <CheckBox IsChecked="{Binding #zoomBorder.EnableZoom}" 
                      Content="EnableZoom" VerticalAlignment="Center"/>
        </StackPanel>
        <paz:ZoomBorder Name="zoomBorder" Stretch="None" ZoomSpeed="1.2" 
                        Background="SlateBlue" ClipToBounds="True" Focusable="True"
                        VerticalAlignment="Stretch" HorizontalAlignment="Stretch" 
                        Grid.Row="4" Grid.Column="1">
            <Canvas Background="LightGray" Width="300" Height="300">
                <Rectangle Canvas.Left="100" Canvas.Top="100" Width="50" Height="50" Fill="Red"/>
                <StackPanel Canvas.Left="100" Canvas.Top="200">
                    <TextBlock Text="Text1" Width="100" Background="Red" Foreground="WhiteSmoke"/>
                    <TextBlock Text="Text2" Width="100" Background="Red" Foreground="WhiteSmoke"/>
                </StackPanel>
            </Canvas>
        </paz:ZoomBorder>
    </Grid>
</Window>

MainWindow.xaml.cs

using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.PanAndZoom;
using Avalonia.Input;
using Avalonia.Markup.Xaml;

namespace AvaloniaDemo
{
    public class MainWindow : Window
    {
        private ZoomBorder zoomBorder;

        public MainWindow()
        {
            this.InitializeComponent();
            this.AttachDevTools();

            zoomBorder = this.Find<ZoomBorder>("zoomBorder");
            zoomBorder.KeyDown += ZoomBorder_KeyDown;
        }

        private void InitializeComponent()
        {
            AvaloniaXamlLoader.Load(this);
        }

        private void ZoomBorder_KeyDown(object sender, KeyEventArgs e)
        {
            if (e.Key == Key.F)
            {
                zoomBorder.Fill();
            }

            if (e.Key == Key.U)
            {
                zoomBorder.Uniform();
            }

            if (e.Key == Key.R)
            {
                zoomBorder.Reset();
            }

            if (e.Key == Key.T)
            {
                zoomBorder.ToggleStretchMode();
                zoomBorder.AutoFit();
            }
        }
    }
}

Getting zoom ratio

To get current zoom ratio use ZoomX and ZoomY properties.

Getting pan offset

To get current pan offset use OffsetX and OffsetY properties.

Constrain zoom ratio

To constrain zoom ratio use MinZoomX, MaxZoomX, MinZoomY and MaxZoomY properties.

Constrain pan offset

To constrain pan offset use MinOffsetX, MaxOffsetX, MinOffsetY and MaxOffsetY properties.

Enable or disable constrains

To enable or disable contrains use EnableConstrains flag.

License

PanAndZoom is licensed under the MIT license.