Skip to content

Commit 061d399

Browse files
wieslawsolteswieslawsoltes
authored
Merge pull request #128 from wieslawsoltes/Fixes
Fixes
2 parents ce20d59 + 46e38b0 commit 061d399

13 files changed

+892
-83
lines changed

‎samples/AvaloniaDemo.Base/MainView.axaml‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@
99
FontFamily="avares://Avalonia.Fonts.Inter/Assets#Inter">
1010

1111
<TabControl>
12+
<!-- Commands Demo - MVVM Command Binding -->
13+
<TabItem Header="Commands">
14+
<views:CommandsView />
15+
</TabItem>
16+
1217
<!-- Phase 1: Coordinate Conversion -->
1318
<TabItem Header="Coordinate Conversion">
1419
<views:CoordinateConversionView />
@@ -209,19 +214,16 @@
209214
<TextBlock Text="Text2" Width="100" Background="Red" Foreground="WhiteSmoke" />
210215
</StackPanel>
211216
<Button Content="Reset Zoom"
212-
Command="{Binding ResetMatrix}"
213-
x:DataType="paz:ZoomBorder" x:CompileBindings="False"
217+
Command="{Binding #ZoomBorder1.ResetMatrix}"
214218
Width="120" Canvas.Left="100" Canvas.Top="250" />
215219
<ListBox Width="120"
216220
Canvas.Left="10" Canvas.Top="10"
217-
x:DataType="paz:ZoomBorder"
218221
ItemsSource="{x:Static paz:ZoomBorder.StretchModes}"
219-
SelectedItem="{Binding Stretch, Mode=TwoWay}" />
222+
SelectedItem="{Binding #ZoomBorder1.Stretch, Mode=TwoWay}" />
220223
<ListBox Width="120"
221224
Canvas.Left="160" Canvas.Top="10"
222-
x:DataType="paz:ZoomBorder"
223225
ItemsSource="{x:Static paz:ZoomBorder.ButtonNames}"
224-
SelectedItem="{Binding PanButton, Mode=TwoWay}" />
226+
SelectedItem="{Binding #ZoomBorder1.PanButton, Mode=TwoWay}" />
225227
</Canvas>
226228
</Border>
227229
</paz:ZoomBorder>

‎samples/AvaloniaDemo.Base/Views/CommandsView.axaml‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
<UserControl xmlns="https://github.com/avaloniaui"
2+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3+
xmlns:paz="using:Avalonia.Controls.PanAndZoom"
4+
x:Class="AvaloniaDemo.Views.CommandsView">
5+
6+
<Grid ColumnDefinitions="280,*">
7+
<!-- Controls -->
8+
<ScrollViewer Grid.Column="0" VerticalScrollBarVisibility="Auto">
9+
<StackPanel Margin="12" Spacing="8">
10+
<TextBlock Text="Commands Demo" FontWeight="Bold" FontSize="16" />
11+
<TextBlock Text="Demonstrates all ZoomBorder commands with MVVM binding" TextWrapping="Wrap" />
12+
13+
<Separator Margin="0,8" />
14+
15+
<TextBlock Text="Zoom Commands:" FontWeight="SemiBold" />
16+
<StackPanel Orientation="Horizontal" Spacing="4">
17+
<Button Content="Zoom In"
18+
Command="{Binding #ZoomBorder.ZoomInCommand}"
19+
Width="100" />
20+
<Button Content="Zoom Out"
21+
Command="{Binding #ZoomBorder.ZoomOutCommand}"
22+
Width="100" />
23+
</StackPanel>
24+
25+
<Separator Margin="0,8" />
26+
27+
<TextBlock Text="View Commands:" FontWeight="SemiBold" />
28+
<Button Content="Reset View"
29+
Command="{Binding #ZoomBorder.ResetCommand}" />
30+
<Button Content="Fit to View"
31+
Command="{Binding #ZoomBorder.FitCommand}" />
32+
<Button Content="Fill View"
33+
Command="{Binding #ZoomBorder.FillCommand}" />
34+
35+
<Separator Margin="0,8" />
36+
37+
<TextBlock Text="Stretch Commands:" FontWeight="SemiBold" />
38+
<Button Content="Uniform Stretch"
39+
Command="{Binding #ZoomBorder.UniformCommand}" />
40+
<Button Content="Uniform To Fill"
41+
Command="{Binding #ZoomBorder.UniformToFillCommand}" />
42+
<Button Content="Toggle Stretch Mode"
43+
Command="{Binding #ZoomBorder.ToggleStretchCommand}" />
44+
45+
<Separator Margin="0,8" />
46+
47+
<TextBlock Text="Navigation Commands:" FontWeight="SemiBold" />
48+
<StackPanel Orientation="Horizontal" Spacing="4">
49+
<Button Content="← Back"
50+
Command="{Binding #ZoomBorder.NavigateBackCommand}"
51+
Width="100" />
52+
<Button Content="Forward →"
53+
Command="{Binding #ZoomBorder.NavigateForwardCommand}"
54+
Width="100" />
55+
</StackPanel>
56+
57+
<Separator Margin="0,8" />
58+
59+
<TextBlock Text="Current State:" FontWeight="SemiBold" />
60+
<StackPanel x:DataType="paz:ZoomBorder" DataContext="{Binding #ZoomBorder}" Spacing="4">
61+
<TextBlock>
62+
<Run Text="Zoom X: " />
63+
<Run Text="{Binding ZoomX, StringFormat=F3}" FontWeight="SemiBold" />
64+
</TextBlock>
65+
<TextBlock>
66+
<Run Text="Zoom Y: " />
67+
<Run Text="{Binding ZoomY, StringFormat=F3}" FontWeight="SemiBold" />
68+
</TextBlock>
69+
<TextBlock>
70+
<Run Text="Offset X: " />
71+
<Run Text="{Binding OffsetX, StringFormat=F1}" FontWeight="SemiBold" />
72+
</TextBlock>
73+
<TextBlock>
74+
<Run Text="Offset Y: " />
75+
<Run Text="{Binding OffsetY, StringFormat=F1}" FontWeight="SemiBold" />
76+
</TextBlock>
77+
<TextBlock>
78+
<Run Text="Stretch: " />
79+
<Run Text="{Binding Stretch}" FontWeight="SemiBold" />
80+
</TextBlock>
81+
</StackPanel>
82+
83+
<Separator Margin="0,8" />
84+
85+
<TextBlock Text="Settings:" FontWeight="SemiBold" />
86+
<StackPanel x:DataType="paz:ZoomBorder" DataContext="{Binding #ZoomBorder}" Spacing="4">
87+
<CheckBox Content="Enable Pan" IsChecked="{Binding EnablePan}" />
88+
<CheckBox Content="Enable Zoom" IsChecked="{Binding EnableZoom}" />
89+
<CheckBox Content="Enable View History" IsChecked="{Binding EnableViewHistory}" />
90+
<CheckBox Content="Enable Animations" IsChecked="{Binding EnableAnimations}" />
91+
</StackPanel>
92+
93+
<Separator Margin="0,8" />
94+
95+
<TextBlock Text="Instructions:" FontWeight="SemiBold" />
96+
<TextBlock TextWrapping="Wrap" FontSize="11">
97+
All buttons above are bound to ZoomBorder commands using MVVM pattern:
98+
Command="{Binding #ZoomBorder.CommandName}".
99+
The buttons will be automatically enabled/disabled based on the command's CanExecute state.
100+
</TextBlock>
101+
<TextBlock TextWrapping="Wrap" FontSize="11" Margin="0,4,0,0">
102+
Try the navigation commands - they require view history to be enabled and will only work after you've made some zoom/pan changes.
103+
</TextBlock>
104+
</StackPanel>
105+
</ScrollViewer>
106+
107+
<!-- ZoomBorder -->
108+
<Border Grid.Column="1" Margin="12" BorderBrush="Gray" BorderThickness="1">
109+
<paz:ZoomBorder x:Name="ZoomBorder"
110+
Stretch="None"
111+
ZoomSpeed="1.2"
112+
Background="SlateBlue"
113+
ClipToBounds="True"
114+
Focusable="True"
115+
EnableViewHistory="True"
116+
EnableAnimations="True">
117+
<Canvas Width="600" Height="400" Background="LightGray">
118+
<TextBlock Canvas.Left="20" Canvas.Top="20"
119+
Text="ZoomBorder Commands Demo"
120+
FontSize="24" FontWeight="Bold" />
121+
122+
<TextBlock Canvas.Left="20" Canvas.Top="60"
123+
Text="Use the command buttons on the left to control this view"
124+
FontSize="14" />
125+
126+
<!-- Sample content to zoom/pan -->
127+
<Rectangle Canvas.Left="50" Canvas.Top="120"
128+
Width="100" Height="100"
129+
Fill="Red" />
130+
<TextBlock Canvas.Left="70" Canvas.Top="230" Text="Red" />
131+
132+
<Rectangle Canvas.Left="180" Canvas.Top="120"
133+
Width="100" Height="100"
134+
Fill="Green" />
135+
<TextBlock Canvas.Left="195" Canvas.Top="230" Text="Green" />
136+
137+
<Rectangle Canvas.Left="310" Canvas.Top="120"
138+
Width="100" Height="100"
139+
Fill="Blue" />
140+
<TextBlock Canvas.Left="330" Canvas.Top="230" Text="Blue" />
141+
142+
<Rectangle Canvas.Left="440" Canvas.Top="120"
143+
Width="100" Height="100"
144+
Fill="Orange" />
145+
<TextBlock Canvas.Left="455" Canvas.Top="230" Text="Orange" />
146+
147+
<!-- Additional shapes -->
148+
<Ellipse Canvas.Left="50" Canvas.Top="280"
149+
Width="80" Height="80"
150+
Fill="Purple" />
151+
<Ellipse Canvas.Left="170" Canvas.Top="280"
152+
Width="80" Height="80"
153+
Fill="Cyan" />
154+
<Ellipse Canvas.Left="290" Canvas.Top="280"
155+
Width="80" Height="80"
156+
Fill="Magenta" />
157+
<Ellipse Canvas.Left="410" Canvas.Top="280"
158+
Width="80" Height="80"
159+
Fill="Yellow" />
160+
161+
<Border Canvas.Left="510" Canvas.Top="280"
162+
Width="60" Height="80"
163+
Background="Black">
164+
<TextBlock Text="Pan &amp; Zoom!"
165+
Foreground="White"
166+
FontSize="10"
167+
TextWrapping="Wrap"
168+
TextAlignment="Center"
169+
VerticalAlignment="Center" />
170+
</Border>
171+
</Canvas>
172+
</paz:ZoomBorder>
173+
</Border>
174+
</Grid>
175+
176+
</UserControl>

‎samples/AvaloniaDemo.Base/Views/CommandsView.axaml.cs‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
using Avalonia.Controls;
2+
3+
namespace AvaloniaDemo.Views;
4+
5+
public partial class CommandsView : UserControl
6+
{
7+
public CommandsView()
8+
{
9+
InitializeComponent();
10+
}
11+
}

‎samples/AvaloniaDemo.Base/Views/ProgrammaticPanView.axaml‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@
1111

1212
<Separator Margin="0,8" />
1313

14-
<TextBlock Text="Pan To Absolute Position:" FontWeight="SemiBold" />
14+
<TextBlock Text="Center On Content Point:" FontWeight="SemiBold" />
1515
<TextBlock Text="X:" FontSize="11" />
16-
<TextBox x:Name="PanToX" Text="100" />
16+
<TextBox x:Name="PanToX" Text="1000" />
1717
<TextBlock Text="Y:" FontSize="11" />
18-
<TextBox x:Name="PanToY" Text="100" />
19-
<Button Content="Pan To Position" Click="PanTo_Click" />
18+
<TextBox x:Name="PanToY" Text="750" />
19+
<Button Content="Center On Point" Click="PanTo_Click" />
2020

2121
<Separator Margin="0,8" />
2222

@@ -51,32 +51,33 @@
5151
ZoomSpeed="1.2"
5252
Background="SlateBlue"
5353
ClipToBounds="True">
54-
<Canvas Width="800" Height="600" Background="LightGray">
55-
<TextBlock Canvas.Left="20" Canvas.Top="20" Text="Programmatic Pan Demo" FontSize="24" FontWeight="Bold" />
54+
<Canvas Width="2000" Height="1500" Background="LightGray">
55+
<TextBlock Canvas.Left="20" Canvas.Top="20" Text="Programmatic Pan Demo (2000x1500 canvas)" FontSize="24" FontWeight="Bold" />
5656

5757
<!-- Grid with coordinates -->
58-
<Rectangle Stroke="Gray" StrokeThickness="1" Width="800" Height="600" Canvas.Left="0" Canvas.Top="0" Fill="Transparent" />
58+
<Rectangle Stroke="Gray" StrokeThickness="1" Width="2000" Height="1500" Canvas.Left="0" Canvas.Top="0" Fill="Transparent" />
5959

60-
<Line StartPoint="0,300" EndPoint="800,300" Stroke="Red" StrokeThickness="1" StrokeDashArray="5,3" />
61-
<Line StartPoint="400,0" EndPoint="400,600" Stroke="Red" StrokeThickness="1" StrokeDashArray="5,3" />
60+
<Line StartPoint="0,750" EndPoint="2000,750" Stroke="Red" StrokeThickness="2" StrokeDashArray="5,3" />
61+
<Line StartPoint="1000,0" EndPoint="1000,1500" Stroke="Red" StrokeThickness="2" StrokeDashArray="5,3" />
6262

6363
<TextBlock Canvas.Left="10" Canvas.Top="10" Text="(0, 0)" FontSize="12" />
64-
<TextBlock Canvas.Left="770" Canvas.Top="10" Text="(800, 0)" FontSize="12" />
65-
<TextBlock Canvas.Left="10" Canvas.Top="570" Text="(0, 600)" FontSize="12" />
66-
<TextBlock Canvas.Left="750" Canvas.Top="570" Text="(800, 600)" FontSize="12" />
64+
<TextBlock Canvas.Left="1950" Canvas.Top="10" Text="(2000, 0)" FontSize="12" />
65+
<TextBlock Canvas.Left="10" Canvas.Top="1470" Text="(0, 1500)" FontSize="12" />
66+
<TextBlock Canvas.Left="1920" Canvas.Top="1470" Text="(2000, 1500)" FontSize="12" />
67+
<TextBlock Canvas.Left="1010" Canvas.Top="755" Text="Center (1000, 750)" FontSize="14" FontWeight="Bold" Foreground="Red" />
6768

68-
<Border Canvas.Left="250" Canvas.Top="200" Width="300" Height="200"
69+
<Border Canvas.Left="800" Canvas.Top="600" Width="400" Height="300"
6970
Background="Orange" BorderBrush="DarkOrange" BorderThickness="2" Padding="15">
7071
<StackPanel Spacing="8">
7172
<TextBlock Text="Pan Methods" FontSize="20" FontWeight="Bold" HorizontalAlignment="Center" />
7273
<TextBlock TextWrapping="Wrap" FontSize="12" HorizontalAlignment="Center">
73-
• Pan(x, y) - Move to absolute position
74+
• CenterOn(point) - Center content point in viewport
7475
</TextBlock>
7576
<TextBlock TextWrapping="Wrap" FontSize="12" HorizontalAlignment="Center">
7677
• PanDelta(dx, dy) - Move by offset
7778
</TextBlock>
7879
<TextBlock TextWrapping="Wrap" FontSize="12" HorizontalAlignment="Center">
79-
• BeginPanTo() / ContinuePanTo() - Incremental pan
80+
Try CenterOn(1000, 750) to center the crosshair!
8081
</TextBlock>
8182
</StackPanel>
8283
</Border>

‎samples/AvaloniaDemo.Base/Views/ProgrammaticPanView.axaml.cs‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
using Avalonia;
12
using Avalonia.Controls;
23
using Avalonia.Interactivity;
34

@@ -15,7 +16,8 @@ private void PanTo_Click(object? sender, RoutedEventArgs e)
1516
{
1617
if (double.TryParse(PanToX.Text, out var x) && double.TryParse(PanToY.Text, out var y))
1718
{
18-
ZoomBorder.Pan(x, y);
19+
// Use CenterOn to center the viewport on the content point
20+
ZoomBorder.CenterOn(new Point(x, y));
1921
}
2022
}
2123

‎samples/AvaloniaDemo.Base/Views/ZoomToRectView.axaml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,11 @@
4848
EnableAnimations="True"
4949
AnimationDuration="0:0:0.5">
5050
<Canvas Width="800" Height="600" Background="LightGray">
51+
<Canvas.Transitions>
52+
<Transitions>
53+
<TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.5" />
54+
</Transitions>
55+
</Canvas.Transitions>
5156
<TextBlock Canvas.Left="20" Canvas.Top="20" Text="Click buttons to zoom to regions" FontSize="20" FontWeight="Bold" />
5257

5358
<Border x:Name="RedRegion" Canvas.Left="50" Canvas.Top="100" Width="200" Height="150"

0 commit comments

Comments
 (0)