CODEWITHSUNDEEP
c#wpflistview
Sven Bardos
Sven Bardos

Reputation: 872

GridViewColumn.CellTemplate with TextBox not working with ListView.ItemContainerStyle

I have a ListView like this:

      <ListView ItemsSource="{Binding Components}"
                      BorderThickness="0"
                      Margin="0,2,0,0"
                      HorizontalAlignment="Stretch"
                      MinHeight="150"
                      SelectionMode="Single"
                <ListView.View>
                    <GridView>
                        <GridViewColumn Header="Component Name">
                            <GridViewColumn.CellTemplate>

                                <DataTemplate DataType="{x:Type viewModels:ComponentViewModel}">
                                    <TextBox Text="{Binding Name}"
                                             Style="{StaticResource TextBoxInListViewStyle}">
                                    </TextBox>
                                </DataTemplate>

                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                    </GridView>
                </ListView.View>
            </ListView>

This renders like shown here:

enter image description here

As you can see, TextBox is used (I can select text), but the ListViewItemContainer gives me the glassy selection look which I don't want.

Then I have defined a ItemContainerStyle (ListViewItemStyle) for my ListView which is used like that (7th row):

      <ListView ItemsSource="{Binding Components}"
                      BorderThickness="0"
                      Margin="0,2,0,0"
                      HorizontalAlignment="Stretch"
                      MinHeight="150"
                      SelectionMode="Single"
                      ItemContainerStyle="{StaticResource ListViewItemStyle}"
                <ListView.View>
                    <GridView>
                        <GridViewColumn Header="Component Name">
                            <GridViewColumn.CellTemplate>

                                <DataTemplate DataType="{x:Type viewModels:ComponentViewModel}">
                                    <TextBox Text="{Binding Name}"
                                             Style="{StaticResource TextBoxInListViewStyle}">
                                    </TextBox>
                                </DataTemplate>

                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                    </GridView>
                </ListView.View>
            </ListView>

Here is my ListViewItemStyle:

<Style x:Key="ListViewItemStyle"
       TargetType="{x:Type ListViewItem}">
    <Setter Property="SnapsToDevicePixels"
            Value="True" />
    <Setter Property="Padding"
            Value="4,1" />
    <Setter Property="HorizontalContentAlignment"
            Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
    <Setter Property="VerticalContentAlignment"
            Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
    <Setter Property="Background"
            Value="Transparent" />
    <Setter Property="BorderBrush"
            Value="Transparent" />
    <Setter Property="BorderThickness"
            Value="1" />
    <Setter Property="FocusVisualStyle"
            Value="{StaticResource FocusVisual}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListViewItem}">
                <Border x:Name="Bd"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Background="{TemplateBinding Background}"
                        Padding="{TemplateBinding Padding}"
                        SnapsToDevicePixels="true">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      ContentTemplate="{TemplateBinding ContentTemplate}" />
                </Border>
                <ControlTemplate.Triggers>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsMouseOver"
                                       Value="True" />
                        </MultiTrigger.Conditions>
                        <Setter Property="Background"
                                TargetName="Bd"
                                Value="{StaticResource Item.MouseOver.Background}" />
                        <Setter Property="BorderBrush"
                                TargetName="Bd"
                                Value="{StaticResource Item.MouseOver.Border}" />
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="Selector.IsSelectionActive"
                                       Value="False" />
                            <Condition Property="IsSelected"
                                       Value="True" />
                        </MultiTrigger.Conditions>
                        <Setter Property="Background"
                                TargetName="Bd"
                                Value="{StaticResource Item.SelectedInactive.Background}" />
                        <Setter Property="BorderBrush"
                                TargetName="Bd"
                                Value="{StaticResource Item.SelectedInactive.Border}" />
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="Selector.IsSelectionActive"
                                       Value="True" />
                            <Condition Property="IsSelected"
                                       Value="True" />
                        </MultiTrigger.Conditions>
                        <Setter Property="Background"
                                TargetName="Bd"
                                Value="{StaticResource Item.SelectedActive.Background}" />
                        <Setter Property="BorderBrush"
                                TargetName="Bd"
                                Value="{StaticResource Item.SelectedActive.Border}" />
                    </MultiTrigger>
                    <Trigger Property="IsEnabled"
                             Value="False">
                        <Setter Property="TextElement.Foreground"
                                TargetName="Bd"
                                Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

This gives me the selection look I want. But unfortunately now my TextBox template from the CellTemplate is not working anymore and the data binding isn't working either:

Good selection but bad template and binding

Happy new year!

Upvotes: 0

Views: 1704

Answers (1)

Sven Bardos
Sven Bardos

Reputation: 872

I solved it!

Instead of using a ContentPresenter in my Style I had to use a GridRowPresenter!

 <Style x:Key="ListViewItemStyle"
       TargetType="{x:Type ListViewItem}">
    <Setter Property="SnapsToDevicePixels"
            Value="True" />
    <Setter Property="Padding"
            Value="4,1" />
    <Setter Property="HorizontalContentAlignment"
            Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
    <Setter Property="VerticalContentAlignment"
            Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
    <Setter Property="Background"
            Value="Transparent" />
    <Setter Property="BorderBrush"
            Value="Transparent" />
    <Setter Property="BorderThickness"
            Value="1" />
    <Setter Property="FocusVisualStyle"
            Value="{StaticResource FocusVisual}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListViewItem}">
                <Border x:Name="Bd"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Background="{TemplateBinding Background}"
                        Padding="{TemplateBinding Padding}"
                        SnapsToDevicePixels="true">
                    <GridViewRowPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                       />
                </Border>
                <ControlTemplate.Triggers>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsMouseOver"
                                       Value="True" />
                        </MultiTrigger.Conditions>
                        <Setter Property="Background"
                                TargetName="Bd"
                                Value="{StaticResource Item.MouseOver.Background}" />
                        <Setter Property="BorderBrush"
                                TargetName="Bd"
                                Value="{StaticResource Item.MouseOver.Border}" />
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="Selector.IsSelectionActive"
                                       Value="False" />
                            <Condition Property="IsSelected"
                                       Value="True" />
                        </MultiTrigger.Conditions>
                        <Setter Property="Background"
                                TargetName="Bd"
                                Value="{StaticResource Item.SelectedInactive.Background}" />
                        <Setter Property="BorderBrush"
                                TargetName="Bd"
                                Value="{StaticResource Item.SelectedInactive.Border}" />
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="Selector.IsSelectionActive"
                                       Value="True" />
                            <Condition Property="IsSelected"
                                       Value="True" />
                        </MultiTrigger.Conditions>
                        <Setter Property="Background"
                                TargetName="Bd"
                                Value="{StaticResource Item.SelectedActive.Background}" />
                        <Setter Property="BorderBrush"
                                TargetName="Bd"
                                Value="{StaticResource Item.SelectedActive.Border}" />
                    </MultiTrigger>
                    <Trigger Property="IsEnabled"
                             Value="False">
                        <Setter Property="TextElement.Foreground"
                                TargetName="Bd"
                                Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Then it looks like this:

Working Template!

Upvotes: 5

Related Questions