-
Notifications
You must be signed in to change notification settings - Fork 27
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1249 from unoplatform/dev/vs/zoom-content-control
- Loading branch information
Showing
10 changed files
with
1,306 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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` → `DependencyObject` → `UIElement` → `FrameworkElement` → `Control` → `ContentControl` → `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. | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
54 changes: 54 additions & 0 deletions
54
...kit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/ZoomContentControlSamplePage.xaml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
77 changes: 77 additions & 0 deletions
77
....Samples/Uno.Toolkit.Samples.Shared/Content/Controls/ZoomContentControlSamplePage.xaml.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.