Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Specify Device-Specific Settings

  • 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:

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.

<ContentPage ...
             xmlns:dx="clr-namespace:DevExpress.Maui.Core;assembly=DevExpress.Maui.Core">
    <!--...-->
        <dx:DXButton Content="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.

<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'}"
                           HeightRequest="{dx:OnScreenHeight ExtraSmall='50', Small='75', Medium='100', 
                                             Large='150', ExtraLarge='200'}"/>
    <!--...-->
</ContentPage>

Refer to the following help topics for more information:

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

#XAML: Use the OnOrientation Extension

The OnOrientationExtension extension allows you to specify control settings (for example, the paddings) depending on the device orientation.

<ContentPage ...
             xmlns:dx="clr-namespace:DevExpress.Maui.Core;assembly=DevExpress.Maui.Core">
    <!--...-->
        <dx:DXButton Content="Click" Padding="{dx:OnOrientation Portrait='10,6', Landscape='12,8'}"/>
    <!--...-->
</ContentPage>

Note: In C# code, you can use the ON.Orientation method to set values depending on the device orientation.

#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.