选择项目时如何更改 UserControl 上的控件背景

Question

所以我有这个 ListView，它有我的 UserContol 的 DataTemplate 因为我想为我的 ListView 定制设计，它看起来像这样

<ListView x:Name="LeftMenuListView"
          ItemsSource="{Binding MenuItems}"
          SelectedItem="{Binding SelectedMenuItem}"
          BorderThickness="0"
          Width="255">
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <local:MenuItemControl/>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Super simple, now when an Item is selected the entire thing changes color which I want it looks great imo

<Style TargetType="ListViewItem">
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Border
                        Name="Border"
                        BorderThickness="0">
                        <ContentPresenter />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter TargetName="Border" Property="Background"
                                    Value="#444444"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

但是我的用户控件中有一个 10 像素宽的边框，名称为 SmallBorder。 我想在选择项目时将其颜色更改为绿色，但我不知道如何访问该属性

我的用户控件

<Grid Background="Transparent">
    <TextBlock Text="{Binding Name}"
               VerticalAlignment="Center"
               Margin="20,0,0,0"
               Foreground="#9e9e9e"
               FontFamily="Tahoma"/>

    <Border Width="10"
            HorizontalAlignment="Left"
            x:Name="SmallBorder"/>
</Grid>

那么如何在选择项目时更改SmallBorder的颜色，然后在未选择项目时变为透明？

Answer 1

作为用户控件的 DataContext 的 ViewModel 应该公开一个类似 IsSelected 的属性，然后您可以添加一个带有 DataTrigger 的样式，该样式对该属性的更改做出反应。

编辑：

为边框本身声明一种样式，并将其作为静态资源访问：它可以放置在 ResourceDictionary 中，在 YourUserControl.Resources 中或与 Border 控件声明内联：

<Style TargetType={x:Type Border} x:Key=SelectedBorderStyle>
    <Style.Triggers>
       <DataTrigger Binding="{Binding IsSelected}" Value="True">
           <Setter Property="BorderBrush" Value="Green" />
       </DataTrigger>
    </Style.Triggers>
</Style>

然后你的 UserControl 将是：

<Grid Background="Transparent">
    <TextBlock Text="{Binding Name}"
               VerticalAlignment="Center"
               Margin="20,0,0,0"
               Foreground="#9e9e9e"
               FontFamily="Tahoma"/>

    <Border Width="10"
            Style={StaticResource SelectedBorderStyle}
            HorizontalAlignment="Left"/>
</Grid>

请注意，现在您不需要为 Border 设置名称。

Answer 2

一个Border是不可见的，除非有东西在里面，但你可以更换Border与Grid并使用Style与DataTrigger结合到IsSelected属性：

<Grid Background="Transparent">
    <TextBlock Text="{Binding Name}"
               VerticalAlignment="Center"
               Margin="20,0,0,0"
               Foreground="#9e9e9e"
               FontFamily="Tahoma"/>

    <Grid Width="10"
          HorizontalAlignment="Left"
          x:Name="SmallBorder">
        <Grid.Style>
            <Style TargetType="Grid">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListViewItem}}" Value="True">
                        <Setter Property="Background" Value="Red" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Grid.Style>
    </Grid>
</Grid>