Share via

Beispiel für ein Expander-ControlTemplate

  • Artikel

Aktualisiert: November 2007

Steuerelemente in Windows Presentation Foundation (WPF) verfügen über ein ControlTemplate-Element, das die visuelle Struktur des Steuerelements enthält. Sie können die Struktur und die Darstellung eines Steuerelements ändern, indem Sie das ControlTemplate dieses Steuerelements ändern. Es gibt keine Möglichkeit, nur Teile der visuellen Struktur eines Steuerelements zu ersetzen. Um die visuelle Struktur eines Steuerelements zu ändern, muss die Template-Eigenschaft des Steuerelements auf dessen neues und vollständiges ControlTemplate festgelegt werden.

In diesem Thema wird das ControlTemplate des WPF-Expander-Steuerelements veranschaulicht.

Dieses Thema enthält folgende Abschnitte.

  • Vorbereitungsmaßnahmen
  • Beispiel für ein Expander-ControlTemplate
  • Verwandte Abschnitte

Vorbereitungsmaßnahmen

Um die Beispiele in diesem Thema ausführen zu können, sollten Sie wissen, wie WPF-Anwendungen geschrieben werden. Weitere Informationen finden Sie unter Erste Schritte mit Windows Presentation Foundation. Sie sollten ebenfalls mit der Verwendung von Stilen in WPF vertraut sein. Weitere Informationen finden Sie unter Erstellen von Formaten und Vorlagen.

Beispiel für ein Expander-ControlTemplate

Obwohl in diesem Beispiel alle Elemente enthalten sind, die im ControlTemplate von einem Expander standardmäßig definiert werden, sind die spezifischen Werte nur als Beispiele zu verstehen.

<ControlTemplate x:Key="ExpanderToggleButton" TargetType="ToggleButton">
  <Border
    Name="Border" 
    CornerRadius="2,0,0,0"
    Background="Transparent"
    BorderBrush="{StaticResource NormalBorderBrush}"
    BorderThickness="0,0,1,0">
    <Path 
      Name="Arrow"
      Fill="{StaticResource GlyphBrush}"
      HorizontalAlignment="Center"
      VerticalAlignment="Center"
      Data="M 0 0 L 4 4 L 8 0 Z"/>
  </Border>
  <ControlTemplate.Triggers>
    <Trigger Property="ToggleButton.IsMouseOver" Value="true">
      <Setter TargetName="Border" Property="Background"
              Value="{StaticResource DarkBrush}" />
    </Trigger>
    <Trigger Property="IsPressed" Value="true">
      <Setter TargetName="Border" Property="Background"
              Value="{StaticResource PressedBrush}" />
    </Trigger>
    <Trigger Property="IsChecked" Value="true">
      <Setter TargetName="Arrow" Property="Data"
              Value="M 0 4 L 4 0 L 8 4 Z" />
    </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}"/>
      <Setter TargetName="Arrow" Property="Fill"
              Value="{StaticResource DisabledForegroundBrush}" />
    </Trigger>
  </ControlTemplate.Triggers>
</ControlTemplate>

<Style TargetType="Expander">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Expander">
        <Grid>
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Name="ContentRow" Height="0"/>
          </Grid.RowDefinitions>
          <Border 
            Name="Border" 
            Grid.Row="0" 
            Background="{StaticResource LightBrush}"
            BorderBrush="{StaticResource NormalBorderBrush}"
            BorderThickness="1" 
            CornerRadius="2,2,0,0" >
            <Grid>
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="20" />
                <ColumnDefinition Width="*" />
              </Grid.ColumnDefinitions>
              <ToggleButton
                IsChecked="{Binding Path=IsExpanded,Mode=TwoWay,
                                    RelativeSource={RelativeSource TemplatedParent}}"
                OverridesDefaultStyle="True" 
                Template="{StaticResource ExpanderToggleButton}" 
                Background="{StaticResource NormalBrush}" />
              <ContentPresenter 
                Grid.Column="1"
                Margin="4" 
                ContentSource="Header" 
                RecognizesAccessKey="True" />
            </Grid>
          </Border>
          <Border 
            Name="Content" 
            Grid.Row="1" 
            Background="{StaticResource WindowBackgroundBrush}"
            BorderBrush="{StaticResource SolidBorderBrush}" 
            BorderThickness="1,0,1,1" 
            CornerRadius="0,0,2,2" >
            <ContentPresenter Margin="4" />
          </Border>
        </Grid>
        <ControlTemplate.Triggers>
          <Trigger Property="IsExpanded" Value="True">
            <Setter TargetName="ContentRow" Property="Height"
                    Value="{Binding ElementName=Content,Path=DesiredHeight}" />
          </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>

Im vorherigen Beispiel werden eine oder mehrere der folgenden Ressourcen verwendet.

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

Das vollständige Beispiel finden Sie unter Beispiel zum Formatieren mit ControlTemplates.

Siehe auch

Konzepte

Richtlinien zum Entwerfen formatierbarer Steuerelemente

Weitere Ressourcen

Beispiel für ControlTemplate