Create responsive layouts based on Window width breakpoints

UnoFeatures: Toolkit (add to <UnoFeatures> in your .csproj)

Show different content by width

<Page
    xmlns:utu="using:Uno.Toolkit.UI">
    <utu:ResponsiveView>
        <utu:ResponsiveView.NarrowTemplate>
            <DataTemplate>
                <!-- Stack for phones -->
                <StackPanel Spacing="8">
                    <TextBlock Text="Narrow" />
                    <!-- phone-friendly content -->
                </StackPanel>
            </DataTemplate>
        </utu:ResponsiveView.NarrowTemplate>

        <utu:ResponsiveView.WideTemplate>
            <DataTemplate>
                <!-- Grid for tablets/desktop -->
                <Grid ColumnDefinitions="*,*">
                    <TextBlock Text="Wide" Grid.ColumnSpan="2" />
                    <!-- wide layout -->
                </Grid>
            </DataTemplate>
        </utu:ResponsiveView.WideTemplate>
    </utu:ResponsiveView>
</Page>

ResponsiveView picks the first defined template whose breakpoint is met; if none match, it falls back to the largest defined template. (Uno Platform)

Change the breakpoints (per-control)

<Page
    xmlns:utu="using:Uno.Toolkit.UI">
    <utu:ResponsiveView>
        <utu:ResponsiveView.ResponsiveLayout>
            <utu:ResponsiveLayout
                Narrow="360"
                Normal="640"
                Wide="1024"
                Widest="1440" />
        </utu:ResponsiveView.ResponsiveLayout>

        <utu:ResponsiveView.NarrowTemplate>
            <DataTemplate> <!-- ... --> </DataTemplate>
        </utu:ResponsiveView.NarrowTemplate>

        <utu:ResponsiveView.WideTemplate>
            <DataTemplate> <!-- ... --> </DataTemplate>
        </utu:ResponsiveView.WideTemplate>
    </utu:ResponsiveView>
</Page>

ResponsiveLayout lets you override breakpoints for Narrowest, Narrow, Normal, Wide, Widest (defaults: 150, 300, 600, 800, 1080). (Uno Platform)

Set app-wide default breakpoints

<Application
    xmlns:utu="using:Uno.Toolkit.UI">
    <Application.Resources>
        <utu:ResponsiveLayout x:Key="DefaultResponsiveLayout"
                              Narrow="360"
                              Normal="640"
                              Wide="1024"
                              Widest="1440" />
    </Application.Resources>
</Application>

Precedence for where the layout is taken from:

  1. ResponsiveView.ResponsiveLayout
  2. DefaultResponsiveLayout in parent/ancestor resources
  3. DefaultResponsiveLayout in Application.Resources
  4. Built-in default [150/300/600/800/1080]. (Uno Platform)

Use only two templates (phone vs. desktop)

<utu:ResponsiveView>
    <utu:ResponsiveView.NarrowTemplate>
        <DataTemplate> <!-- phone layout --> </DataTemplate>
    </utu:ResponsiveView.NarrowTemplate>

    <utu:ResponsiveView.WideTemplate>
        <DataTemplate> <!-- desktop/tablet layout --> </DataTemplate>
    </utu:ResponsiveView.WideTemplate>
</utu:ResponsiveView>

You don't need to define all five templates. ResponsiveView chooses from what you provide and still resolves correctly. (Uno Platform)

FAQs (quick)

  • What are the default breakpoints? 150, 300, 600, 800, 1080. (Uno Platform)
  • How is the template picked? Discard undefined layouts, pick the first whose breakpoint is met by current width; if none, return the first of remaining (effectively the largest defined). (Uno Platform)
  • Do I need all five templates? No—define the minimum you need. (Uno Platform)
  • Where should I set app-wide breakpoints? Add ResponsiveLayout as DefaultResponsiveLayout in resources (page or app), or set it per control. (Uno Platform)
  • What features do I need? Add Toolkit to <UnoFeatures> (and Material or Cupertino if you use those design system packages). (Uno Platform)

Copy-paste snippets

Minimal XAML

<utu:ResponsiveView xmlns:utu="using:Uno.Toolkit.UI">
    <utu:ResponsiveView.NarrowTemplate>
        <DataTemplate><TextBlock Text="Narrow"/></DataTemplate>
    </utu:ResponsiveView.NarrowTemplate>
    <utu:ResponsiveView.WideTemplate>
        <DataTemplate><TextBlock Text="Wide"/></DataTemplate>
    </utu:ResponsiveView.WideTemplate>
</utu:ResponsiveView>

Customize breakpoints

<utu:ResponsiveView xmlns:utu="using:Uno.Toolkit.UI">
    <utu:ResponsiveView.ResponsiveLayout>
        <utu:ResponsiveLayout Narrow="360" Wide="1024" />
    </utu:ResponsiveView.ResponsiveLayout>
    <!-- templates -->
</utu:ResponsiveView>

Notes for RAG indexers

  • Primary concepts: ResponsiveView, ResponsiveLayout, breakpoints, template selection precedence. (Uno Platform)
  • Related: ResponsiveExtension for property-level responsiveness (pairs well with ResponsiveView when you don't need template swapping). (Uno Platform)

Source page summarized & refactored for outcome-oriented how-tos. (Uno Platform)