.NET MAUI使用Border控件导致页面空白问题求助

核心问题 #

1. 绑定参数错误引发异常：三个Border的DataTrigger里ConverterParameter全设为Water，不管点击哪个图标，只有对应Water的触发逻辑会生效，另外两个永远无法触发选中状态，错误的绑定参数还可能导致布局异常，直接造成页面空白。
2. Border控件渲染配置缺失：未设置Border的Background属性，部分平台下会因默认背景的渲染逻辑问题，导致控件及页面内容无法正常显示。

修复步骤 #

1. 修正ConverterParameter参数：给每个Border设置对应类型的参数，和点击命令的CommandParameter保持一致：
   • 水电图标对应Water
   • 电力图标对应Electricity
   • 热力图标对应Heat
2. 添加Border背景属性：给每个Border加上Background="Transparent"，确保控件正常渲染，同时避免遮挡内部图片。
3. 可选优化：移除Border的固定HeightRequest和WidthRequest，让它自适应内部图片大小，再通过Padding调整边框与图片的间距，优化视觉效果。

修改后的关键代码片段 #

<FlexLayout Direction="Row" JustifyContent="SpaceEvenly">
    <Border Stroke="Transparent" StrokeThickness="0"
            Background="Transparent" Padding="2">
        <Border.Triggers>
            <DataTrigger TargetType="Border"
                        Binding="{Binding TaskType, Converter={StaticResource TaskTypeToBoolean}, ConverterParameter=Water}"
                        Value="True">
                <Setter Property="Stroke" Value="{StaticResource LightMeterReaderBottomBlue900}" />
                <Setter Property="StrokeThickness" Value="3" />
            </DataTrigger>
        </Border.Triggers>
        <Border.GestureRecognizers>
            <TapGestureRecognizer Command="{Binding SetTaskTypeCommand}" CommandParameter="Water" 
                                NumberOfTapsRequired="1" />
        </Border.GestureRecognizers>
        <Image Source="big_water.png"
                HeightRequest="84" WidthRequest="84" />
    </Border>
    <Border Stroke="Transparent" StrokeThickness="0"
            Background="Transparent" Padding="2">
        <Border.Triggers>
            <DataTrigger TargetType="Border"
                        Binding="{Binding TaskType, Converter={StaticResource TaskTypeToBoolean}, ConverterParameter=Electricity}"
                        Value="True">
                <Setter Property="Stroke" Value="{StaticResource LightMeterReaderBottomBlue900}" />
                <Setter Property="StrokeThickness" Value="3" />
            </DataTrigger>
        </Border.Triggers>
        <Border.GestureRecognizers>
            <TapGestureRecognizer Command="{Binding SetTaskTypeCommand}" CommandParameter="Electricity" 
                                NumberOfTapsRequired="1" />
        </Border.GestureRecognizers>
        <Image Source="big_electrity.png" 
                HeightRequest="84" WidthRequest="84" />
    </Border>
    <Border Stroke="Transparent" StrokeThickness="0"
            Background="Transparent" Padding="2">
        <Border.Triggers>
            <DataTrigger TargetType="Border"
                        Binding="{Binding TaskType, Converter={StaticResource TaskTypeToBoolean}, ConverterParameter=Heat}"
                        Value="True">
                <Setter Property="Stroke" Value="{StaticResource LightMeterReaderBottomBlue900}" />
                <Setter Property="StrokeThickness" Value="3" />
            </DataTrigger>
        </Border.Triggers>
        <Border.GestureRecognizers>
            <TapGestureRecognizer Command="{Binding SetTaskTypeCommand}" CommandParameter="Heat" 
                                NumberOfTapsRequired="1" />
        </Border.GestureRecognizers>
        <Image Source="big_heat.png" 
                HeightRequest="84" WidthRequest="84" />
    </Border>
</FlexLayout>

额外检查 #

• 确认TaskTypeToBooleanConverter逻辑正确：当TaskType和ConverterParameter匹配时返回True，否则返回False。
• 如果页面还是空白，检查LightMeterReaderBottomBlue900资源是否正确定义，避免因资源引用错误导致布局异常。

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