通过

ToolBar ControlTemplate 示例

  • 项目

更新：2007 年 11 月

Windows Presentation Foundation (WPF) 中的控件有一个包含该控件可视化树的 ControlTemplate。可以通过修改某个控件的 ControlTemplate 来更改该控件的结构和外观。不能仅替换控件的可视化树的一部分；若要更改控件的可视化树，必须将该控件的 Template 属性设置为新的完整 ControlTemplate。

本主题演示 WPFToolBar 控件的 ControlTemplate。

本主题包括下列各节。

  • 先决条件
  • ToolBar ControlTemplate 示例
  • 相关主题

先决条件

若要运行本主题中的示例，应当了解如何编写 WPF 应用程序。有关更多信息，请参见 Windows Presentation Foundation 入门。您还应当了解如何在 WPF 中使用样式。有关更多信息，请参见样式设置和模板化。

ToolBar ControlTemplate 示例

尽管此示例包含默认情况下在 ToolBar 的 ControlTemplate 中定义的所有元素，但是您应当将其中的特定值视为示例值。

<Style x:Key="ToolBarButtonBaseStyle" TargetType="{x:Type ButtonBase}">
  <Setter Property="SnapsToDevicePixels" Value="true"/>
  <Setter Property="OverridesDefaultStyle" Value="true"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type ButtonBase}">
        <Border 
          x:Name="Border"  
          BorderThickness="1"
          Background="Transparent"
          BorderBrush="Transparent">
          <ContentPresenter 
            Margin="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            RecognizesAccessKey="True"/>
        </Border>
        <ControlTemplate.Triggers>
          <Trigger Property="IsKeyboardFocused" Value="true">
            <Setter TargetName="Border" Property="Background" Value="{StaticResource SelectedBackgroundBrush}" />
            <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource SolidBorderBrush}" />
          </Trigger>
          <Trigger Property="IsMouseOver" Value="true">
            <Setter TargetName="Border" Property="Background" Value="{StaticResource SelectedBackgroundBrush}" />
            <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource SolidBorderBrush}" />
          </Trigger>
          <Trigger Property="IsPressed" Value="true">
            <Setter TargetName="Border" Property="Background" Value="{StaticResource PressedBrush}" />
            <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource PressedBorderBrush}" />
          </Trigger>
          <Trigger Property="CheckBox.IsChecked" Value="true">
            <Setter TargetName="Border" Property="Background" Value="{StaticResource PressedBrush}" />
            <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource PressedBorderBrush}" />
          </Trigger>
          <Trigger Property="IsEnabled" Value="false">
            <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
            <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
            <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<Style x:Key="{x:Static ToolBar.ButtonStyleKey}" 
       BasedOn="{StaticResource ToolBarButtonBaseStyle}"
       TargetType="{x:Type Button}"/>
<Style x:Key="{x:Static ToolBar.ToggleButtonStyleKey}" 
       BasedOn="{StaticResource ToolBarButtonBaseStyle}"
       TargetType="{x:Type ToggleButton}"/>
<Style x:Key="{x:Static ToolBar.CheckBoxStyleKey}" 
       BasedOn="{StaticResource ToolBarButtonBaseStyle}"
       TargetType="{x:Type CheckBox}"/>
<Style x:Key="{x:Static ToolBar.RadioButtonStyleKey}"
       BasedOn="{StaticResource ToolBarButtonBaseStyle}"
       TargetType="{x:Type RadioButton}"/>

<Style x:Key="{x:Static ToolBar.TextBoxStyleKey}" TargetType="{x:Type TextBox}">
  <Setter Property="SnapsToDevicePixels" Value="True"/>
  <Setter Property="OverridesDefaultStyle" Value="True"/>
  <Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
  <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
  <Setter Property="AllowDrop" Value="true"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type TextBox}">
        <Border 
          Name="Border"
          Padding="2"
          Background="{StaticResource WindowBackgroundBrush}"
          BorderBrush="{StaticResource SolidBorderBrush}"
          BorderThickness="1" >
          <ScrollViewer Margin="0" x:Name="PART_ContentHost"/>
        </Border>
        <ControlTemplate.Triggers>
          <Trigger Property="IsEnabled" Value="False">
            <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}"/>
            <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBackgroundBrush}"/>
            <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<Style x:Key="ToolBarThumbStyle" TargetType="{x:Type Thumb}">
  <Setter Property="OverridesDefaultStyle" Value="true"/>
  <Setter Property="Cursor" Value="SizeAll"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type Thumb}">
        <Border Background="Transparent"
          SnapsToDevicePixels="True">
          <Rectangle Margin="0,2">
            <Rectangle.Fill>
              <DrawingBrush Viewport="0,0,4,4" 
                ViewportUnits="Absolute"
                Viewbox="0,0,8,8"
                ViewboxUnits="Absolute"
                TileMode="Tile">
                <DrawingBrush.Drawing>
                  <DrawingGroup>
                    <DrawingGroup.Children>
                      <GeometryDrawing Brush="#AAA"
                        Geometry="M 4 4 L 4 8 L 8 8 L 8 4 z"/>
                    </DrawingGroup.Children>
                  </DrawingGroup>
                </DrawingBrush.Drawing>
              </DrawingBrush>
            </Rectangle.Fill>
          </Rectangle>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<Style x:Key="ToolBarOverflowButtonStyle" TargetType="{x:Type ToggleButton}">
  <Setter Property="OverridesDefaultStyle" Value="true"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type ToggleButton}">
        <Border Name="Bd"
          CornerRadius="0,3,3,0"
          Background="Transparent"
          SnapsToDevicePixels="true">
          <Grid>
            <Path Name="Arrow"
              Fill="Black"
              VerticalAlignment="Bottom"
              Margin="2,3"
              Data="M -0.5 3 L 5.5 3 L 2.5 6 Z"/>
            <ContentPresenter/>
          </Grid>
        </Border>
        <ControlTemplate.Triggers>
          <Trigger Property="IsMouseOver" Value="true">
            <Setter TargetName="Bd" Property="Background" Value="{StaticResource DarkBrush}"/>
          </Trigger>
          <Trigger Property="IsKeyboardFocused" Value="true">
            <Setter TargetName="Bd" Property="Background" Value="{StaticResource DarkBrush}"/>
          </Trigger>
          <Trigger Property="IsChecked" Value="true">
            <Setter TargetName="Bd" Property="Background" Value="{StaticResource DarkBrush}"/>
          </Trigger>
          <Trigger Property="IsEnabled" Value="false">
            <Setter TargetName="Arrow" Property="Fill" Value="#AAA"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<Style x:Key="{x:Type ToolBar}" TargetType="{x:Type ToolBar}">
  <Setter Property="SnapsToDevicePixels" Value="true"/>
  <Setter Property="OverridesDefaultStyle" Value="true"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type ToolBar}">
        <Border x:Name="Border"  
          CornerRadius="2" 
          BorderThickness="1"
          Background="{StaticResource LightBrush}"
          BorderBrush="{StaticResource NormalBorderBrush}">
          <DockPanel >
            <ToggleButton DockPanel.Dock="Right"
              IsEnabled="{TemplateBinding HasOverflowItems}"
              Style="{StaticResource ToolBarOverflowButtonStyle}"
              IsChecked="{Binding Path=IsOverflowOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
              ClickMode="Press">
              <Popup x:Name="OverflowPopup"
                AllowsTransparency="true"
                Placement="Bottom"
                IsOpen="{Binding Path=IsOverflowOpen,RelativeSource={RelativeSource TemplatedParent}}"
                StaysOpen="false"
                Focusable="false"
                PopupAnimation="Slide">
                <Border x:Name="DropDownBorder"
                  Background="{StaticResource WindowBackgroundBrush}"
                  BorderThickness="1"
                  BorderBrush="{StaticResource SolidBorderBrush}">
                  <ToolBarOverflowPanel x:Name="PART_ToolBarOverflowPanel"
                    Margin="2"
                    WrapWidth="200"
                    Focusable="true" 
                    FocusVisualStyle="{x:Null}"
                    KeyboardNavigation.TabNavigation="Cycle"
                    KeyboardNavigation.DirectionalNavigation="Cycle"/>
                </Border>
              </Popup>
            </ToggleButton>

            <Thumb x:Name="ToolBarThumb"
              Style="{StaticResource ToolBarThumbStyle}"
              Width="10"/>
            <ToolBarPanel x:Name="PART_ToolBarPanel"
              IsItemsHost="true"
              Margin="0,1,2,2"/>
          </DockPanel>
        </Border>
        <ControlTemplate.Triggers>
          <Trigger Property="IsOverflowOpen" Value="true">
            <Setter TargetName="ToolBarThumb" Property="IsEnabled" Value="false"/>
          </Trigger>
          <Trigger Property="ToolBarTray.IsLocked" Value="true">
            <Setter TargetName="ToolBarThumb" Property="Visibility" Value="Collapsed"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<Style x:Key="{x:Type ToolBarTray}" TargetType="{x:Type ToolBarTray}" >
  <Setter Property="Background" Value="{StaticResource HorizontalLightBrush}"/>
</Style>

上面的示例使用下面的一个或多个资源。

<!-- Fill Brushes -->

<LinearGradientBrush x:Key="NormalBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#FFF" Offset="0.0"/>
      <GradientStop Color="#CCC" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="HorizontalNormalBrush" StartPoint="0,0" EndPoint="1,0">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#FFF" Offset="0.0"/>
      <GradientStop Color="#CCC" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="LightBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#FFF" Offset="0.0"/>
      <GradientStop Color="#EEE" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="HorizontalLightBrush" StartPoint="0,0" EndPoint="1,0">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#FFF" Offset="0.0"/>
      <GradientStop Color="#EEE" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DarkBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#FFF" Offset="0.0"/>
      <GradientStop Color="#AAA" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="PressedBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#BBB" Offset="0.0"/>
      <GradientStop Color="#EEE" Offset="0.1"/>
      <GradientStop Color="#EEE" Offset="0.9"/>
      <GradientStop Color="#FFF" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />

<SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE" />

<SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF" />

<SolidColorBrush x:Key="SelectedBackgroundBrush" Color="#DDD" />

<!-- Border Brushes -->

<LinearGradientBrush x:Key="NormalBorderBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#CCC" Offset="0.0"/>
      <GradientStop Color="#444" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="HorizontalNormalBorderBrush" StartPoint="0,0" EndPoint="1,0">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#CCC" Offset="0.0"/>
      <GradientStop Color="#444" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultedBorderBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#777" Offset="0.0"/>
      <GradientStop Color="#000" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="PressedBorderBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#444" Offset="0.0"/>
      <GradientStop Color="#888" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA" />

<SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />

<SolidColorBrush x:Key="LightBorderBrush" Color="#AAA" />

<!-- Miscellaneous Brushes -->
<SolidColorBrush x:Key="GlyphBrush" Color="#444" />

<SolidColorBrush x:Key="LightColorBrush" Color="#DDD" />

有关完整示例，请参见 使用 ControlTemplates 设置样式的示例。

请参见

概念

可样式化控件的设计准则

其他资源

ControlTemplate 示例