PanAndZoom control for WPF and Avalonia
PanAndZoom is delivered as a NuGet package.
You can find the packages here NuGet or by using nightly build feed:
- Add
https://www.myget.org/F/panandzoom-nightly/api/v2to your package sources - Update your package using
PanAndZoomfeed
You can install the package for Avalonia based projects like this:
Install-Package Avalonia.Controls.PanAndZoom -Pre
You can install the package for WPF based projects like this:
Install-Package Wpf.Controls.PanAndZoom -Pre
- Avalonia
- System.Reactive
- System.Reactive.Core
- System.Reactive.Interfaces
- System.Reactive.Linq
- System.Reactive.PlatformServices
- Serilog
- Splat
- Sprache
You can also use custom xmlns definition for ZoomBorder control: xmlns:paz="https://github.com/panandzoom".
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 Background="SlateBlue" RowDefinitions="Auto,*,24" ColumnDefinitions="50,*,50">
<StackPanel Background="#1FFFFFFF" Margin="4"
HorizontalAlignment="Center" VerticalAlignment="Top"
Grid.Row="0" Grid.Column="1">
<TextBlock Text="E - Extent" Foreground="WhiteSmoke" FontSize="11"/>
<TextBlock Text="F - Fill" Foreground="WhiteSmoke" FontSize="11"/>
<TextBlock Text="R - Reset" Foreground="WhiteSmoke" FontSize="11"/>
<TextBlock Text="T - Toggle AutoFitMode" Foreground="WhiteSmoke" FontSize="11"/>
<TextBlock Text="Mouse Wheel - Zoom to Point" Foreground="WhiteSmoke" FontSize="11"/>
<TextBlock Text="Mouse Right Button Down - Pan" Foreground="WhiteSmoke" FontSize="11"/>
</StackPanel>
<paz:ZoomBorder Name="zoomBorder" AutoFitMode="None" ZoomSpeed="1.2"
ClipToBounds="True" Background="DarkGray"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
Grid.Row="1" Grid.Column="1">
<Canvas Background="LightGray" Width="300" Height="300">
<Rectangle Canvas.Left="100" Canvas.Top="100" Width="50" Height="50" Fill="Red"/>
</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.E)
{
zoomBorder.Extent();
}
if (e.Key == Key.F)
{
zoomBorder.Fill();
}
if (e.Key == Key.R)
{
zoomBorder.Reset();
}
if (e.Key == Key.T)
{
zoomBorder.ToggleAutoFitMode();
zoomBorder.AutoFit();
}
}
}
}MainWindow.xaml
<Window x:Class="WpfDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:paz="clr-namespace:Wpf.Controls.PanAndZoom;assembly=Wpf.Controls.PanAndZoom"
WindowStartupLocation="CenterScreen"
UseLayoutRounding="True" SnapsToDevicePixels="True" TextOptions.TextFormattingMode="Display"
Title="PanAndZoom WPF Demo" Height="640" Width="640">
<Grid Background="SlateBlue">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="24"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<StackPanel Background="#1FFFFFFF" Margin="4"
HorizontalAlignment="Center" VerticalAlignment="Top"
Grid.Row="0" Grid.Column="1">
<TextBlock Text="E - Extent" Foreground="WhiteSmoke" FontSize="11"/>
<TextBlock Text="F - Fill" Foreground="WhiteSmoke" FontSize="11"/>
<TextBlock Text="R - Reset" Foreground="WhiteSmoke" FontSize="11"/>
<TextBlock Text="T - Toggle AutoFitMode" Foreground="WhiteSmoke" FontSize="11"/>
<TextBlock Text="Mouse Wheel - Zoom to Point" Foreground="WhiteSmoke" FontSize="11"/>
<TextBlock Text="Mouse Right Button Down - Pan" Foreground="WhiteSmoke" FontSize="11"/>
</StackPanel>
<paz:ZoomBorder x:Name="zoomBorder" AutoFitMode="None" ZoomSpeed="1.2" ClipToBounds="True"
Background="DarkGray"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
Grid.Row="1" Grid.Column="1">
<Canvas Background="LightGray" Width="300" Height="300">
<Rectangle Canvas.Left="100" Canvas.Top="100" Width="50" Height="50" Fill="Red"/>
</Canvas>
</paz:ZoomBorder>
</Grid>
</Window>MainWindow.xaml.cs
using System.Windows;
using System.Windows.Input;
namespace WpfDemo
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
zoomBorder.KeyDown += ZoomBorder_KeyDown;
}
private void ZoomBorder_KeyDown(object sender, KeyEventArgs e)
{
if (e.Key == Key.E)
{
zoomBorder.Extent();
}
if (e.Key == Key.F)
{
zoomBorder.Fill();
}
if (e.Key == Key.R)
{
zoomBorder.Reset();
}
if (e.Key == Key.T)
{
zoomBorder.ToggleAutoFitMode();
zoomBorder.AutoFit();
}
}
}
}PanAndZoom is licensed under the MIT license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent