Specify Device-Specific Settings

• Mar 17, 2023
• 3 minutes to read

DevExpress component suite for MAUI offers two ways to identify device parameters (OS type, orientation, form factor, and device type - physical or simulator):

• Use members of the ON helper class in code-behind.
• Use multiple specially-designed extensions in XAML.

Code-Behind: Use the ON Class

The ON class members allow you to identify device parameters: operating system type, orientation, form factor (idiom), and device type (physical device or simulator). For example, the following code shows how to perform platform-specific actions:

C#

using DevExpress.Maui.Core;
//...

    if (ON.Android) {
        // Your custom code here.
    }

    if (ON.iOS) {
        // Your custom code here.
    }

For more information, refer to the following help topic: ON Class.

XAML: Use the OnDisplaySize Extension

The OnDisplaySize extension allows you to specify control settings (for example, the font size) depending on the physical screen size, regardless of the screen orientation.

XAML

<ContentPage ...
             xmlns:dxdc="clr-namespace:DevExpress.Maui.Controls;assembly=DevExpress.Maui.Controls"
             xmlns:dx="clr-namespace:DevExpress.Maui.Core;assembly=DevExpress.Maui.Core">
    <!--...-->
        <dxdc:SimpleButton Text="Click"
                           FontSize="{dx:OnDisplaySize ExtraSmall='10', Small='12', Medium='14', 
                                         Large='16', ExtraLarge='18'}"/>
    <!--...-->
</ContentPage>

Refer to the following help topic for more information: OnDisplaySizeExtension.

Note: In C# code, you can use the ON.DisplaySize method to set values depending on the screen size.

XAML: Use the OnScreenWidth and OnScreenHeight Extensions

The OnScreenWidth and OnScreenHeight extensions allow you to specify control settings based on the current screen width or height depending on the screen orientation.

XAML

<ContentPage ...
             xmlns:dxdc="clr-namespace:DevExpress.Maui.Controls;assembly=DevExpress.Maui.Controls"
             xmlns:dx="clr-namespace:DevExpress.Maui.Core;assembly=DevExpress.Maui.Core">
    <!--...-->
        <dxdc:SimpleButton Text="Click"
                           WidthRequest="{dx:OnScreenWidth ExtraSmall='100', Small='150', Medium='200', 
                                             Large='250', ExtraLarge='300'}"
                           HeightRequest="{dx:OnScreenHeight ExtraSmall='50', Small='75', Medium='100', 
                                             Large='150', ExtraLarge='200'}"/>
    <!--...-->
</ContentPage>

Refer to the following help topics for more information:

• OnScreenWidthExtension
• OnScreenHeightExtension

Note: In C# code, you can use the ON.ScreenWidth and ON.ScreenHeight methods to set values depending on the screen width or height.

Size Class Classification

The following table describes different size classes:

Size class	Breakpoints	Sample Devices	Device Logical Resolution
ExtraSmall	height < 360, width < 640	–	–
Small	height ≥ 360, width ≥ 640	iPhone SE 3rd gen, SE 2nd gen, 8, 7, 6, 6s	375 x 667
		Samsung Galaxy Note 9, S9+, S9, S8+, S8	360 x 740
		Samsung Galaxy S7 Edge, S7	360 x 640
Medium	height ≥ 375, width ≥ 732	iPhone 14 Pro	393 x 852
		iPhone 14, 13, 13 Pro, 12, 12 Pro	390 x 844
		iPhone 13 mini, 12 mini, 11 Pro, XS, X	375 x 812
		iPhone 11 Pro Max, 11, XR, XS Max	414 x 896
		iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus	414 x 736
		Samsung Galaxy Note 10+, 10, Google Pixel 4 XL, 4	412 x 869
		Google Pixel 3a XL, 3	412 x 824
		Google Pixel 3a	412 x 846
		Google Pixel 3 XL	412 x 847
		Nexus 6P, 5X, Google Pixel 2 XL, XL, Pixel	412 x 732
Large	height ≥ 428, width ≥ 853	iPhone 14 Pro Max	430 x 932
		iPhone 14 Plus, 13 Pro Max, 12 Pro Max	428 x 926
		Samsung Galaxy S20 Ultra, S20+, S20	480 x 1067
		Samsung Galaxy Note 5, LG G5, One Plus 3	480 x 853
Extra Large	height ≥ 768, width ≥ 1024	iPad	768 x 1024
		Samsung Galaxy Tab 10	800 x 1280
		Pixel C	900 x 1280
		Nexus 9	1536 x 2048

The height is calculated as follows: Pixel height / Density.
The width is calculated as follows: Pixel width / Density.

Refer to the following page for more information: Device display information.