OnScreenWidthExtension Class

Implements a XAML extension that allows you to specify control settings depending on the current screen width and screen orientation.

Namespace : DevExpress.Maui.Core

Assembly : DevExpress.Maui.Core.dll

NuGet Package : DevExpress.Maui.Core

Declaration

csharp

public class OnScreenWidthExtension :
    OnScreenSizeExtensionBase

Remarks

You can use the OnScreenWidthExtension to adapt the app layout and control settings when changing screen width. For example, the available screen width changes when you rotate the screen to switch orientation from landscape to portrait or vice versa.

The following example shows how to specify the DXButton‘s width depending on the device screen width:

XAML

xaml

<ContentPage ...
             xmlns:dx="clr-namespace:DevExpress.Maui.Core;assembly=DevExpress.Maui.Core">
    <!--...-->
        <dx:DXButton Content="Click"
                           WidthRequest="{dx:OnScreenWidth ExtraSmall='100', Small='150', Medium='200', Large='250', ExtraLarge='300'}"/>
    <!--...-->
</ContentPage>

The table below describes different size classes and their breakpoints in logical (device-independent) pixels:

Size class	Breakpoints
ExtraSmall	width < 640
Small	width ≥ 640
Medium	width ≥ 732
Large	width ≥ 853
ExtraLarge	width ≥ 1024

The width is calculated as follows: Pixel width / Density.
Refer to the following page for more information: Device display information.

See the following help section for sample devices of each size class: Size Class Classification.

To change the size class breakpoints, use the following properties:

In C# code, you can use the ON.ScreenWidth method to set values depending on the screen width.

Implements

IMarkupExtension\

IMarkupExtension

Inheritance

System.Object DevExpress.Maui.Core.Internal.MarkupExtensionBase
DevExpress.Maui.Core.Internal.DynamicMarkupExtensionBase OnScreenSizeExtensionBase OnScreenWidthExtension

Extension Methods

Yield<OnScreenWidthExtension>()

YieldIfNotNull<OnScreenWidthExtension>()