feat: ZoomContentControl as a stand alone control in Toolkit (backport #1249)

doc/controls/ZoomContentControl.md

@@ -0,0 +1,68 @@
+---
+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 a value indicating whether zooming is allowed.                                            |
+| `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.                                           |
+| `IsPanAllowed`     | `bool`      | Gets or sets a value indicating whether panning is allowed.                                            |
+| `IsActive`         | `bool`      | Gets or sets a value indicating whether the control is active.                                         |
+| `AutoFitToCanvas`  | `bool`      | Determines if the content should automatically fit into the available canvas when the control resizes. |
+| `AdditionalMargin` | `Thickness` | Gets or sets additional margins around the content.                                                    |
+
+### Methods
+
+| Method            | Return Type | Description                                                                               |
+| ----------------- | ----------- | ----------------------------------------------------------------------------------------- |
+| `FitToCanvas()`   | `void`      | Adjust the zoom level so that the content fits within the available space.                |
+| `ResetViewport()` | `void`      | Resets the zoom level and panning offset to their default values and centers the content. |

doc/toc.yml

@@ -51,6 +51,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,54 @@
+<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:d="http://schemas.microsoft.com/expression/blend/2008"
+	  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+	  xmlns:sample="using:Uno.Toolkit.Samples"
+	  mc:Ignorable="d"
+	  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+	<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+		<sample:SamplePageLayout x:Name="SamplePageLayout" IsDesignAgnostic="True">
+			<sample:SamplePageLayout.DesignAgnosticTemplate>
+				<DataTemplate>
+					<StackPanel>
+						<utu:ZoomContentControl Grid.Row="1"
+												x:Name="ZoomContent"
+												Width="400"
+												Height="300"
+												HorizontalAlignment="Center"
+												VerticalAlignment="Center"
+												ZoomLevel="1"
+												MinZoomLevel="0.5"
+												MaxZoomLevel="10"
+												IsZoomAllowed="True"
+												IsPanAllowed="True">
+								<Border BorderThickness="2"
+										BorderBrush="White"
+										HorizontalAlignment="Center"
+										Padding="10">
+									<Image Source="ms-appx:///Assets/UnoLogo.png"
+										   Height="101"
+										   Width="75"
+										   HorizontalAlignment="Center" />
+								</Border>
+						</utu:ZoomContentControl>
+
+						<StackPanel Grid.Row="2"
+									Orientation="Horizontal"
+									Spacing="12"
+									HorizontalAlignment="Center"
+									VerticalAlignment="Bottom">
+							<Button x:Name="ZoomInButton" Content="Zoom In" />
+							<Button x:Name="ZoomOutButton" Content="Zoom Out" />
+							<Button x:Name="ResetButton" Content="Reset" />
+						</StackPanel>
+					</StackPanel>
+				</DataTemplate>
+			</sample:SamplePageLayout.DesignAgnosticTemplate>
+		</sample:SamplePageLayout>
+	</Grid>
+
+</Page>

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

@@ -0,0 +1,77 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Uno.Toolkit.Samples.Entities;
+using Uno.Toolkit.UI;
+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
+{
+	private ZoomContentControl zoomControl;
+
+	public ZoomContentControlSamplePage()
+	{
+		this.InitializeComponent();
+		this.Loaded += (s, e) => SetUpOptions();
+	}
+
+	private void SetUpOptions()
+	{
+		zoomControl = SamplePageLayout.GetSampleChild<ZoomContentControl>(Design.Agnostic, "ZoomContent");
+		var zoomInButton = SamplePageLayout.GetSampleChild<Button>(Design.Agnostic, "ZoomInButton");
+		var zoomOutButton = SamplePageLayout.GetSampleChild<Button>(Design.Agnostic, "ZoomOutButton");
+		var resetButton = SamplePageLayout.GetSampleChild<Button>(Design.Agnostic, "ResetButton");
+
+		zoomInButton.Click += OnZoomInClick;
+		zoomOutButton.Click += OnZoomOutClick;
+		resetButton.Click += OnResetClick;
+	}
+
+	private void OnZoomInClick(object sender, RoutedEventArgs e)
+	{
+		if (zoomControl.ZoomLevel < zoomControl.MaxZoomLevel)
+		{
+			zoomControl.ZoomLevel += 0.2;
+		}
+	}
+
+	private void OnZoomOutClick(object sender, RoutedEventArgs e)
+	{
+		if (zoomControl.ZoomLevel > zoomControl.MinZoomLevel)
+		{
+			zoomControl.ZoomLevel -= 0.2;
+		}
+	}
+
+	private void OnResetClick(object sender, RoutedEventArgs e)
+	{
+		zoomControl.ResetViewport();
+	}
+}

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>