feat: ResponsiveView

doc/controls/ResponsiveView.md

@@ -0,0 +1,133 @@
+---
+uid: Toolkit.Controls.ResponsiveView
+---
+# ResponsiveView
+
+## Summary
+
+The `ResponsiveView` provides the ability to display different content based on screen size, making it easy to adapt to various devices.
+
+## Remarks
+
+The ResponsiveView Control adapts to different screen sizes by dynamically choosing the right template. It looks at the current screen width and the defined templates. Since not all templates need a value, the control ensures a smooth user experience by picking the smallest defined template that satisfies the width requirements. If no match is found, it defaults to the largest defined template.
+
+**Initialization**: The `ResponsiveHelper` needs to be hooked up to the window's `SizeChanged` event in order for it to receive updates when the window size changes.
+This is typically done in the `OnLaunched` method in the `App` class, where you can get the current window and call the `HookupEvent` method on the `ResponsiveHelper`.
+
+Here is an example of how this might be achieved:
+
+```cs
+protected override void OnLaunched(LaunchActivatedEventArgs args)
+{
+#if NET6_0_OR_GREATER && WINDOWS && !HAS_UNO
+	MainWindow = new Window();
+#else
+	MainWindow = Microsoft.UI.Xaml.Window.Current;
+#endif
+	// ...
+	var helper = Uno.Toolkit.UI.ResponsiveHelper.GetForCurrentView();
+	helper.HookupEvent(MainWindow);
+}
+```
+
+## Inheritance 
+Object → DependencyObject → UIElement → FrameworkElement → Control → ContentControl
+
+## Properties
+| Property          | Type             | Description                                             |
+| ----------------- | ---------------- | ------------------------------------------------------- |
+| NarrowestTemplate | DataTemplate     | Template to be displayed on the narrowest screen size.  |
+| NarrowTemplate    | DataTemplate     | Template to be displayed on a narrow screen size.       |
+| NormalTemplate    | DataTemplate     | Template to be displayed on a normal screen size.       |
+| WideTemplate      | DataTemplate     | Template to be displayed on a wide screen size.         |
+| WidestTemplate    | DataTemplate     | Template to be displayed on the widest screen size.     |
+| ResponsiveLayout  | ResponsiveLayout | Overrides the screen size threshold/breakpoints.        |
+
+### ResponsiveLayout
+Provides the ability to override the MaxWidth for each screen size: `Narrowest`, `Narrow`, `Normal`, `Wide`, and `Widest`.
+
+### Properties
+| Property   | Type   | Description            |
+| ---------- | ------ | ---------------------- |
+| Narrowest  | double | Default value is 150.  |
+| Narrow     | double | Default value is 300.  |
+| Normal     | double | Default value is 600.  |
+| Wide       | double | Default value is 800.  |
+| Widest     | double | Default value is 1080. |
+
+## Usage
+
+```xml
+xmlns:utu="using:Uno.Toolkit.UI"
+...
+<utu:ResponsiveView>
+    <utu:ResponsiveView.NarrowestTemplate>
+        <DataTemplate>
+            <!-- Narrowest content -->
+        </DataTemplate>
+    </utu:ResponsiveView.NarrowestTemplate>
+    <utu:ResponsiveView.NarrowTemplate>
+        <DataTemplate>
+            <!-- Narrow content -->
+        </DataTemplate>
+    </utu:ResponsiveView.NarrowTemplate>
+    <utu:ResponsiveView.NormalTemplate>
+        <DataTemplate>
+            <!-- Normal content -->
+        </DataTemplate>
+    </utu:ResponsiveView.NormalTemplate>
+    <utu:ResponsiveView.WideTemplate>
+        <DataTemplate>
+           <!-- Wide content -->
+        </DataTemplate>
+    </utu:ResponsiveView.WideTemplate>
+    <utu:ResponsiveView.WidestTemplate>
+        <DataTemplate>
+           <!-- Widest content -->
+        </DataTemplate>
+    </utu:ResponsiveView.WidestTemplate>
+</utu:ResponsiveView>
+```
+
+Using `ResponsiveLayout` to customize the screen size breakpoints.
+
+```xml
+xmlns:utu="using:Uno.Toolkit.UI"
+...
+<utu:ResponsiveView>
+    <utu:ResponsiveView.ResponsiveLayout>
+        <utu:ResponsiveLayout>
+            <utu:ResponsiveLayout.Narrowest>200</utu:ResponsiveLayout.Narrowest>
+            <utu:ResponsiveLayout.Narrow>350</utu:ResponsiveLayout.Narrow>
+            <utu:ResponsiveLayout.Normal>800</utu:ResponsiveLayout.Normal>
+            <utu:ResponsiveLayout.Wide>1200</utu:ResponsiveLayout.Wide>
+            <utu:ResponsiveLayout.Widest>1500</utu:ResponsiveLayout.Widest>
+        </utu:ResponsiveLayout>
+    </utu:ResponsiveView.ResponsiveLayout>
+    <utu:ResponsiveView.NarrowestTemplate>
+        <DataTemplate>
+            <!-- Narrowest content -->
+        </DataTemplate>
+    </utu:ResponsiveView.NarrowestTemplate>
+    <utu:ResponsiveView.NarrowTemplate>
+        <DataTemplate>
+            <!-- Narrow content -->
+        </DataTemplate>
+    </utu:ResponsiveView.NarrowTemplate>
+    <utu:ResponsiveView.NormalTemplate>
+        <DataTemplate>
+            <!-- Normal content -->
+        </DataTemplate>
+    </utu:ResponsiveView.NormalTemplate>
+    <utu:ResponsiveView.WideTemplate>
+        <DataTemplate>
+           <!-- Wide content -->
+        </DataTemplate>
+    </utu:ResponsiveView.WideTemplate>
+    <utu:ResponsiveView.WidestTemplate>
+        <DataTemplate>
+           <!-- Widest content -->
+        </DataTemplate>
+    </utu:ResponsiveView.WidestTemplate>
+</utu:ResponsiveView>
+```

doc/toc.yml

@@ -38,6 +38,8 @@
       href: controls/LoadingView.md
     - name: NavigationBar
       href: controls/NavigationBar.md
+    - name: ResponsiveView
+      href: controls/ResponsiveView.md
     - name: SafeArea
       href: controls/SafeArea.md
     - name: ShadowContainer

samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/App.xaml.cs

@@ -98,6 +98,8 @@ protected override async void OnLaunched(XamlLaunchActivatedEventArgs e)
 #else
 			_window = XamlWindow.Current;
 #endif
+			var helper = ResponsiveHelper.GetForCurrentView();
+			helper.HookupEvent(_window);
 
 			if (_window.Content is null)
 			{

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

@@ -0,0 +1,165 @@
+<Page x:Class="Uno.Toolkit.Samples.Content.Controls.ResponsiveViewSamplePage"
+	  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:d="http://schemas.microsoft.com/expression/blend/2008"
+	  xmlns:utu="using:Uno.Toolkit.UI"
+	  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>
+						<StackPanel.Resources>
+							<Color x:Key="UnoGreen">#67E5AD</Color>
+							<Color x:Key="UnoPurple">#7A67F8</Color>
+							<Color x:Key="UnoRed">#F85977</Color>
+							<Color x:Key="UnoBlue">#159BFF</Color>
+						</StackPanel.Resources>
+						<utu:ResponsiveView>
+							<utu:ResponsiveView.ResponsiveLayout>
+								<utu:ResponsiveLayout>
+									<utu:ResponsiveLayout.Narrowest>200</utu:ResponsiveLayout.Narrowest>
+									<utu:ResponsiveLayout.Narrow>350</utu:ResponsiveLayout.Narrow>
+									<utu:ResponsiveLayout.Normal>800</utu:ResponsiveLayout.Normal>
+									<utu:ResponsiveLayout.Wide>1200</utu:ResponsiveLayout.Wide>
+									<utu:ResponsiveLayout.Widest>1500</utu:ResponsiveLayout.Widest>
+								</utu:ResponsiveLayout>
+							</utu:ResponsiveView.ResponsiveLayout>
+							<utu:ResponsiveView.NarrowestTemplate>
+								<DataTemplate>
+									<StackPanel Spacing="16">
+										<TextBlock Text="Extra Narrow"
+												   HorizontalAlignment="Center"
+												   Style="{StaticResource DisplaySmall}" />
+										<StackPanel Orientation="Vertical"
+													HorizontalAlignment="Center"
+													Spacing="20">
+											<Rectangle Height="100"
+													   Width="100"
+													   Fill="{StaticResource UnoGreen}" />
+											<Ellipse Height="100"
+													   Width="100"
+													   Fill="{StaticResource UnoPurple}" />
+											<Rectangle Height="100"
+													   Width="100"
+													   Fill="{StaticResource UnoRed}" />
+											<Ellipse Height="100"
+													   Width="100"
+													   Fill="{StaticResource UnoBlue}" />
+
+										</StackPanel>
+									</StackPanel>
+								</DataTemplate>
+							</utu:ResponsiveView.NarrowestTemplate>
+							<utu:ResponsiveView.NarrowTemplate>
+								<DataTemplate>
+									<StackPanel Spacing="16">
+										<TextBlock Text="Narrow"
+												   HorizontalAlignment="Center"
+												   Style="{StaticResource DisplaySmall}" />
+										<StackPanel Orientation="Vertical"
+													HorizontalAlignment="Center"
+													Spacing="20">
+											<Rectangle Height="150"
+													   Width="150"
+													   Fill="{StaticResource UnoGreen}" />
+											<Ellipse Height="150"
+													   Width="150"
+													   Fill="{StaticResource UnoPurple}" />
+											<Rectangle Height="150"
+													   Width="150"
+													   Fill="{StaticResource UnoRed}" />
+											<Ellipse Height="150"
+													   Width="150"
+													   Fill="{StaticResource UnoBlue}" />
+										</StackPanel>
+									</StackPanel>
+								</DataTemplate>
+							</utu:ResponsiveView.NarrowTemplate>
+							<utu:ResponsiveView.NormalTemplate>
+								<DataTemplate>
+									<StackPanel Spacing="16">
+										<TextBlock Text="Default"
+												   HorizontalAlignment="Center"
+												   Style="{StaticResource DisplayMedium}" />
+										<StackPanel Orientation="Vertical"
+													HorizontalAlignment="Center"
+													Spacing="20">
+											<Rectangle Height="200"
+													   Width="200"
+													   Fill="{StaticResource UnoGreen}" />
+											<Ellipse Height="200"
+													   Width="200"
+													   Fill="{StaticResource UnoPurple}" />
+											<Rectangle Height="200"
+													   Width="200"
+													   Fill="{StaticResource UnoRed}" />
+											<Ellipse Height="200"
+													   Width="200"
+													   Fill="{StaticResource UnoBlue}" />
+										</StackPanel>
+									</StackPanel>
+								</DataTemplate>
+							</utu:ResponsiveView.NormalTemplate>
+							<utu:ResponsiveView.WideTemplate>
+								<DataTemplate>
+									<StackPanel Spacing="16">
+										<TextBlock Text="Wide"
+												   HorizontalAlignment="Center"
+												   Style="{StaticResource DisplayLarge}" />
+										<StackPanel Orientation="Horizontal"
+													HorizontalAlignment="Center"
+													Spacing="20">
+											<Rectangle Height="250"
+													   Width="250"
+													   Fill="{StaticResource UnoGreen}" />
+											<Ellipse Height="250"
+													   Width="250"
+													   Fill="{StaticResource UnoPurple}" />
+											<Rectangle Height="250"
+													   Width="250"
+													   Fill="{StaticResource UnoRed}" />
+											<Ellipse Height="250"
+													   Width="250"
+													   Fill="{StaticResource UnoBlue}" />
+										</StackPanel>
+									</StackPanel>
+								</DataTemplate>
+							</utu:ResponsiveView.WideTemplate>
+							<utu:ResponsiveView.WidestTemplate>
+								<DataTemplate>
+									<StackPanel Spacing="16">
+										<TextBlock Text="Extra Wide"
+												   HorizontalAlignment="Center"
+												   Style="{StaticResource DisplayLarge}" />
+										<StackPanel Orientation="Horizontal"
+													HorizontalAlignment="Center"
+													Spacing="20">
+											<Rectangle Height="300"
+													   Width="300"
+													   Fill="{StaticResource UnoGreen}" />
+											<Ellipse Height="300"
+													   Width="300"
+													   Fill="{StaticResource UnoPurple}" />
+											<Rectangle Height="300"
+													   Width="300"
+													   Fill="{StaticResource UnoRed}" />
+											<Ellipse Height="300"
+													   Width="300"
+													   Fill="{StaticResource UnoBlue}" />
+										</StackPanel>
+									</StackPanel>
+								</DataTemplate>
+							</utu:ResponsiveView.WidestTemplate>
+						</utu:ResponsiveView>
+					</StackPanel>
+				</DataTemplate>
+			</sample:SamplePageLayout.DesignAgnosticTemplate>
+		</sample:SamplePageLayout>
+	</Grid>
+</Page>

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

@@ -0,0 +1,18 @@
+using Uno.Toolkit.Samples.Entities;
+#if IS_WINUI
+using Microsoft.UI.Xaml.Controls;
+#else
+using Windows.UI.Xaml.Controls;
+#endif
+
+namespace Uno.Toolkit.Samples.Content.Controls
+{
+	[SamplePage(SampleCategory.Controls, "ResponsiveView")]
+	public sealed partial class ResponsiveViewSamplePage : Page
+	{
+		public ResponsiveViewSamplePage()
+		{
+			this.InitializeComponent();
+		}
+	}
+}

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

@@ -25,6 +25,9 @@
     <Compile Include="$(MSBuildThisFileDirectory)Content\Controls\AutoLayoutPage.xaml.cs">
       <DependentUpon>AutoLayoutPage.xaml</DependentUpon>
     </Compile>
+    <Compile Include="$(MSBuildThisFileDirectory)Content\Controls\ResponsiveViewSamplePage.xaml.cs">
+      <DependentUpon>ResponsiveViewSamplePage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="$(MSBuildThisFileDirectory)Content\Controls\CardSamplePage.xaml.cs">
       <DependentUpon>CardSamplePage.xaml</DependentUpon>
     </Compile>
@@ -221,6 +224,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="$(MSBuildThisFileDirectory)Content\Controls\ResponsiveViewSamplePage.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="$(MSBuildThisFileDirectory)Content\Controls\CardSamplePage.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>