Viewport informations

The Viewport object describes the area available to render the user interface, that is the inner area of the window displaying the application.

Accessing the viewport

Where	How
C# code (computeds, expressions, rules, menu item code)	`Window.Current.Viewport`
UI view and UI component templates	`@Viewport`

Size

The Width and Height properties give the current size of the viewport in pixels.

return Window.Current.Viewport.Width;

Responsive breakpoints

The CurrentBreakpoint property returns a value of the ResponsiveBreakpoint enum. A breakpoint is defined by a minimum width, and the current breakpoint is the largest one whose minimum width is reached. Below the first one, the current breakpoint is Base.

Breakpoint	Default minimum width
`Base`	(none)
`Small`	40rem (640px)
`Medium`	48rem (768px)
`Large`	64rem (1024px)
`ExtraLarge`	80rem (1280px)
`ExtraExtraLarge`	96rem (1536px)

These minimum widths are the default ones. They are part of the theme, so an application using a custom theme can define its own values, and all the properties described below follow them automatically.

Comparing the width to a breakpoint

Rather than testing the current breakpoint for equality, compare the width to a breakpoint. An equality test only matches one single range of widths, so it silently becomes false as soon as the window grows or shrinks to the next range, which is rarely the intended behavior.

Two families of properties are available:

IsWidthAtLeast... is true when the width has reached the breakpoint. Use it for a mobile-first logic, where the layout is designed for the smallest viewport and enriched on the larger ones.
IsWidthBelow... is true when the width has not reached the breakpoint. Use it for a desktop-first logic, where the layout is designed for a large viewport and simplified on the smaller ones.

Each family exists for every breakpoint: IsWidthAtLeastSmall, IsWidthAtLeastMedium, IsWidthAtLeastLarge, IsWidthAtLeastExtraLarge, IsWidthAtLeastExtraExtraLarge, and the matching IsWidthBelowSmall, IsWidthBelowMedium, and so on. The two families are complementary: for a given breakpoint, exactly one of them is true.

In C# code, the IsWidthAtLeast and IsWidthBelow methods do the same comparison with the breakpoint passed as an argument, which is useful when the breakpoint itself comes from a variable.

return Window.Current.Viewport.IsWidthAtLeast(SystemEnvironment.ResponsiveBreakpoint.Medium);

Using the viewport in a template

In a UI view or UI component template, the viewport properties are bound directly with @Viewport, without declaring a computed:

<if condition="@Viewport.IsWidthBelowMedium">
    <text>This is displayed only on a narrow viewport</text>
</if>
<else>
    <text>This is displayed from a medium viewport upwards</text>
</else>

Only properties can be bound this way. The IsWidthAtLeast and IsWidthBelow methods take an argument and therefore cannot be called from a template: when the comparison cannot be expressed with one of the properties, put it in a computed and bind the computed.

Using the viewport outside of a template

The same properties are available everywhere C# code is transpiled to the front end, for instance to control the visibility of a menu item:

return Window.Current.Viewport.IsWidthAtLeastLarge;

Note

The viewport properties are reactive, so the user interface is automatically updated when the window is resized and when a breakpoint is crossed.

Table of Contents