如何设计这个 ListViewItem

Question

我希望我的ListViewItem 看起来像这样。正如您所看到的，当ListViewItem 被选中/具有焦点时，Border 应该会改变颜色。

主要问题是我不能在ControlTemplate 中的ContenPresenter 周围放置Border，因为带有“描述”-Binding 的TextBox 也将在Border 内.但我只希望 TextBox 和 Icon 位于更改颜色的 Border 内部，而不是描述（“Nachname”、“Vorname”）。

这是我目前拥有的 XAML。我不知道如何更改 ControlTemplate 中的边框：

<ListView x:Name="SearchFields" Grid.Row="0" Grid.Column="0" ItemsSource="{Binding CustomerSearchFields}" SelectedItem="{Binding selectedSearchField, UpdateSourceTrigger=LostFocus}" Style="{StaticResource MaterialDropShadowStyle}" 
              BorderThickness="0,0,2,0" Padding="24,24,24,0" HorizontalContentAlignment="Stretch" helper:EnterKeyTraversal.IsEnabled="True" KeyboardNavigation.TabNavigation="Cycle" FontFamily="{StaticResource DefaultFontFamily}"
              Background="{StaticResource ColorLightGray2}">
        <ListView.Resources>                
            <DataTemplate DataType="{x:Type model:CustomerSeachFieldViewModel}">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="48" />
                    </Grid.RowDefinitions>

                    <TextBlock Grid.Row="0" Text="{Binding Description}" FontSize="{StaticResource FontSizeSmall}" FontWeight="SemiBold" Foreground="{StaticResource ColorDarkGray}" Margin="0,0,0,4" />
                    <Border x:Name="PART_Border" Grid.Row="1" BorderThickness="1" BorderBrush="{StaticResource ColorGray}">
                        <Grid Background="White">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="48" />
                            </Grid.ColumnDefinitions>

                            <TextBox Grid.Column="0" Text="{Binding SearchText}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" FontSize="{StaticResource FontSizeNormal}" Padding="12,15" BorderThickness="0" />
                            <Border Grid.Column="1" Background="{StaticResource ColorLightGray2}" Margin="8">
                                <ctrl:IconViewbox IconData="{StaticResource IconPathSearch}" IconSize="16" IsTabStop="False" />
                            </Border>                     
                        </Grid>
                    </Border>                        
                </Grid>                    
            </DataTemplate>
        </ListView.Resources>            
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">                    
                <Setter Property="IsTabStop" Value="False" />
                <Setter Property="Margin" Value="0,0,0,24" />                    
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>                                
                            <ContentPresenter Content="{Binding}" />                                
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="IsKeyboardFocusWithin" Value="True">
                        <Setter Property="IsSelected" Value="True" />
                    </Trigger>
                    <Trigger Property="IsSelected" Value="True">
                        <Trigger.Setters>                                
                            <Setter Property="BorderBrush" Value="Fuchsia" />
                        </Trigger.Setters>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ListView.ItemContainerStyle>
    </ListView>

Answer 1

您可以将Trigger 添加到您的Border，命名为PART_Border，如下所示：

<Border x:Name="PART_Border" Grid.Row="1" BorderThickness="1" >
                    <Border.Style>
                        <Style TargetType="Border">
                            <Setter Property="BorderBrush" Value="DarkGray" />
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListViewItem}}}"
                                             Value="True" >
                                    <Setter Property="BorderBrush" Value="Black"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Border.Style>
                    <Grid Background="White">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="48" />
                        </Grid.ColumnDefinitions>

                        <TextBox Grid.Column="0" 
                                 Text="{Binding SearchText}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" FontSize="15" Padding="12,15" BorderThickness="0" />
                        <Border Grid.Column="1" Background="Gray" Margin="8">
                            <Rectangle Width="20" Height="20" />
                        </Border>                     
                    </Grid>
                </Border>

请注意，为了测试我的代码，我用标准颜色替换了一些映射到代码中某些颜色的 StaticResource。

出于同样的原因，我还将图标替换为Rectangle。

Answer 2

试试你的IsSelected 触发器：

<Trigger Property="IsSelected" Value="True">
        <Setter TargetName="PART_Border" Property="BorderBrush" Value="Fuchsia" />
        <Setter TargetName="PART_Border" Property="BorderThickness" Value="1" />
</Trigger>

Answer 3

您可以将Style 与DataTrigger 绑定到父ListViewItem 的IsSelected 属性添加到您的DataTemplate 中的Border：

<Border x:Name="PART_Border" Grid.Row="1" BorderThickness="1">
    <Border.Style>
        <Style TargetType="Border">
            <Setter Property="BorderBrush" Value="{StaticResource ColorGray}" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListViewItem}}"
                             Value="True">
                    <Setter Property="BorderBrush" Value="Red" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Border.Style>
</Border>

请注意，您需要使用Style 设置器为DataTrigger 设置属性的默认值（{StaticResource ColorGray}），以便在选择ListViewItem 时能够设置属性。