[英]Binding Data to Button Style with DataTrigger
我正在使用 WPF 构建一个菜单,但我想简化创建新样式的代码。 目前,菜单运行良好:
<Button Name="btnMenu1" Grid.Row="0" Content="Button One" Click="BtnMenu1_Click">
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<DataTrigger Binding="{Binding [0].Selected}" Value="True">
<Setter Property="Foreground" Value="Yellow" />
</DataTrigger>
<DataTrigger Binding="{Binding [0].Selected}" Value="False">
<Setter Property="Foreground" Value="Blue" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
<Button Name="btnMenu2" Grid.Row="1" Content="Button Two" Click="BtnMenu2_Click">
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<DataTrigger Binding="{Binding [1].Selected}" Value="True">
<Setter Property="Foreground" Value="Yellow" />
</DataTrigger>
<DataTrigger Binding="{Binding [1].Selected}" Value="False">
<Setter Property="Foreground" Value="Blue" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
想象一下,我需要在菜单中添加 10 或 15 个按钮,你能想象代码量吗? 我的想法是简化代码:
<Button Name="btnMenu1" Grid.Row="0" Style="{StaticResource StyleButtonMenu}" Content="Button One" Click="BtnMenu1_Click"/>
<Button Name="btnMenu2" Grid.Row="1" Style="{StaticResource StyleButtonMenu}" Content="Button Two" Click="BtnMenu2_Click"/>
<Button Name="btnMenu3" Grid.Row="2" Style="{StaticResource StyleButtonMenu}" Content="Button Three" Click="BtnMenu3_Click"/>
<Button Name="btnMenu4" Grid.Row="3" Style="{StaticResource StyleButtonMenu}" Content="Button Four" Click="BtnMenu4_Click"/>
<Button Name="btnMenu5" Grid.Row="4" Style="{StaticResource StyleButtonMenu}" Content="Button Five" Click="BtnMenu5_Click"/>
代码风格可能是这样的:
<Style x:Key="StyleButtonMenu" TargetType="Button">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Cursor" Value="Hand" />
<Style.Triggers>
<DataTrigger Binding="{Binding Selected}" Value="True">
<Setter Property="Foreground" Value="Yellow"/>
</DataTrigger>
<DataTrigger Binding="{Binding Selected}" Value="False">
<Setter Property="Foreground" Value="Blue"/>
</DataTrigger>
</Style.Triggers>
</Style>
我的问题是:如何在DataTrigger
中使用Binding
来处理Selected
属性? 我有一个带有属性的List
,当某些属性发生变化时,我需要更新 UI。 正如我在顶部所说,代码运行良好,我只想创建一个通用样式并在DataTrigger
中处理绑定。
对于您漂亮的 static 示例,您可以使用DataTrigger
以您的样式绑定Tag
。
<Style x:Key="StyleButtonMenu" TargetType="Button">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Foreground" Value="Blue"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Tag.Selected, RelativeSource={RelativeSource Self}}" Value="True">
<Setter Property="Foreground" Value="Yellow"/>
</DataTrigger>
</Style.Triggers>
</Style>
然后,您可以将具体的数据上下文绑定到每个按钮的Tag
。
<Button Name="btnMenu1" Grid.Row="0" Tag="{Binding [0]}" Style="{StaticResource StyleButtonMenu}" Content="Button One" Click="BtnMenu1_Click"/>
<Button Name="btnMenu2" Grid.Row="1" Tag="{Binding [1]}" Style="{StaticResource StyleButtonMenu}" Content="Button Two" Click="BtnMenu2_Click"/>
<Button Name="btnMenu3" Grid.Row="2" Tag="{Binding [2]}" Style="{StaticResource StyleButtonMenu}" Content="Button Three" Click="BtnMenu3_Click"/>
<Button Name="btnMenu4" Grid.Row="3" Tag="{Binding [3]}" Style="{StaticResource StyleButtonMenu}" Content="Button Four" Click="BtnMenu4_Click"/>
<Button Name="btnMenu5" Grid.Row="4" Tag="{Binding [4]}" Style="{StaticResource StyleButtonMenu}" Content="Button Five" Click="BtnMenu5_Click"/>
但是,有更好的方法。 每当您尝试显示数据项的集合时,请考虑使用ItemsControl
或任何适合您的用例的派生类型。 在这里,您可以将ItemsControl
与数据模板一起使用,因为您不需要选择或任何特殊的东西。
<Style x:Key="MenuButtonStyle" TargetType="Button">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Foreground" Value="Blue"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Selected}" Value="True">
<Setter Property="Foreground" Value="Yellow"/>
</DataTrigger>
</Style.Triggers>
</Style>
<DataTemplate x:Key="MenuItemTemplate">
<Button Style="{StaticResource MenuButtonStyle}"
Content="{Binding Name}"
Command="{Binding DoSomething}"
CommandParameter="{Binding}">
</Button>
</DataTemplate>
此数据模板假定您的菜单项数据类型包含来自您问题的Name
、 DoSomething
和Selected
属性。 根据您的要求, DoSomething
命令也可能在父数据上下文中定义。 此命令将处理按钮单击。
您现在可以将项目集合(此处为MenuItems
)绑定到具有上述数据模板的ItemsControl
,而不是带有硬编码按钮的Grid
。
<ItemsControl ItemsSource="{Binding MenuItems}"
ItemTemplate="{StaticResource MenuItemTemplate}"/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.