WPF XAML 列表框选定项边框颜色

Posted 2023-04-12

【中文标题】WPF XAML 列表框选定项边框颜色

【英文标题】：WPF XAML listbox selected item border color

【发布时间】：2018-10-23 17:16:02

【问题描述】：

我已经实现了一些列表框，其中包含边框和此边框中的网格。

<Style x:Key="SelectedHiglightStyle"
       TargetType="x:Type ListBoxItem"
       BasedOn="StaticResource MaterialDesignListBoxItem">
    <Style.Resources>
        <SolidColorBrush x:Key="x:Static SystemColors.HighlightBrushKey"
                         Color="Transparent" />
        <SolidColorBrush x:Key="x:Static SystemColors.ControlBrushKey"
                         Color="Transparent" />
    </Style.Resources>
    <Style.Triggers>
        <Trigger Property="IsSelected"
                 Value="True">
            <Setter Property="Background"
                    Value="#316308" />
            <Setter Property="Opacity"
                    Value="0.8" />
        </Trigger>
    </Style.Triggers>
</Style>

<ListBox IsSynchronizedWithCurrentItem="True"
         HorizontalAlignment="Stretch"
         VerticalAlignment="Stretch"
         Grid.Row="3"
         ScrollViewer.CanContentScroll="False"
         Style="StaticResource MaterialDesignListBox"
         ItemsSource="Binding Devices"
         SelectedItem="Binding SelectedDevice, Mode=TwoWay, 
         UpdateSourceTrigger=PropertyChanged"
         ItemContainerStyle="StaticResource SelectedHiglightStyle">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Border>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>

                    <Grid Grid.Column="0">
                        <Rectangle Width="35"
                                   Height="35"
                                   Margin="5"
                                   HorizontalAlignment="Left"
                                   OpacityMask="DynamicResource DashboardDeviceLogo">
                                <Rectangle.Fill>
                    ................
                        <Grid Grid.Column="1">
                            <StackPanel>
                                <TextBlock Text="lex:Loc DeviceName"
                                           Margin="0,4,0,2" />
                                <TextBlock x:Name="tbDeviceName"
                                           Text="Binding Device.Name"
                                           FontSize="10" />
                    ................

如何更改所选项目边框的颜色？每个项目都有自己的视图模型。有没有比通过 Messanger 广播消息更简单的方法（我正在使用 MVVM Light），在所有DeviceViewModel's 中捕获它，比较设备的 ID，然后从视图模型绑定颜色？

【问题讨论】：

最好改变容器的背景，而不是项目本身。你已经有 ItemContainerStyle 可疑名称 SelectedHiglightStyle 根据名称，应该做类似的事情。

【参考方案1】：

您可以定义一个Style 和一个绑定到父ListBoxItem 容器的IsSelected 属性的DataTrigger：

<ListBox.ItemTemplate>
    <DataTemplate>
        <Border>
            <Border.Style>
                <Style TargetType="Border">
                    <Setter Property="BorderThickness" Value="2" />
                    <Setter Property="BorderBrush" Value="Black" />
                    <Style.Triggers>
                        <DataTrigger Binding="Binding IsSelected, RelativeSource=RelativeSource AncestorType=ListBoxItem"
                                                 Value="True">
                            <Setter Property="BorderBrush" Value="Red" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
            <Grid>
                ...
            </Grid>
        </Border>
    </DataTemplate>
</ListBox.ItemTemplate>

Style 应用于ItemTemplate 中的Border 元素。

【讨论】：

工作。谢谢:)

【参考方案2】：

这里是最简单的方法。

如果您只需要更改选择边框，请在 listboxitem 的样式触发器部分中编写此内容

 <Trigger Property="IsSelected" Value="True">
        <!--your code...-->
        <Setter Property="BorderBrush"
                Value="Red"/>
        <Setter Property="BorderThickness" Value="1"/>
 </Trigger>

并编辑您的数据模板，将您的边框绑定到边框样式的设置器和边框厚度

 <ListBox.ItemTemplate>
    <DataTemplate>
        <Border BorderBrush="TemplateBinding BorderBrush" BorderThickness="TemplateBinding BorderThickness">...

我已经编辑了我的答案，因为当我第一次阅读这个问题时，我认为您需要为每种类型的数据使用不同的边框笔刷。但是你的情况要容易得多