如何在Xamarin.Forms中更新ListView被点击行的行高？

Great question—you’re right that ViewCell doesn’t support direct binding to its Height property, but there are two reliable ways to achieve dynamic row heights based on your content visibility or explicit height values:

1. Automatic Height Adjustment Based on Content Visibility #

The simplest approach is to let the cell auto-size itself by enabling HasUnevenRows on your ListView, then controlling the visibility of inner elements. The cell will automatically expand or collapse to fit the visible content.

Step 1: Enable Uneven Rows on the ListView #

First, set HasUnevenRows="True" on your ListView—this disables uniform row heights and lets each cell size itself dynamically:

<ListView ItemsSource="{Binding Classes}" 
          ItemTemplate="{StaticResource ClassTemplate}"
          HasUnevenRows="True">
</ListView>

Step 2: Bind Visibility of Dynamic Content #

In your ClassTemplate DataTemplate, use IsVisible bindings to show/hide sections of the cell. The root layout (like a StackLayout or Grid) will adjust its height automatically, and the ViewCell will follow suit:

<DataTemplate x:Key="ClassTemplate">
    <ViewCell>
        <StackLayout Padding="10" Spacing="5">
            <!-- Fixed, always visible content -->
            <Label Text="{Binding ClassName}" 
                   FontSize="Headline" 
                   FontAttributes="Bold"/>
            
            <!-- Dynamic content: shown/hidden based on ViewModel property -->
            <StackLayout IsVisible="{Binding ShowDetails}" Spacing="3">
                <Label Text="{Binding ClassDescription}" 
                       FontSize="Body"/>
                <Label Text="Teacher: {Binding TeacherName}" 
                       FontSize="Caption" 
                       TextColor="Gray"/>
            </StackLayout>
        </StackLayout>
    </ViewCell>
</DataTemplate>

Just make sure your ViewModel implements INotifyPropertyChanged so that when ShowDetails changes, the UI updates immediately.

2. Explicit Height Binding via Root Layout #

If you need to set a specific height value (instead of letting content size itself), bind the HeightRequest of the root layout inside the ViewCell (e.g., Grid or StackLayout) to a property in your ViewModel. This works because layout controls support HeightRequest binding, unlike ViewCell.

Example Implementation: #

<DataTemplate x:Key="ClassTemplate">
    <ViewCell>
        <!-- Bind HeightRequest to your ViewModel's RowHeight property -->
        <Grid HeightRequest="{Binding RowHeight}" 
              Padding="10" 
              VerticalOptions="Fill">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            
            <Label Grid.Row="0" 
                   Text="{Binding ClassName}" 
                   FontSize="Headline"/>
            <Label Grid.Row="1" 
                   Text="{Binding Status}" 
                   FontSize="Caption"/>
        </Grid>
    </ViewCell>
</DataTemplate>

Again, ensure HasUnevenRows="True" is set on the ListView. In your ViewModel, calculate RowHeight based on your logic (e.g., 60px for collapsed rows, 120px for expanded rows) and raise the PropertyChanged event when it changes.

Additional Tips #

• Avoid setting fixed heights on inner elements unless necessary—let Auto sizing do the work for smoother dynamic adjustments.
• If your cell content might exceed the requested height, set VerticalOptions="Fill" on inner elements or wrap them in a ScrollView (though scrolling inside a ListView cell is generally not recommended for UX).
• For complex layouts, use a Grid with RowDefinition.Height="Auto" to ensure each row adjusts to its content.

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