Ejemplo de ControlTemplate de ToolBar

Artículo
10/07/2008

Actualización: noviembre 2007

Los controles de Windows Presentation Foundation (WPF) tienen un objeto ControlTemplate que contiene el árbol visual de ese control. Puede cambiar la estructura y la apariencia de un control si modifica la ControlTemplate de ese control. No existe ningún modo de reemplazar únicamente una parte del árbol visual de un control; para modificar el árbol visual de un control, debe establecer la propiedad Template del control en su nuevo y completo objeto ControlTemplate.

En este tema se muestra el objeto ControlTemplate del control ToolBar de WPF.

Este tema contiene las secciones siguientes.

Requisitos previos
Ejemplo de ControlTemplate de ToolBar
Temas relacionados

Requisitos previos

Para ejecutar los ejemplos de este tema, debe saber escribir aplicaciones de WPF. Para obtener más información, consulte Información general sobre Windows Presentation Foundation. También debe saber cómo se usan los estilos en WPF. Para obtener más información, consulte Aplicar estilos y plantillas.

Aunque este ejemplo contiene todos los elementos definidos en el objeto ControlTemplate de un objeto ToolBar de manera predeterminada, los valores específicos deben tomarse como ejemplos.

<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>

En el ejemplo anterior se usan uno o más de los siguientes recursos.

<!-- 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" />

Para obtener el ejemplo completo, vea Ejemplo Styling with ControlTemplates.

Vea también

Conceptos

Instrucciones para el diseño de controles con estilos

Otros recursos

Ejemplos de ControlTemplate

Ejemplo de ControlTemplate de ToolBar

Requisitos previos