[WPF] 如何在常规控件上使用 ToolBar 的控件样式

为建立中文知识库加块砖　　　　　　　　——中科大胡不归

0. 前言

微软对 ToolBar 的控件样式做了很好的优化，比如 CheckBox 这样的，省去勾选框，整体选中的效果很赞。

对比是展示选中 CheckBox2 和 RadioButton3 的样式差异。虽然有类似 ToggleButton 这样的控件，但是某些场景下我们觉得能用 ToolBar 的样式也挺好的。

学习WPF: 第四个月。

1. 使用 ToolBar 的控件样式

ToolBar 定义 ResourceKey 对象来指定 ToolBar 中控件的样式，所以我们使用

Style="{StaticResource {x:Static ToolBar.CheckBoxStyleKey}}"

来设置常规控件的样式，改为如下:

<CheckBox Style="{StaticResource {x:Static ToolBar.CheckBoxStyleKey}}">
     <TextBlock Text="CheckBox 1" />
</CheckBox>
<CheckBox Content="CheckBox 2" />

<RadioButton Style="{StaticResource {x:Static ToolBar.RadioButtonStyleKey}}">One</RadioButton>
<RadioButton Style="{StaticResource {x:Static ToolBar.RadioButtonStyleKey}}">Two</RadioButton>
<RadioButton>Three</RadioButton>

修改效果：

可以 CheckBox 1 和 CheckBox 2 的样式差异。

2. 设置 ToolBar 上的控件的样式

若要设置 ToolBar 中的控件的样式，请将样式的 x:key 属性设置为 ToolBar中定义的 ResourceKey。
ToolBar 定义以下 ResourceKey 对象：

• ButtonStyleKey
• CheckBoxStyleKey
• ComboBoxStyleKey
• MenuStyleKey
• RadioButtonStyleKey
• SeparatorStyleKey
• TextBoxStyleKey
• ToggleButtonStyleKey

样式定义：

<Window.Resources>

  <!--Styles for controls in a toolbar.-->
  <Style x:Key="{x:Static ToolBar.CheckBoxStyleKey}" TargetType="CheckBox">
    <Setter Property="Foreground" Value="DarkSlateBlue"/>
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
  </Style>

  <Style x:Key="{x:Static ToolBar.RadioButtonStyleKey}" TargetType="RadioButton">
    <Setter Property="Background" Value="LightSteelBlue"/>
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
  </Style>

</Window.Resources>

控件代码：

<ToolBar>
    <Button Content="Button 1" />
    <Button Content="Button 2" />
    <Separator />
    <CheckBox Content="CheckBox 1" />
    <CheckBox Content="CheckBox 2" />
    <Separator />
    <RadioButton>One</RadioButton>
    <RadioButton>Two</RadioButton>
...
</ToolBar>

效果如下:

这只是简单的效果演示，告诉你方法，修行在个人。

参考文章：

1. 如何：设置 ToolBar 上的控件的样式