在.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

您可以在页面后面的代码中设置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;
}

ViewModel

[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

我相信你正在寻找方向状态触发器。

<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>

我不知道你是否可以在样式声明之外使用它，但这确实可以达到你的目标，而不必添加新的属性。