c# - Control Not Visible on Smaller Screens or High-Scale Displays in MAUI

I have a custom control in my .NET MAUI application that is not visible under the following conditions:

The screen size is less than 15.6 inches
The resolution is lower than 1920 x 1080
The display scale is greater than 125% The control works perfectly on larger screens with high resolutions and default scaling. However, on smaller screens or high DPI settings, it either disappears or doesn't render properly.

Has anyone faced similar issues? How can I ensure the control remains visible and adapts properly to different screen sizes, resolutions, and scaling settings?

I have used asterisk (*) to indicate sizes, but the issue remains unresolved.

Code:

<Grid ColumnDefinitions="6.5*, 3.5*" ColumnSpacing="5">
    <Grid.RowDefinitions>
        <RowDefinition Height="0.1*" />
        <RowDefinition Height="0.9*" />
    </Grid.RowDefinitions>
    <Grid Grid.Column="0" BackgroundColor="LightBlue">
        <FlexLayout
            AlignContent="Stretch"
            AlignItems="Stretch"
            JustifyContent="Center"
            Wrap="NoWrap">
            <RadioButton Content="This Week" FlexLayout.Shrink="2" />
            <RadioButton Content="Coming Week" />
            <RadioButton Content="Custom Week" />
            <Entry Placeholder="week" />
            <Label Text="To" VerticalOptions="Center" />
            <Entry Placeholder="week" />
            <Label Text="/" VerticalOptions="Center" />
            <DatePicker Format="ddd dd MMM yyyy" />
            <Label Text="To" VerticalOptions="Center" />
            <DatePicker Format="ddd dd MMM yyyy" />
            <Button Text="Apply" />
        </FlexLayout>
    </Grid>

    <Grid Grid.Column="1" BackgroundColor="GreenYellow">
        <HorizontalStackLayout Spacing="5">
            <Button Text="&lt;" />
            <HorizontalStackLayout BackgroundColor="Brown">
                <Border
                    HeightRequest="40"
                    HorizontalOptions="Center"
                    Stroke="Yellow"
                    StrokeShape="RoundRectangle 20"
                    StrokeThickness="2"
                    VerticalOptions="Center"
                    WidthRequest="40">
                    <Label HorizontalOptions="Center" VerticalOptions="Center">
                        <Label.FormattedText>
                            <FormattedString>
                                <Span Text="W" TextColor="LightYellow" />
                                <Span Text="1" TextColor="YellowGreen" />
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                </Border>
                <Label
                    HorizontalOptions="Center"
                    Text="..."
                    VerticalOptions="Center" />
                <Border
                    BackgroundColor="Black"
                    HeightRequest="40"
                    HorizontalOptions="Center"
                    Stroke="Yellow"
                    StrokeShape="RoundRectangle 20"
                    StrokeThickness="2"
                    VerticalOptions="Center"
                    WidthRequest="40">
                    <Label
                        HorizontalOptions="Center"
                        TextColor="Yellow"
                        VerticalOptions="Center">
                        <Label.FormattedText>
                            <FormattedString>
                                <Span Text="W" TextColor="YellowGreen" />
                                <Span Text="4" TextColor="YellowGreen" />
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                </Border>
                <Label
                    HorizontalOptions="Center"
                    Text="..."
                    VerticalOptions="Center" />
                <Border
                    BackgroundColor="Black"
                    HeightRequest="40"
                    HorizontalOptions="Center"
                    Stroke="Yellow"
                    StrokeShape="RoundRectangle 20"
                    StrokeThickness="2"
                    VerticalOptions="Center"
                    WidthRequest="40">
                    <Label
                        HorizontalOptions="Center"
                        TextColor="YellowGreen"
                        VerticalOptions="Center">
                        <Label.FormattedText>
                            <FormattedString>
                                <Span Text="W" TextColor="YellowGreen" />
                                <Span Text="5" TextColor="YellowGreen" />
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                </Border>
            </HorizontalStackLayout>
            <Button Text="&gt;" />
            <Label Text="Go To" VerticalOptions="Center" />
            <Entry Placeholder="week" />
            <Label Text="Week 5/53 Of 2025" VerticalOptions="Center" />
        </HorizontalStackLayout>
    </Grid>
</Grid>

14 inch screen

15.6 inch screen

I have a custom control in my .NET MAUI application that is not visible under the following conditions:

The screen size is less than 15.6 inches
The resolution is lower than 1920 x 1080
The display scale is greater than 125% The control works perfectly on larger screens with high resolutions and default scaling. However, on smaller screens or high DPI settings, it either disappears or doesn't render properly.

Has anyone faced similar issues? How can I ensure the control remains visible and adapts properly to different screen sizes, resolutions, and scaling settings?

I have used asterisk (*) to indicate sizes, but the issue remains unresolved.

Code:

<Grid ColumnDefinitions="6.5*, 3.5*" ColumnSpacing="5">
    <Grid.RowDefinitions>
        <RowDefinition Height="0.1*" />
        <RowDefinition Height="0.9*" />
    </Grid.RowDefinitions>
    <Grid Grid.Column="0" BackgroundColor="LightBlue">
        <FlexLayout
            AlignContent="Stretch"
            AlignItems="Stretch"
            JustifyContent="Center"
            Wrap="NoWrap">
            <RadioButton Content="This Week" FlexLayout.Shrink="2" />
            <RadioButton Content="Coming Week" />
            <RadioButton Content="Custom Week" />
            <Entry Placeholder="week" />
            <Label Text="To" VerticalOptions="Center" />
            <Entry Placeholder="week" />
            <Label Text="/" VerticalOptions="Center" />
            <DatePicker Format="ddd dd MMM yyyy" />
            <Label Text="To" VerticalOptions="Center" />
            <DatePicker Format="ddd dd MMM yyyy" />
            <Button Text="Apply" />
        </FlexLayout>
    </Grid>

    <Grid Grid.Column="1" BackgroundColor="GreenYellow">
        <HorizontalStackLayout Spacing="5">
            <Button Text="&lt;" />
            <HorizontalStackLayout BackgroundColor="Brown">
                <Border
                    HeightRequest="40"
                    HorizontalOptions="Center"
                    Stroke="Yellow"
                    StrokeShape="RoundRectangle 20"
                    StrokeThickness="2"
                    VerticalOptions="Center"
                    WidthRequest="40">
                    <Label HorizontalOptions="Center" VerticalOptions="Center">
                        <Label.FormattedText>
                            <FormattedString>
                                <Span Text="W" TextColor="LightYellow" />
                                <Span Text="1" TextColor="YellowGreen" />
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                </Border>
                <Label
                    HorizontalOptions="Center"
                    Text="..."
                    VerticalOptions="Center" />
                <Border
                    BackgroundColor="Black"
                    HeightRequest="40"
                    HorizontalOptions="Center"
                    Stroke="Yellow"
                    StrokeShape="RoundRectangle 20"
                    StrokeThickness="2"
                    VerticalOptions="Center"
                    WidthRequest="40">
                    <Label
                        HorizontalOptions="Center"
                        TextColor="Yellow"
                        VerticalOptions="Center">
                        <Label.FormattedText>
                            <FormattedString>
                                <Span Text="W" TextColor="YellowGreen" />
                                <Span Text="4" TextColor="YellowGreen" />
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                </Border>
                <Label
                    HorizontalOptions="Center"
                    Text="..."
                    VerticalOptions="Center" />
                <Border
                    BackgroundColor="Black"
                    HeightRequest="40"
                    HorizontalOptions="Center"
                    Stroke="Yellow"
                    StrokeShape="RoundRectangle 20"
                    StrokeThickness="2"
                    VerticalOptions="Center"
                    WidthRequest="40">
                    <Label
                        HorizontalOptions="Center"
                        TextColor="YellowGreen"
                        VerticalOptions="Center">
                        <Label.FormattedText>
                            <FormattedString>
                                <Span Text="W" TextColor="YellowGreen" />
                                <Span Text="5" TextColor="YellowGreen" />
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                </Border>
            </HorizontalStackLayout>
            <Button Text="&gt;" />
            <Label Text="Go To" VerticalOptions="Center" />
            <Entry Placeholder="week" />
            <Label Text="Week 5/53 Of 2025" VerticalOptions="Center" />
        </HorizontalStackLayout>
    </Grid>
</Grid>

14 inch screen

15.6 inch screen

Share Improve this question asked Mar 17 at 6:01 RohanSavnani 112 bronze badges

1 Do you want all controls to grow or shrink with the screen size, or do you want a scrollview so that you can see controls that are not displayed by sliding the scrollbar? – Leon Lu Commented Mar 18 at 4:19
Layouts do not allow scrolling on their own and dynamic resizing often isn't a good idea, because usability will suffer from it (icons and text may become illegible). You may want to consider using a ScrollView so that your controls are still visible and can be scrolled to. Alternatively, you could try to group your controls and work with some form of horizontal expander. – Julian Commented Mar 18 at 15:34
@LeonLu ,I want all my controls to resize according to screen size. I do not want a ScrollView; I can add a scrollbar, but it is unnecessary for project as it will not look good. – RohanSavnani Commented Mar 19 at 6:11
@Julian , Could you please provide instructions on how to use expanders in Maui, If you could provide an example, it would be of great help as i am someone who is new to maui? – RohanSavnani Commented Mar 19 at 6:20

Add a comment |

1 Answer 1

Sorted by: Reset to default 0

=============Update================

You can refer to this Responsive design techniques if you want to adjust your layout based on windows size. As Note: this document is MAUI specific.

I implement this Reposition result with Adaptive trigger.

Here is example code.

  <ContentPage.Resources>
 
        <Style TargetType="StackLayout">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup>
<VisualState x:Name="Vertical">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="Orientation"
                         Value="Vertical" />
<Setter Property="HeightRequest"
Value="100" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Horizontal">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="1300" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="Orientation"
                         Value="Horizontal" />
 
                                <Setter Property="HeightRequest"
Value="50" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
</ContentPage.Resources>
<StackLayout HorizontalOptions="StartAndExpand" VerticalOptions="Start" x:Name="mysl" >
<HorizontalStackLayout
                        BackgroundColor="LightBlue"
         HorizontalOptions="CenterAndExpand"
>
<RadioButton Content="This Week" />
<RadioButton Content="Coming Week" />
<RadioButton Content="Custom Week" />
<Entry Placeholder="week" />
<Label Text="To" VerticalOptions="Center" />
<Entry Placeholder="week" />
<Label Text="/" VerticalOptions="Center" />
<DatePicker Format="ddd dd MMM yyyy" />
<Label Text="To" VerticalOptions="Center" />
<DatePicker Format="ddd dd MMM yyyy" />
<Button Text="Apply" />
</HorizontalStackLayout>
<HorizontalStackLayout Spacing="5" BackgroundColor="GreenYellow">
<Button Text="&lt;" />
<HorizontalStackLayout BackgroundColor="Brown">
<Border
                    HorizontalOptions="Center"
                    Stroke="Yellow"
                    StrokeShape="RoundRectangle 20"
                    StrokeThickness="2"
                    VerticalOptions="Center"
>
<Label HorizontalOptions="Center" VerticalOptions="Center">
<Label.FormattedText>
<FormattedString>
<Span Text="W" TextColor="LightYellow" />
<Span Text="1" TextColor="YellowGreen" />
</FormattedString>
</Label.FormattedText>
</Label>
</Border>
<Label
                    HorizontalOptions="Center"
                    Text="..."
                    VerticalOptions="Center" />
<Border
                    BackgroundColor="Black"
                    HeightRequest="40"
                    HorizontalOptions="Center"
                    Stroke="Yellow"
                    StrokeShape="RoundRectangle 20"
                    StrokeThickness="2"
                    VerticalOptions="Center"
                    WidthRequest="40">
<Label
                        HorizontalOptions="Center"
                        TextColor="Yellow"
                        VerticalOptions="Center">
<Label.FormattedText>
<FormattedString>
<Span Text="W" TextColor="YellowGreen" />
<Span Text="4" TextColor="YellowGreen" />
</FormattedString>
</Label.FormattedText>
</Label>
</Border>
<Label
                    HorizontalOptions="Center"
                    Text="..."
                    VerticalOptions="Center" />
<Border
                    BackgroundColor="Black"
                    HeightRequest="40"
                    HorizontalOptions="Center"
                    Stroke="Yellow"
                    StrokeShape="RoundRectangle 20"
                    StrokeThickness="2"
                    VerticalOptions="Center"
                    WidthRequest="40">
<Label
                        HorizontalOptions="Center"
                        TextColor="YellowGreen"
                        VerticalOptions="Center">
<Label.FormattedText>
<FormattedString>
<Span Text="W" TextColor="YellowGreen" />
<Span Text="5" TextColor="YellowGreen" />
</FormattedString>
</Label.FormattedText>
</Label>
</Border>
</HorizontalStackLayout>
<Button Text="&gt;" />
<Label Text="Go To" VerticalOptions="Center" />
<Entry Placeholder="week" />
<Label Text="Week 5/53 Of 2025" VerticalOptions="Center" />
</HorizontalStackLayout>
 
    </StackLayout>
</ContentPage>

In this example, the implicit Style targets StackLayout objects. When the window width is between 0 and 1300 device-independent units, StackLayout objects to which the Style is applied will have a vertical orientation. When the window width is >= 1300 device-independent units, the VisualState change is triggered, and the StackLayout orientation changes to horizontal.

I want all my controls to resize according to screen size. I do not want a ScrollView; I can add a scrollbar, but it is unnecessary for project as it will not look good.

Based on your needs, you can try to use Scale method based on the window's width like following code.

protected override void OnAppearing()
{
    base.OnAppearing();
    this.Window.SizeChanged += Window_SizeChanged;
}
 
private void Window_SizeChanged(object? sender, EventArgs e)
{
    // throw new NotImplementedException();
 
    if (Window.Width >= 1400 && Window.Width< 1440)
    {
        myGird.Scale = 0.9f;
    }
    else if (Window.Width < 1400&& Window.Width>1200)
    {
        myGird.Scale = 0.85f;
    }
    else if(Window.Width >= 1440)
    {
        myGird.Scale = 1f;
 
 
    }
}

Do not fet to add x:Name="myGird" for <Grid x:Name="myGird" ColumnDefinitions="6.5*, 3.5*" ColumnSpacing="5">

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

c# - Control Not Visible on Smaller Screens or High-Scale Displays in MAUI - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)