.NET MAUI：如何在XAML中根据页面方向设置不同图片源

当然可以实现，下面是几种常见XAML框架下的具体方案：

方案1：使用VisualStateManager（UWP/Xamarin.Forms/WPF通用） #

通过定义视觉状态，绑定页面的Orientation属性，自动切换图片源：

<Image>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="OrientationStates">
            <!-- 横屏状态 -->
            <VisualState x:Name="Landscape">
                <VisualState.StateTriggers>
                    <!-- UWP用自适应触发器判断横屏 -->
                    <AdaptiveTrigger MinWindowWidth="720"/>
                    <!-- Xamarin.Forms可替换为：<OrientationTrigger Orientation="Landscape"/> -->
                    <!-- WPF可替换为绑定窗口Orientation的状态触发器 -->
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="(Image.Source)" Value="landscape.png"/>
                </VisualState.Setters>
            </VisualState>
            <!-- 竖屏状态 -->
            <VisualState x:Name="Portrait">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="(Image.Source)" Value="notlandscape.png"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Image>

方案2：数据绑定+转换器（MVVM模式通用） #

1. 先定义转换器，根据Orientation返回对应图片路径：

public class OrientationToImageSourceConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is Orientation orientation)
        {
            return orientation == Orientation.Landscape ? "landscape.png" : "notlandscape.png";
        }
        return "notlandscape.png";
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

2. 在XAML中引用转换器并绑定：

<Window.Resources>
    <local:OrientationToImageSourceConverter x:Key="OrientationConverter"/>
</Window.Resources>

<Image Source="{Binding RelativeSource={RelativeSource AncestorType=Window}, Path=Orientation, Converter={StaticResource OrientationConverter}}"/>

方案3：WPF专属Style触发器 #

直接在Image的Style里设置触发器，监听窗口Orientation变化：

<Image>
    <Image.Style>
        <Style TargetType="Image">
            <Setter Property="Source" Value="notlandscape.png"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Window}, Path=Orientation}" Value="Landscape">
                    <Setter Property="Source" Value="landscape.png"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Image.Style>
</Image>

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