feat: ZoomContentControl as a stand alone control in Toolkit

doc/controls/ZoomContentControl.md

@@ -0,0 +1,72 @@
+---
+uid: Toolkit.Controls.ZoomContentControl
+---
+
+# ZoomContentControl
+
+> [!TIP]
+> This guide covers details for the `ZoomContentControl`. If you are just getting started with the Uno Toolkit UI Library, please see our [general getting started](../getting-started.md) page to make sure you have the correct setup in place.
+
+## Summary
+
+`ZoomContentControl` allows you to display content that can be zoomed in and out, as well as panned. It is especially useful for scenarios such as viewing large images, maps, or documents where users need control over zoom levels and panning.
+
+### C\#
+
+```csharp
+public partial class ZoomContentControl : Control
+```
+
+### XAML
+
+```xml
+xmlns:utu="using:Uno.Toolkit.UI"
+...
+
+<utu:ZoomContentControl ZoomLevel="1.5"
+                        MinZoomLevel="0.5"
+                        MaxZoomLevel="3.0"
+                        IsZoomAllowed="True"
+                        IsPanAllowed="True">
+    <utu:ZoomContentControl.Content>
+        <Image Source="ms-appx:///Assets/Media/LargeMedia.svg"
+               Stretch="Uniform" />
+    </utu:ZoomContentControl.Content>
+</utu:ZoomContentControl>
+```
+
+### Inheritance
+
+`Object` &#8594; `DependencyObject` &#8594; `UIElement` &#8594; `FrameworkElement` &#8594; `Control` &#8594; `ContentControl` &#8594; `ZoomContentControl`
+
+### Constructors
+
+| Constructor    | Description                                           |
+|----------------|-------------------------------------------------------|
+| `ZoomContentControl()` | Initializes a new instance of the `ZoomContentControl` class. |
+
+### Properties
+
+| Property               | Type                  | Description                                                                                                                                                                                                                                                                                                                                            |
+|------------------------|-----------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `ZoomLevel`          | `double`         | Gets or sets the current zoom level for the content.                                                                                                                                                                                                                                                                                             |
+| `MinZoomLevel`              | `double`              | Gets or sets the minimum zoom level allowed for the content.                                                                                                                                                                                                                   |
+| `MaxZoomLevel`              | `double`   | Gets or sets the maximum zoom level allowed for the content                                                                                                                                     |
+| `isZoomAllowed` | `bool` | Gets or sets the value indicating whether zooming is allowed.                                                                                                                                             |
+| `IsPanAllowed` | `bool` | Gets or sets the value indicating whether panning is allowed.                                                        |
+| `HorizontalOffest`      | `double`                | Gets or sets the horizontal offset for panning.                                                                                                                                                                                                                                                     |
+| `VerticalOffset`              | `double`           | Gets or sets the vertical offset for panning. |
+| `HorizontalZoomCenter`      | `double`                | Gets or sets the horizontal center point of the zooming operation.                                                                                                                                                                                                                                                     |
+| `VerticalZoomCenter`              | `double`           | Gets or sets the vertical center point of the zooming operation. |
+| `ScaleWheelRatio`      | `double`                | Gets or sets the ratio for scaling zoom level when using a mouse wheel.                                                                                                                                                                                                                                                     |
+| `PanWheelRatio`              | `double`           | Gets or sets the ratio for panning when using a mouse wheel. |
+| `ResetWhenNotActive`              | `bool`           | Gets or sets a value indicating whether the zoom and pan should reset when the control is not active. |
+
+### Methods
+
+| Method              | Return Type                         | Description                                                                                                                                                                                                                                                                                                                                              |
+|-----------------------|------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `ResetZoom()`    | `void` | Resets the zoom level to it's default value.                                                                                                                    |
+| `ResetOffset()`    | `void`        | Resets the horizontal and vertical offset to it's default value. |
+| `ZoomToCanvas()`       | `void`                     | Adjust the zoom level so that the content fits within the available space.                                                                                                                                                                                                            |
+| `Centralize()`       | `void`                     | Centers the content within the available space.                                                                                                                                                                                                 |

doc/toc.yml

@@ -48,6 +48,8 @@
       href: controls/ShadowContainer.md
     - name: TabBar and TabBarItem
       href: controls/TabBarAndTabBarItem.md
+    - name: ZoomContentControl
+      href: controls/ZoomContentControl.md
   # ***************** Reference\Helpers *******************
   - name: Helpers
     items:

samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/ZoomContentControlSamplePage.xaml

@@ -0,0 +1,45 @@
+<Page x:Class="Uno.Toolkit.Samples.Content.Controls.ZoomContentControlSamplePage"
+	  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+	  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+	  xmlns:local="using:Uno.Toolkit.Samples.Content.Controls"
+	  xmlns:utu="using:Uno.Toolkit.UI"
+	  xmlns:sample="using:Uno.Toolkit.Samples"
+	  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+	  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+	  mc:Ignorable="d"
+	  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+	<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+		<StackPanel Padding="0,20" Spacing="20">
+			<TextBlock Text="ZoomContentControl Sample"
+								   Style="{StaticResource TitleLarge}" />
+
+			<utu:ZoomContentControl x:Name="ZoomContent"
+												Width="400"
+												Height="300"
+												HorizontalAlignment="Center"
+												VerticalAlignment="Center"
+												ZoomLevel="1.5"
+												MinZoomLevel="0.5"
+												MaxZoomLevel="3.0"
+												IsZoomAllowed="True"
+												IsPanAllowed="True">
+							<utu:ZoomContentControl.Content>
+								<Image Source="ms-appx:///Assets/Media/LargeMedia.svg"
+									   Stretch="Uniform" />
+							</utu:ZoomContentControl.Content>
+						</utu:ZoomContentControl>
+
+			<StackPanel Orientation="Horizontal" Spacing="12" HorizontalAlignment="Center">
+							<Button Content="Zoom In"
+									Click="OnZoomInClick" />
+							<Button Content="Zoom Out"
+									Click="OnZoomOutClick" />
+							<Button Content="Reset"
+									Click="OnResetClick" />
+						</StackPanel>
+		</StackPanel>
+
+	</Grid>
+</Page>

samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/ZoomContentControlSamplePage.xaml.cs

@@ -0,0 +1,62 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Uno.Toolkit.Samples.Entities;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+
+#if IS_WINUI
+using Microsoft.UI;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Controls.Primitives;
+using Microsoft.UI.Xaml.Data;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+using Microsoft.UI.Xaml.Navigation;
+#else
+using Windows.UI;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Controls.Primitives;
+using Windows.UI.Xaml.Data;
+using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Media;
+using Windows.UI.Xaml.Navigation;
+#endif
+
+
+namespace Uno.Toolkit.Samples.Content.Controls
+{
+	[SamplePage(SampleCategory.Controls, "ZoomContentControl")]
+	public sealed partial class ZoomContentControlSamplePage : Page
+	{
+		public ZoomContentControlSamplePage()
+		{
+			this.InitializeComponent();
+		}
+
+		private void OnZoomInClick(object sender, RoutedEventArgs e)
+		{
+			if (ZoomContent.ZoomLevel < ZoomContent.MaxZoomLevel)
+			{
+				ZoomContent.ZoomLevel += 0.2;
+			}
+		}
+
+		private void OnZoomOutClick(object sender, RoutedEventArgs e)
+		{
+			if (ZoomContent.ZoomLevel > ZoomContent.MinZoomLevel)
+			{
+				ZoomContent.ZoomLevel -= 0.2;
+			}
+		}
+
+		private void OnResetClick(object sender, RoutedEventArgs e)
+		{
+			ZoomContent.ResetZoom();
+		}
+	}
+}

samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Uno.Toolkit.Samples.Shared.projitems

@@ -74,6 +74,9 @@
     <Compile Include="$(MSBuildThisFileDirectory)Content\Controls\VisualStateManagerExtensionsSamplePage.xaml.cs">
       <DependentUpon>VisualStateManagerExtensionsSamplePage.xaml</DependentUpon>
     </Compile>
+    <Compile Include="$(MSBuildThisFileDirectory)Content\Controls\ZoomContentControlSamplePage.xaml.cs">
+      <DependentUpon>ZoomContentControlSamplePage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="$(MSBuildThisFileDirectory)Content\Helpers\BindingExtensionsSamplePage.xaml.cs">
       <DependentUpon>BindingExtensionsSamplePage.xaml</DependentUpon>
     </Compile>
@@ -317,6 +320,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="$(MSBuildThisFileDirectory)Content\Controls\ZoomContentControlSamplePage.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="$(MSBuildThisFileDirectory)Content\Helpers\BindingExtensionsSamplePage.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -583,4 +590,4 @@
     <Content Include="$(MSBuildThisFileDirectory)Assets\Media\SmallMedia.scale-400.png" />
     <Content Include="$(MSBuildThisFileDirectory)Assets\UnoLogo.png" />
   </ItemGroup>
-</Project>
+</Project>

src/Uno.Toolkit.UI/Controls/ZoomContentControl/ZoomContentControl.xaml

@@ -0,0 +1,81 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+					xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+					xmlns:ctl="using:Uno.Toolkit.UI">
+
+	<Style x:Key="DefaultZoomContentControlStyle"
+		   TargetType="ctl:ZoomContentControl">
+		<Setter Property="Template">
+			<Setter.Value>
+				<ControlTemplate TargetType="ctl:ZoomContentControl">
+					<Grid x:Name="PART_RootGrid"
+						  Background="Transparent">
+						<Grid.RowDefinitions>
+							<RowDefinition Height="*" />
+							<RowDefinition Height="Auto" />
+						</Grid.RowDefinitions>
+						<Grid.ColumnDefinitions>
+							<ColumnDefinition Width="*" />
+							<ColumnDefinition Width="Auto" />
+						</Grid.ColumnDefinitions>
+						<Canvas x:Name="PART_Canvas">
+							<ContentPresenter x:Name="PART_Presenter"
+											  Grid.Row="0"
+											  Grid.Column="0"
+											  Margin="0"
+											  Padding="0"
+											  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+											  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+											  Content="{TemplateBinding Content}"
+											  ContentTemplate="{TemplateBinding ContentTemplate}">
+								<ContentPresenter.RenderTransform>
+									<TransformGroup>
+										<ScaleTransform CenterX="{TemplateBinding HorizontalZoomCenter}"
+														CenterY="{TemplateBinding VerticalZoomCenter}"
+														ScaleX="{TemplateBinding ZoomLevel}"
+														ScaleY="{TemplateBinding ZoomLevel}" />
+										<TranslateTransform X="{TemplateBinding HorizontalOffset}"
+															Y="{TemplateBinding VerticalOffset}" />
+									</TransformGroup>
+								</ContentPresenter.RenderTransform>
+							</ContentPresenter>
+						</Canvas>
+						<!-- Vertical ScrollBar -->
+						<ScrollBar x:Name="PART_ScrollV"
+								   Grid.Row="0"
+								   Grid.Column="1"
+								   HorizontalAlignment="Right"
+								   VerticalAlignment="Stretch"
+								   IndicatorMode="MouseIndicator"
+								   LargeChange="10"
+								   Maximum="{TemplateBinding VerticalMaxScroll}"
+								   Minimum="{TemplateBinding VerticalMinScroll}"
+								   Orientation="Vertical"
+								   SmallChange="1"
+								   Visibility="{TemplateBinding IsVerticalScrollBarVisible}"
+								   ViewportSize="{TemplateBinding ViewPortHeight}"
+								   Value="{TemplateBinding VerticalScrollValue}" />
+						<!-- Horizontal ScrollBar -->
+						<ScrollBar x:Name="PART_ScrollH"
+								   Grid.Row="1"
+								   Grid.Column="0"
+								   HorizontalAlignment="Stretch"
+								   VerticalAlignment="Bottom"
+								   IndicatorMode="MouseIndicator"
+								   LargeChange="10"
+								   Maximum="{TemplateBinding HorizontalMaxScroll}"
+								   Minimum="{TemplateBinding HorizontalMinScroll}"
+								   Orientation="Horizontal"
+								   SmallChange="1"
+								   Visibility="{TemplateBinding IsHorizontalScrollBarVisible}"
+								   ViewportSize="{TemplateBinding ViewPortWidth}"
+								   Value="{TemplateBinding HorizontalScrollValue}" />
+					</Grid>
+				</ControlTemplate>
+			</Setter.Value>
+		</Setter>
+	</Style>
+
+	<Style BasedOn="{StaticResource DefaultZoomContentControlStyle}"
+		   TargetType="ctl:ZoomContentControl" />
+
+</ResourceDictionary>