How can I control the height of a ListView in WPF, using a complex DataTemplate with DataTriggers?

Posted by Rob Perkins on Stack Overflow See other posts from Stack Overflow or by Rob Perkins
Published on 2010-06-02T07:00:43Z Indexed on 2010/06/02 7:03 UTC
Read the original article Hit count: 259

Filed under:
|
|

I have a ListView element with a DataTemplate for each ListViewItem defined as follows. When run, the ListView's height is not collapsed onto the items in the view, which is undesirable behavior:

<DataTemplate x:Key="LicenseItemTemplate">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"  />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" Text="{Binding company}"></TextBlock>
        <Grid Grid.Row="1" Style="{StaticResource HiddenWhenNotSelectedStyle}">
            <Grid.RowDefinitions>
                <RowDefinition />
            </Grid.RowDefinitions>
            <Button Grid.Row="0">ClickIt</Button>
        </Grid>
    </Grid>
</DataTemplate>

The second row of the outer grid has a style applied which looks like this. The purpose of the style is to :

<Style TargetType="{x:Type Grid}" x:Key="HiddenWhenNotSelectedStyle" >
    <Style.Triggers>
        <DataTrigger
            Binding="{Binding Path=IsSelected, 
                        RelativeSource={
                        RelativeSource 
                        Mode=FindAncestor, 
                        AncestorType={x:Type ListBoxItem}
                        }
                        }" 
            Value="False">
            <Setter Property="Grid.Visibility" Value="Collapsed" />
        </DataTrigger>
        <DataTrigger
            Binding="{Binding Path=IsSelected, 
                        RelativeSource={
                        RelativeSource 
                        Mode=FindAncestor, 
                        AncestorType={x:Type ListBoxItem}
                        }
                        }" 
            Value="True">
            <Setter
                Property="Grid.Visibility"
                Value="Visible"
            />
        </DataTrigger>
    </Style.Triggers>
</Style>

The ListView renders like this: Height of ListView is twice what it should be.

The desired appearance is this, when none of the elements are selected: Height of ListView is collapsed to list items.

...with, of course, the ListView's height adjusting to accommodate the additional content when the second grid is made visible by selection. What can I do to get the desired behavior?

© Stack Overflow or respective owner

Related posts about listview

Related posts about wpf-controls