Skip to content

Commit

Permalink
feat: ResponsiveView (#912)
Browse files Browse the repository at this point in the history
  • Loading branch information
@eriklimakc
eriklimakc authored Dec 4, 2023
1 parent 1c53eb1 commit 838a07a
Show file tree
Hide file tree
Showing 9 changed files with 853 additions and 0 deletions.
133 changes: 133 additions & 0 deletions doc/controls/ResponsiveView.md
View file
Original file line number Diff line number Diff line change
@@ -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>
```
2 changes: 2 additions & 0 deletions doc/toc.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 2 additions & 0 deletions samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/App.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
{
Expand Down
165 changes: 165 additions & 0 deletions ...Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/ResponsiveViewSamplePage.xaml
View file
Original file line number Diff line number Diff line change
@@ -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>
18 changes: 18 additions & 0 deletions ...lkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/ResponsiveViewSamplePage.xaml.cs
View file
Original file line number Diff line number Diff line change
@@ -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();
}
}
}
7 changes: 7 additions & 0 deletions samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Uno.Toolkit.Samples.Shared.projitems
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
Loading

0 comments on commit 838a07a

Please sign in to comment.