feat: ResponsiveView

[eriklimakc]

GitHub Issue (If applicable): #

PR Type

What kind of change does this PR introduce?

What is the current behavior?

What is the new behavior?

PR Checklist

Please check if your PR fulfills the following requirements:

• Tested code with current supported SDKs
• Tested the changes where applicable:
  • UWP
  • WinUI
  • iOS
  • Android
  • WASM
  • MacOS
• Updated the documentation as needed:
  • General Doc Update
  • Controls Doc Update
  • Extensions Doc Update
  • controls-styles.md
  • lightweight-styling.md (LightWeight Styling Resource Keys)
• Runtime Tests and/or UI Tests for the changes have been added (for bug fixes / features) (if applicable)
• Contains NO breaking changes
• Associated with an issue (GitHub or internal)
• Commits must be following the Conventional Commits specification.

Other information

Internal Issue (If applicable):

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://polite-field-01aa64f0f-912.eastus2.azurestaticapps.net

[eriklimakc]

To Discuss:

1. How we handle Template Content

What should be done when, for example, Narrow VisualState is triggered but NarrowContent is null? Should the DefaultContent be displayed instead? What would be the order for other states like Wide/ExtraWide?

uno.toolkit.ui/src/Uno.Toolkit.UI/Controls/ResponsiveView/ResponsiveView.cs

Lines 97 to 114 in 67ff5a4

	switch (visualState)
	{
	case "ExtraNarrowSize":
	contentToSet = ExtraNarrowContent ?? NarrowContent ?? DefaultContent ?? WideContent ?? ExtraWideContent;
	break;
	case "NarrowSize":
	contentToSet = NarrowContent ?? ExtraNarrowContent ?? DefaultContent ?? WideContent ?? ExtraWideContent;
	break;
	case "DefaultSize":
	contentToSet = DefaultContent ?? NarrowContent ?? WideContent ?? ExtraWideContent ?? ExtraNarrowContent;
	break;
	case "WideSize":
	contentToSet = WideContent ?? DefaultContent ?? ExtraWideContent ?? NarrowContent ?? ExtraNarrowContent;
	break;
	case "ExtraWideSize":
	contentToSet = ExtraWideContent ?? WideContent ?? DefaultContent ?? NarrowContent ?? ExtraNarrowContent;
	break;
	}

2. How to make the responsive settings global and overridable?

2.1 What should be the default setting for ExtraNarrow, Narrow, Default, etc... ?

uno.toolkit.ui/src/Uno.Toolkit.UI/Controls/ResponsiveView/ResponsiveView.xaml

Lines 7 to 23 in 67ff5a4

	<ResourceDictionary.ThemeDictionaries>
	<ResourceDictionary x:Key="Default">
	<x:Double x:Key="ResponsiveViewExtraNarrow">150</x:Double>
	<x:Double x:Key="ResponsiveViewNarrow">350</x:Double>
	<x:Double x:Key="ResponsiveViewDefault">800</x:Double>
	<x:Double x:Key="ResponsiveViewWide">1200</x:Double>
	<x:Double x:Key="ResponsiveViewExtraWide">1500</x:Double>
	</ResourceDictionary>
	<ResourceDictionary x:Key="Light">
	<x:Double x:Key="ResponsiveViewExtraNarrow">150</x:Double>
	<x:Double x:Key="ResponsiveViewNarrow">350</x:Double>
	<x:Double x:Key="ResponsiveViewDefault">800</x:Double>
	<x:Double x:Key="ResponsiveViewWide">1200</x:Double>
	<x:Double x:Key="ResponsiveViewExtraWide">1500</x:Double>
	</ResourceDictionary>
	</ResourceDictionary.ThemeDictionaries>

3. Properties naming

Would it make more sense if the we named them, for example, ExtraNarrowTemplate instead of ExtraNarrowContent, or ExtraNarrowTemplateContent?

uno.toolkit.ui/src/Uno.Toolkit.UI/Controls/ResponsiveView/ResponsiveView.cs

Line 14 in 67ff5a4

public DataTemplate ExtraNarrowContent

cc @Xiaoy312 @kazo0

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://polite-field-01aa64f0f-912.eastus2.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://polite-field-01aa64f0f-912.eastus2.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://polite-field-01aa64f0f-912.eastus2.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://polite-field-01aa64f0f-912.eastus2.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://polite-field-01aa64f0f-912.eastus2.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://polite-field-01aa64f0f-912.eastus2.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://polite-field-01aa64f0f-912.eastus2.azurestaticapps.net

[eriklimakc]

@kazo0 and @Xiaoy312 , please note that my latest changes include:

#if WINDOWS || WINDOWS_UWP
	Content = dataTemplate?.LoadContent() as UIElement;
#else
        ContentTemplate = dataTemplate;
#endif

The reason behind this is that using ContentTemplate on non-windows platforms gives us a better experience when resizing the screen, see below:

ContentTemplate

Content

* Using ContentTemplate on Windows doesn't work.

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://polite-field-01aa64f0f-912.eastus2.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://polite-field-01aa64f0f-912.eastus2.azurestaticapps.net

[Xiaoy312]

It shouldnt flicker this much on windows, with the Content. You need to cache the last resolved content-template or winning size, and compare this value on size-changed, and only update when the new ones are different than previous.
do not compare the result of ContentTemplate.Load() that is guaranteed to be different.
edit: and just to make the code simpler, you can drop the #if conditional, and to just cache the resolved content-template (in a separate field) and set the content with .Load() for any target.

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://polite-field-01aa64f0f-912.eastus2.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://polite-field-01aa64f0f-912.eastus2.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://polite-field-01aa64f0f-912.eastus2.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://polite-field-01aa64f0f-912.eastus2.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://polite-field-01aa64f0f-912.eastus2.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://polite-field-01aa64f0f-912.eastus2.azurestaticapps.net