在 .NET MAUI 中根据页面方向显示不同的图像

Question

我只是想找出是否有一种方法可以根据 XAML 中的页面方向定义不同的图像源。

喜欢：

<Image>
    <Orientation is landscape>
     <Image.Source = "landscape.png" />
    </Orientation>
    <Orientation is not landscape>
     <Image.Source = "notlandscape.png" />
    </Orientation>
</Image>

Answer 1

您可以在 Page 的代码后面设置 ViewModel 的属性，并使用DataTrigger绑定到该属性。

为此，您需要覆盖OnSizeAllocated()方法：

代码隐藏

private SomeViewModel _viewModel = new SomeViewModel();

public SomePage()
{
    InitializeComponent();
    BindingContext = _viewModel;
}

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height);

    _viewModel.IsPortrait = height > width;
}

视图模型

[ObservableProperty]
private bool _isPortrait;

或者

private bool _isPortrait;
public bool IsPortrait
{
    get => _isPortrait;
    set => SetField(ref _isPortrait, value);
}

XAML

<Image>
    <Image.Triggers>
        <DataTrigger
            TargetType="Image"
            Binding="{Binding IsPortrait}"
            Value="True">
            <Setter
                Property="Source"
                Value="image_portrait.png" />
        </DataTrigger>
        <DataTrigger
            TargetType="Image"
            Binding="{Binding IsPortrait}"
            Value="False">
            <Setter
                Property="Source"
                Value="image_landscape.png" />
        </DataTrigger>
    </Image.Trigger>
</Image>

另一种方法是使用Visual States 。

Answer 2

我相信您正在寻找Orientation state 触发器。

<Style x:Key="OrientationStateTriggerImageStyle"
       TargetType="Image">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup>
                <VisualState x:Name="Portrait">
                    <VisualState.StateTriggers>
                        <OrientationStateTrigger Orientation="Portrait" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="Source"
                                Value="notlandscape.png" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Landscape">
                    <VisualState.StateTriggers>
                        <OrientationStateTrigger Orientation="Landscape" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Property="Source"
                                Value="landscape.png" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

我不知道您是否可以像演示的那样在样式声明之外使用它，但这确实可以实现您的目标而无需添加新属性。