Skip to content

Latest commit

 

History

History
65 lines (51 loc) · 1.86 KB

quickstart-zoom-border.md

File metadata and controls

65 lines (51 loc) · 1.86 KB
title
Quickstart: ZoomBorder

Quickstart: ZoomBorder

Create a zoomable container by wrapping your content in Avalonia.Controls.PanAndZoom.ZoomBorder.

Minimal XAML

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:paz="using:Avalonia.Controls.PanAndZoom">
  <paz:ZoomBorder x:Name="ZoomBorder"
                  Stretch="None"
                  ZoomSpeed="1.2"
                  Background="SlateBlue"
                  ClipToBounds="True"
                  Focusable="True">
    <Canvas Background="LightGray" Width="300" Height="300">
      <Rectangle Canvas.Left="100" Canvas.Top="100" Width="50" Height="50" Fill="Red" />
    </Canvas>
  </paz:ZoomBorder>
</Window>

Common Code-Behind Hooks

ZoomBorder.ZoomChanged += (_, e) =>
{
    Debug.WriteLine($"Zoom: {e.ZoomX}, {e.ZoomY} Offset: {e.OffsetX}, {e.OffsetY}");
};

ZoomBorder.Fill();
ZoomBorder.Uniform();
ZoomBorder.ResetMatrix();

Recommended First Properties

  • PanButton: choose which mouse button starts panning
  • EnablePan and EnableZoom: feature gates for interaction
  • EnableGestures: attach pinch and scroll recognizers
  • Stretch: initial fit policy
  • BoundsMode: how content should be constrained when panning

MVVM Command Binding

ZoomBorder exposes built-in commands that can be bound directly in XAML:

<StackPanel>
  <Button Content="Zoom In" Command="{Binding #ZoomBorder.ZoomInCommand}" />
  <Button Content="Reset" Command="{Binding #ZoomBorder.ResetCommand}" />
  <Button Content="Fit" Command="{Binding #ZoomBorder.FitCommand}" />
</StackPanel>

Next Steps