ResponsiveView

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.

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 breakpoint 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.

Resolution Logics

The layouts whose value(ResponsiveExtension) or template(ResponsiveView) is not provided are first discarded. From the remaining layouts, we look for the first layout whose breakpoint at met by the current screen width. If none are found, the first layout is return regardless of its breakpoint.

Below are the selected layout at different screen width if all layouts are provided:

Width Layout
149 Narrowest
150(Narrowest) Narrowest
151 Narrowest
299 Narrowest
300(Narrow) Narrow
301 Narrow
599 Narrow
600(Normal) Normal
601 Normal
799 Normal
800(Wide) Wide
801 Wide
1079 Wide
1080(Widest) Widest
1081 Widest

Here are the selected layout at different screen width if only Narrow and Wide are provided:

Width Layout
149 Narrow
150(Narrowest) Narrow
151 Narrow
299 Narrow
300(Narrow) Narrow
301 Narrow
599 Narrow
600(Normal) Narrow
601 Narrow
799 Narrow
800(Wide) Wide
801 Wide
1079 Wide
1080(Widest) Wide
1081 Wide

Usage

If you prefer instructional videos, you can follow our tutorials on how to work with ResponsiveView using XAML or C# markup:

Tip

It is not necessary to define every template or layout breakpoint: Narrowest, Narrow, Normal, Wide, Widest. You can just define the bare minimum needed.

xmlns:utu="using:Uno.Toolkit.UI"
...

<utu:ResponsiveView>
    <!-- note:  -->
    <utu:ResponsiveView.NarrowTemplate>
        <DataTemplate>
            <!-- Narrow content -->
        </DataTemplate>
    </utu:ResponsiveView.NarrowTemplate>
    <utu:ResponsiveView.WideTemplate>
        <DataTemplate>
           <!-- Wide content -->
        </DataTemplate>
    </utu:ResponsiveView.WideTemplate>
</utu:ResponsiveView>

Using ResponsiveLayout to customize the screen size breakpoints.

xmlns:utu="using:Uno.Toolkit.UI"
...
<utu:ResponsiveView>
    <utu:ResponsiveView.ResponsiveLayout>
        <utu:ResponsiveLayout>
            <utu:ResponsiveLayout.Narrow>350</utu:ResponsiveLayout.Narrow>
            <utu:ResponsiveLayout.Wide>1200</utu:ResponsiveLayout.Wide>
        </utu:ResponsiveLayout>
    </utu:ResponsiveView.ResponsiveLayout>

    <utu:ResponsiveView.NarrowTemplate>
        <DataTemplate>
            <!-- Narrow content -->
        </DataTemplate>
    </utu:ResponsiveView.NarrowTemplate>
    <utu:ResponsiveView.WideTemplate>
        <DataTemplate>
           <!-- Wide content -->
        </DataTemplate>
    </utu:ResponsiveView.WideTemplate>
</utu:ResponsiveView>
Note

The ResponsiveLayout can also be provided from different locations. In order of precedences, they are:

  • from the .ResponsiveLayout property
  • in ResponsiveView's parent .Resources with x:Key="DefaultResponsiveLayout", or its ancestor's...
  • in Application.Resources with x:Key="DefaultResponsiveLayout"
  • from the hardcoded ResponsiveHelper.DefaultLayout which is defined as [150/300/600/800/1080]