Partager via

ToolBar ControlTemplate, exemple

  • Article

Mise à jour : novembre 2007

Les contrôles de Windows Presentation Foundation (WPF) disposent d'un ControlTemplate qui contient l'arborescence visuelle de ce contrôle. Vous pouvez modifier la structure et l'apparence d'un contrôle en modifiant le ControlTemplate de ce contrôle. Il est impossible de ne remplacer qu'une partie de l'arborescence visuelle d'un contrôle ; pour modifier l'arborescence visuelle d'un contrôle, vous devez affecter le nouveau ControlTemplate complet à la propriété Template de ce contrôle.

Cette rubrique montre le ControlTemplate du contrôle WPFToolBar.

Cette rubrique comprend les sections suivantes.

  • Composants requis
  • ToolBar ControlTemplate, exemple
  • Rubriques connexes

Composants requis

Pour exécuter les exemples de cette rubrique, vous devez savoir comment écrire des applications WPF. Pour plus d'informations, consultez Mise en route de Windows Presentation Foundation. Vous devez également savoir comment les styles sont utilisés dans WPF. Pour plus d'informations, consultez Application d'un style et création de modèles.

ToolBar ControlTemplate, exemple

Bien que cet exemple contienne tous les éléments définis dans le ControlTemplate d'un ToolBar par défaut, les valeurs spécifiques doivent être considérées comme des exemples.

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

L'exemple précédent utilise une ou plusieurs des ressources suivantes.

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

Pour l'exemple complet, consultez Style avec ControlTemplates, exemple.

Voir aussi

Concepts

Recommandations pour la conception de contrôles auxquels un style peut être appliqué

Autres ressources

Exemples de ControlTemplate