[英]How do I change a controls background on my UserControl when the item is selected
So I have this ListView which has a DataTemplate of my UserContol because I wanted a custom design for my ListView and it looks like this所以我有这个 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 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>
But there is a border inside my usercontrol thats 10px wide with the name SmallBorder.但是我的用户控件中有一个 10 像素宽的边框,名称为 SmallBorder。 I want to change the color of that to green when the item is selected but I have no idea how to access that property
我想在选择项目时将其颜色更改为绿色,但我不知道如何访问该属性
My UserControl我的用户控件
<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>
So how do I change the color of SmallBorder
when an item is selected and then when it's not selected it turns transparent?那么如何在选择项目时更改
SmallBorder
的颜色,然后在未选择项目时变为透明?
The ViewModel, which is the DataContext of you usercontrol, should expose a property like IsSelected, then you can add an style with a DataTrigger that reacts to a change in this property.作为用户控件的 DataContext 的 ViewModel 应该公开一个类似 IsSelected 的属性,然后您可以添加一个带有 DataTrigger 的样式,该样式对该属性的更改做出反应。
EDIT:编辑:
Declare an style for the border itself an access it as an StaticResource: It could be placed in a ResourceDictionary, within YourUserControl.Resources or inline with the Border control declaration:为边框本身声明一种样式,并将其作为静态资源访问:它可以放置在 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>
And then your UserControl would be:然后你的 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>
Note that now you don't need to set the name for the Border.请注意,现在您不需要为 Border 设置名称。
A Border
is invisible unless there is something in it, but you could replace the Border
with a Grid
and use a Style
with a DataTrigger
that binds to the IsSelected
property:一个
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.