Search code examples
wpflistviewdatatemplate

ListView ignoring DataTemplates when using a ControlTemplate


I try to implement a multi column ListView. Everything worked just fine until I tried to style the mouseover- and selection-look of the list view items. I therefore created a ControlTemplate (see XAML below). When I use the ControlTemplate, the DataTemplates for the columns are ignored. When I remove the ControlTemplate everything is fine again. Can someone point me to the error? Thanks!

<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
    <Style.Resources>
        <SolidColorBrush Color="#FF355bbf" x:Key="ListItemSelectedFill" />
    </Style.Resources>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListViewItem}">
                <Border CornerRadius="2" SnapsToDevicePixels="True"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        Background="{TemplateBinding Background}">
                    <Border x:Name="InnerBorder" CornerRadius="1" BorderThickness="1">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition MaxHeight="11" />
                                <RowDefinition />
                            </Grid.RowDefinitions>
                            <Rectangle x:Name="UpperHighlight" Visibility="Collapsed" Fill="#75FFFFFF" />
                            <ContentPresenter Grid.Row="0"  Grid.RowSpan="2" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        </Grid>
                    </Border>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="Transparent" />
                        <Setter Property="BorderBrush" Value="Transparent" />
                        <Setter TargetName="UpperHighlight" Property="Visibility" Value="Hidden" />
                    </Trigger>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Background" Value="{StaticResource ListItemSelectedFill}" />
                        <Setter Property="BorderBrush" Value="{StaticResource ListItemSelectedFill}" />
                        <Setter TargetName="InnerBorder" Property="BorderBrush" Value="#80FFFFFF" />
                        <Setter TargetName="UpperHighlight" Property="Visibility" Value="Hidden" />
                        <Setter TargetName="UpperHighlight" Property="Fill" Value="{StaticResource ListItemSelectedFill}" />
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
</ListView.ItemContainerStyle>

<ListView.View>
<GridView>
    <!-- Column Checkbox -->
    <GridViewColumn Width="30" Header="">
        <GridViewColumn.CellTemplate>
            <DataTemplate>
                <CheckBox IsChecked="{Binding Path=IsSelected}" />
            </DataTemplate>
        </GridViewColumn.CellTemplate>
    </GridViewColumn>

    <!-- Column Details -->
    <GridViewColumn Width="300" Header="{Binding Path=DetailsHeaderText}" HeaderContainerStyle="{StaticResource HeaderStyle}" >
        <GridViewColumn.CellTemplate>
            <DataTemplate>
                <Grid x:Name="background" MouseDown="ContentGrid_OnMouseDown" Height="20">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <Border Grid.Column="0" Margin="{Binding Converter={StaticResource LevelMarginConverter}}" Background="Blue" BorderBrush="Transparent" BorderThickness="0" />

                    <ToggleButton Background="Transparent" Grid.Column="1" Style="{StaticResource ExpandCollapseToggleStyle}" x:Name="tbExpand" Visibility="Hidden" Click="ShowHide_OnMouseDown" 
                   HorizontalAlignment="Center" VerticalAlignment="Center"   IsChecked="{Binding IsExpanded, Mode=TwoWay}"/>

                    <TextBlock Grid.Column="2"  x:Name="txtTitle" Text="{Binding Path=Title}" />
                </Grid>
                <DataTemplate.Triggers>
                    <DataTrigger Binding="{Binding HasChildren}" Value="True">
                        <Setter TargetName="tbExpand" Property="Visibility" Value="Visible"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding  RelativeSource={RelativeSource Mode=FindAncestor,  AncestorType={x:Type ListViewItem}}, Path=IsSelected}" Value="True">
                        <Setter TargetName="txtTitle" Property="Foreground" Value="White"/>
                    </DataTrigger>
                </DataTemplate.Triggers>
            </DataTemplate>
        </GridViewColumn.CellTemplate>
    </GridViewColumn>
</GridView>
</ListView.View>

Solution

  • Replace the ContentPresenter in your ContentTemplate by a GridViewRowPresenter:

    <ControlTemplate TargetType="{x:Type ListViewItem}">
        <Border ...>
            <Border ...>
                <Grid>
                    ...
                    <GridViewRowPresenter ... />
                </Grid>
            </Border>
        </Border>
    </ControlTemplate>