如何将参数传递给 DataTrigger?
How can I pass a parameter to a DataTrigger?
我有一个要通过 ItemsControl
显示的内容列表,其中每个项目基本上都是一张可以点击的卡片。有没有一种方法可以将参数传递给 DataTrigger
以显示卡片是否已被点击,如果被点击,则将 Background
设置为另一种颜色?
[...] show whether or not a card has been clicked and if it is clicked [...]
您创建了卡片视图并希望它们可供选择。 ItemsControl
不支持选择,但有一个名为 Selector
that derives from ItemsControl
, which is the abstract base type for items controls that need selection. Its derivatives include ListBox
and ListView
的控件,它带有开箱即用的选择和突出显示功能。也就是说,不用重新发明轮子,已经有更合适的控件满足你的要求了。
派生自 Selector
的类型包含项目容器 SelectedIndex
, SelectedItem
or SelectedValue
, which makes it easy for you to bind them and create triggers. There is also an attached property IsSelected
的依赖属性,这正是您需要更改 Background
或任何其他 属性 的内容,具体取决于单击或选择的项目。
下面我将向您展示如何自定义ListBox
项的外观。您可以对 ListView.
执行相同的操作 您可以提取 ListBoxItem
using Blend or Visual Studio.
的默认样式和模板
正如您在下面看到的,有几个画笔、焦点视觉对象以及带有控件模板和触发器的样式。调整此样式以满足您所需的设计。查找绑定 IsSelected
属性.
的触发器
<SolidColorBrush x:Key="Item.MouseOver.Background" Color="#1F26A0DA"/>
<SolidColorBrush x:Key="Item.MouseOver.Border" Color="#a826A0Da"/>
<SolidColorBrush x:Key="Item.SelectedActive.Background" Color="#3D26A0DA"/>
<SolidColorBrush x:Key="Item.SelectedActive.Border" Color="#FF26A0DA"/>
<SolidColorBrush x:Key="Item.SelectedInactive.Background" Color="#3DDADADA"/>
<SolidColorBrush x:Key="Item.SelectedInactive.Border" Color="#FFDADADA"/>
<Style x:Key="FocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2" StrokeDashArray="1 2" SnapsToDevicePixels="true" StrokeThickness="1" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ListBoxItemContainerStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Padding" Value="4,1"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.MouseOver.Background}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.MouseOver.Border}"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="False"/>
<Condition Property="IsSelected" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.SelectedInactive.Background}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedInactive.Border}"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="True"/>
<Condition Property="IsSelected" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.SelectedActive.Background}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedActive.Border}"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
将这些资源移动到您要使用它们的控件范围内的资源字典中,或者简单地将它们复制到应用程序资源中以使其全局可用。要应用样式,您有两个选择。
使用 x:Key
并在每个 ListBox
.
中将它们引用为 ItemContainerStyle
<ListBox ItemContainerStyle="{DynamicResource ListBoxItemContainerStyle}" .../>
通过删除 x:Key
使样式 隐式 。然后它将应用于包含它的资源字典范围内的所有ListBoxItem
。
<Style TargetType="{x:Type ListBoxItem}">
我有一个要通过 ItemsControl
显示的内容列表,其中每个项目基本上都是一张可以点击的卡片。有没有一种方法可以将参数传递给 DataTrigger
以显示卡片是否已被点击,如果被点击,则将 Background
设置为另一种颜色?
[...] show whether or not a card has been clicked and if it is clicked [...]
您创建了卡片视图并希望它们可供选择。 ItemsControl
不支持选择,但有一个名为 Selector
that derives from ItemsControl
, which is the abstract base type for items controls that need selection. Its derivatives include ListBox
and ListView
的控件,它带有开箱即用的选择和突出显示功能。也就是说,不用重新发明轮子,已经有更合适的控件满足你的要求了。
派生自 Selector
的类型包含项目容器 SelectedIndex
, SelectedItem
or SelectedValue
, which makes it easy for you to bind them and create triggers. There is also an attached property IsSelected
的依赖属性,这正是您需要更改 Background
或任何其他 属性 的内容,具体取决于单击或选择的项目。
下面我将向您展示如何自定义ListBox
项的外观。您可以对 ListView.
执行相同的操作 您可以提取 ListBoxItem
using Blend or Visual Studio.
正如您在下面看到的,有几个画笔、焦点视觉对象以及带有控件模板和触发器的样式。调整此样式以满足您所需的设计。查找绑定 IsSelected
属性.
<SolidColorBrush x:Key="Item.MouseOver.Background" Color="#1F26A0DA"/>
<SolidColorBrush x:Key="Item.MouseOver.Border" Color="#a826A0Da"/>
<SolidColorBrush x:Key="Item.SelectedActive.Background" Color="#3D26A0DA"/>
<SolidColorBrush x:Key="Item.SelectedActive.Border" Color="#FF26A0DA"/>
<SolidColorBrush x:Key="Item.SelectedInactive.Background" Color="#3DDADADA"/>
<SolidColorBrush x:Key="Item.SelectedInactive.Border" Color="#FFDADADA"/>
<Style x:Key="FocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2" StrokeDashArray="1 2" SnapsToDevicePixels="true" StrokeThickness="1" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ListBoxItemContainerStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Padding" Value="4,1"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.MouseOver.Background}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.MouseOver.Border}"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="False"/>
<Condition Property="IsSelected" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.SelectedInactive.Background}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedInactive.Border}"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="True"/>
<Condition Property="IsSelected" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.SelectedActive.Background}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedActive.Border}"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
将这些资源移动到您要使用它们的控件范围内的资源字典中,或者简单地将它们复制到应用程序资源中以使其全局可用。要应用样式,您有两个选择。
使用
中将它们引用为x:Key
并在每个ListBox
.ItemContainerStyle
<ListBox ItemContainerStyle="{DynamicResource ListBoxItemContainerStyle}" .../>
通过删除
x:Key
使样式 隐式 。然后它将应用于包含它的资源字典范围内的所有ListBoxItem
。<Style TargetType="{x:Type ListBoxItem}">