Xamarin.Forms：如何让BoxView高度匹配宽度并横向FillAndExpand

你遇到的问题核心在于HeightRequest需要动态匹配BoxView的实际宽度（毕竟宽度是由HorizontalOptions="FillAndExpand"根据父布局动态计算的），直接写固定值肯定行不通。这里给你几个实用的实现方案：

方法1：利用SizeChanged事件（最简单直接） #

这种方式不需要额外类，直接通过后台代码监听BoxView的尺寸变化，同步高度即可：

修改后的XAML代码： #

<ContentPage Title="About" >
    <StackLayout>
        <BoxView x:Name="imageBoxView" 
                 Color="AliceBlue" 
                 HorizontalOptions="FillAndExpand"
                 SizeChanged="ImageBoxView_SizeChanged" />
    </StackLayout>
</ContentPage>

对应的后台C#代码： #

private void ImageBoxView_SizeChanged(object sender, EventArgs e)
{
    if (sender is BoxView box && box.Width > 0)
    {
        // 加宽度大于0的判断，避免布局初始化时宽度为0导致HeightRequest失效
        box.HeightRequest = box.Width;
    }
}

方法2：使用数据绑定+值转换器（更符合MVVM风格） #

如果你的项目遵循MVVM模式，这种方式更优雅，不会让视图逻辑和后台代码过度耦合：

第一步：创建值转换器类 #

public class WidthToHeightConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is double width && width > 0)
        {
            return width;
        }
        return 0;
    }

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

第二步：在XAML中引用转换器并绑定 #

<ContentPage Title="About" 
             xmlns:local="clr-namespace:你的项目命名空间">
    <ContentPage.Resources>
        <local:WidthToHeightConverter x:Key="WidthToHeightConverter" />
    </ContentPage.Resources>
    
    <StackLayout>
        <BoxView x:Name="imageBoxView" 
                 Color="AliceBlue" 
                 HorizontalOptions="FillAndExpand"
                 HeightRequest="{Binding Source={x:Reference imageBoxView}, Path=Width, Converter={StaticResource WidthToHeightConverter}}" />
    </StackLayout>
</ContentPage>

额外注意点 #

• 两种方案都加入了width > 0的判断，是为了避免布局初始化阶段宽度为0，导致HeightRequest被设为0后无法触发后续尺寸更新的问题。
• 如果父布局（比如StackLayout）有内边距或外边距，BoxView的宽度会自动扣除这些间距，两种方案都会基于最终的实际宽度计算高度，不需要额外调整。

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