.NET MAUI自定义控件在小屏/高缩放显示下不可见问题求助

我在.NET MAUI中开发的自定义控件，在以下场景无法正常显示：

• 屏幕尺寸小于15.6英寸
• 分辨率低于1920×1080
• 显示缩放比例大于125%

该控件在大屏高分辨率且默认缩放的环境下运行正常，但在小屏或高DPI设置下会消失或渲染异常。我已经用星号（*）设置尺寸，但问题仍未解决。

相关代码：

<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英寸屏幕：控件出现消失或渲染异常的情况
• 15.6英寸屏幕：控件显示正常

请问是否有开发者遇到过类似问题？如何确保控件能适配不同屏幕尺寸、分辨率及缩放设置？

解决方案 #

针对你的适配问题，从代码和MAUI特性出发，给出以下可行的调整方向：

1. 修正FlexLayout换行设置 #

当前FlexLayout设置了Wrap="NoWrap"，小屏空间不足时控件会被挤出可视区域直接消失。改成Wrap="Wrap"允许控件换行，保证所有元素都能显示：

<FlexLayout
    AlignContent="Stretch"
    AlignItems="Stretch"
    JustifyContent="Center"
    Wrap="Wrap">

2. 替换硬编码尺寸为相对单位 #

代码中HeightRequest="40"、WidthRequest="40"是固定像素值，高DPI缩放环境下会适配失效。建议用OnIdiom动态设置不同设备的尺寸：

<Border
    HeightRequest="{OnIdiom Phone=30, Tablet=40, Desktop=40}"
    WidthRequest="{OnIdiom Phone=30, Tablet=40, Desktop=40}"
    ...>

3. 处理HorizontalStackLayout溢出 #

右侧GreenYellow Grid里的HorizontalStackLayout没有溢出处理，小屏会被截断。嵌套进ScrollView允许横向滚动：

<Grid Grid.Column="1" BackgroundColor="GreenYellow">
    <ScrollView Orientation="Horizontal">
        <HorizontalStackLayout Spacing="5">
            <!-- 原有内容 -->
        </HorizontalStackLayout>
    </ScrollView>
</Grid>

4. 优化Grid行高比例 #

第一行RowDefinition Height="0.1*"在小屏可能被压缩到不可见，导致布局错乱。设置最小高度或改用Auto自适应：

<RowDefinition Height="Auto" MinHeight="20" />

5. 开启高DPI适配支持 #

在Platforms/Windows/App.xaml.cs中添加代码，让应用识别系统缩放比例：

Microsoft.Maui.Handlers.WindowHandler.Mapper.AppendToMapping(nameof(IWindow), (handler, view) =>
{
    var nativeWindow = handler.PlatformView;
    nativeWindow.Activate();
    nativeWindow.SetDpiAwarenessContext(DpiAwarenessContext.PerMonitorV2DpiAwareness);
});

6. 使用ConstraintLayout替代固定比例 #

复杂布局推荐用ConstraintLayout定义控件间相对关系，比Grid星号比例更灵活：

<ConstraintLayout>
    <!-- 通过Constraint属性定义控件位置和尺寸 -->
</ConstraintLayout>

内容的提问来源于stack exchange，提问作者RohanSavnani