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
public class OnScreenWidthExtension :
OnScreenSizeExtensionBaseRemarks
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:
<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.