如何设计这个ListViewItem

Question

我希望我的 ListViewItem 看起来像这样。如您所见，当 ListViewItem 为 selected/has 焦点时，Border 应该改变颜色。

主要问题是我无法在 ControlTemplate 中的 ContenPresenter 周围放置 Border，因为 TextBox 也带有“描述”- Binding 将在 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

试试你的 IsSelected 触发器：

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

Answer 2

您可以将 Trigger 添加到名为 PART_Border 的 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 3

您可以添加一个 Style 和一个 DataTrigger 绑定到父 ListViewItem 的 IsSelected 属性到 Border在你的 DataTemplate:

<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 setter 设置属性 ({StaticResource ColorGray}) 的默认值，以便 DataTrigger 能够选择 ListViewItem 时设置属性。

如何设计这个ListViewItem

How to design this ListViewItem

c#

wpf

xaml

datatemplate

controltemplate