Xamarin：如何设置16:9比例BoxView横向填充并自适应高度（适配旋转）

没问题，这就给你一套完整的解决方案，保证不管手机怎么转，你的16:9区域都能横向填满屏幕，同时完美处理图片加载和占位需求！

一、先搞定自适应16:9比例的容器 #

首先我们需要一个能自动根据屏幕宽度计算高度的容器，确保始终保持16:9的宽高比，并且横向填满屏幕。这里用Grid结合值转换器来实现最方便：

1. 先写一个宽高比转换器，用来根据宽度计算对应高度：

public class AspectRatioConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is double width && parameter is string ratioStr)
        {
            var ratioParts = ratioStr.Split(':');
            if (ratioParts.Length == 2 && double.TryParse(ratioParts[0], out double widthRatio) && double.TryParse(ratioParts[1], out double heightRatio))
            {
                return width * heightRatio / widthRatio;
            }
        }
        return 0;
    }

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

2. 在XAML里用Grid作为容器，绑定HeightRequest到自身的Width，通过转换器算出16:9的高度：

<Grid x:Name="AspectGrid" HorizontalOptions="FillAndExpand">
    <Grid.HeightRequest>
        <Binding Path="Width" Source="{x:Reference AspectGrid}" 
                 Converter="{StaticResource AspectRatioConverter}" 
                 ConverterParameter="16:9" />
    </Grid.HeightRequest>
    <!-- 后续的图片和占位内容都放这里面 -->
</Grid>

二、整合FFImageLoading与占位内容 #

接下来把FFImageLoading的控件放进去，同时处理无图片时的占位（保留空间）：

1. 先写一个反向布尔转换器，用来控制占位和图片的显示切换：

public class InverseBooleanConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return !(value is bool b && b);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return !(value is bool b && b);
    }
}

2. 在Grid里添加占位的BoxView、提示文本，以及FFImageLoading的CachedImage：

<Grid x:Name="AspectGrid" HorizontalOptions="FillAndExpand">
    <Grid.HeightRequest>
        <Binding Path="Width" Source="{x:Reference AspectGrid}" 
                 Converter="{StaticResource AspectRatioConverter}" 
                 ConverterParameter="16:9" />
    </Grid.HeightRequest>

    <!-- 无图时显示的占位区域 -->
    <BoxView Color="#EEEEEE" IsVisible="{Binding HasImage, Converter={StaticResource InverseBooleanConverter}}" />
    <Label Text="暂无图片" HorizontalOptions="Center" VerticalOptions="Center" 
           IsVisible="{Binding HasImage, Converter={StaticResource InverseBooleanConverter}}" />

    <!-- FFImageLoading图片控件 -->
    <ffimageloading:CachedImage 
        Source="{Binding ImageUrl}" 
        HorizontalOptions="Fill" 
        VerticalOptions="Fill"
        Aspect="AspectFill"
        IsVisible="{Binding HasImage}"
        LoadingPlaceholder="loading_placeholder.png" <!-- 可选：加载中的占位图 -->
        ErrorPlaceholder="error_placeholder.png" /> <!-- 可选：加载失败的占位图 -->
</Grid>

三、ViewModel里处理状态逻辑 #

在你的ViewModel中添加ImageUrl和HasImage属性，用来控制图片和占位的显示：

private string _imageUrl;
public string ImageUrl
{
    get => _imageUrl;
    set
    {
        _imageUrl = value;
        OnPropertyChanged();
        HasImage = !string.IsNullOrEmpty(_imageUrl);
    }
}

private bool _hasImage;
public bool HasImage
{
    get => _hasImage;
    set => SetProperty(ref _hasImage, value);
}

四、最后别忘了注册转换器 #

在App.xaml里把我们写的两个转换器注册到资源字典中：

<Application.Resources>
    <ResourceDictionary>
        <local:AspectRatioConverter x:Key="AspectRatioConverter" />
        <local:InverseBooleanConverter x:Key="InverseBooleanConverter" />
    </ResourceDictionary>
</Application.Resources>

这样就大功告成了！不管手机怎么旋转，这个Grid都会自动调整高度保持16:9，横向填满屏幕；有图片时FFImageLoading会占满整个区域展示图片，无图时BoxView和提示文本会显示出来，同时完全保留这个16:9的空间。

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