Xamarin：如何让ListView项高度随ViewCell宽度线性联动调整？

嘿，我来帮你搞定这个ListView里图标缩放联动的问题！你现在遇到的核心问题是，调整左侧列的*宽度后，图标所在行的高度没有同步变化，导致图标只变宽不变高（或者反之）。下面给你几个实用的实现方案，都是WPF里常用的做法：

方案一：绑定+值转换器（精准控制比例） #

这个方案适合你需要严格自定义宽高比例的场景（比如1:1正方形，或者2:1的矩形），通过绑定列的实际宽度到行高，用转换器保持比例。

步骤1：编写值转换器 #

先创建一个转换器类，用来把列的实际宽度转换成对应的行高：

public class RatioConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        // value是列的ActualWidth，parameter是你要的比例（比如"1"就是1:1）
        if (value is double columnWidth && double.TryParse(parameter?.ToString(), out double ratio))
        {
            return new GridLength(columnWidth * ratio);
        }
        // 默认返回Auto避免出错
        return GridLength.Auto;
    }

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

步骤2：在XAML中使用绑定 #

在你的ListView ItemTemplate里，把左侧列的ActualWidth绑定到行高，同时设置图标为Uniform拉伸保持比例：

<ListView.ItemTemplate>
    <DataTemplate>
        <Grid>
            <Grid.ColumnDefinitions>
                <!-- 这里的Width可以随便改*值，行高会同步联动 -->
                <ColumnDefinition x:Name="IconColumn" Width="15*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <!-- 绑定列的实际宽度，比例设为1就是宽高1:1 -->
                <RowDefinition Height="{Binding ActualWidth, ElementName=IconColumn, Converter={StaticResource RatioConverter}, ConverterParameter=1}"/>
            </Grid.RowDefinitions>

            <!-- 左侧图标，Stretch=Uniform保持比例 -->
            <Image Grid.Column="0" Grid.Row="0" Source="your-icon-source.png" Stretch="Uniform"/>

            <!-- 右侧三行文本，垂直居中对齐 -->
            <StackPanel Grid.Column="1" VerticalAlignment="Center" Margin="8,0">
                <TextBlock Text="第一行文本" FontWeight="Bold"/>
                <TextBlock Text="第二行文本" Foreground="#666"/>
                <TextBlock Text="第三行文本" Foreground="#999"/>
            </StackPanel>
        </Grid>
    </DataTemplate>
</ListView.ItemTemplate>

步骤3：声明转换器资源 #

记得在窗口或页面的资源里注册转换器：

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

方案二：用UniformGrid自动保持宽高比（最简单） #

如果你的图标只需要保持正方形，这个方案最省事，不需要写任何后台代码：

<ListView.ItemTemplate>
    <DataTemplate>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="15*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <!-- UniformGrid默认会让单元格宽高相等，自动适配列宽 -->
            <UniformGrid Grid.Column="0">
                <Image Source="your-icon-source.png" Stretch="Uniform"/>
            </UniformGrid>

            <!-- 右侧文本区域 -->
            <StackPanel Grid.Column="1" VerticalAlignment="Center" Margin="8,0">
                <TextBlock Text="第一行文本"/>
                <TextBlock Text="第二行文本"/>
                <TextBlock Text="第三行文本"/>
            </StackPanel>
        </Grid>
    </DataTemplate>
</ListView.ItemTemplate>

当你修改左侧列的*值时，UniformGrid的高度会自动匹配宽度，图标自然就同步缩放了。

方案三：Viewbox包裹图标（带缩放限制） #

如果你想限制图标的最大/最小缩放尺寸，同时自动适配容器大小，可以用Viewbox：

<ListView.ItemTemplate>
    <DataTemplate>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="15*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <!-- Viewbox自动缩放内部元素，MaxWidth/MaxHeight限制最大尺寸 -->
            <Viewbox Grid.Column="0" Stretch="Uniform" MaxWidth="100" MaxHeight="100">
                <Image Source="your-icon-source.png"/>
            </Viewbox>

            <StackPanel Grid.Column="1" VerticalAlignment="Center" Margin="8,0">
                <TextBlock Text="第一行文本"/>
                <TextBlock Text="第二行文本"/>
                <TextBlock Text="第三行文本"/>
            </StackPanel>
        </Grid>
    </DataTemplate>
</ListView.ItemTemplate>

几个关键注意点： #

• 确保Image的Stretch属性设置正确：Uniform保持图标比例，Fill会拉伸填满容器（可能变形），根据需求选择。
• 用转换器时，一定要绑定ActualWidth而不是Width，因为Width是*比例值，ActualWidth才是实际渲染的像素宽度。
• 如果你之前的RowDefinition是固定高度（比如Height="40"），那肯定不会联动，必须改成绑定或用自适应容器。

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