エキスパンダ ControlTemplate の例

[アーティクル]
09/17/2008

更新 : 2007 年 11 月

Windows Presentation Foundation (WPF) のコントロールには、そのコントロールのビジュアルツリーを含む ControlTemplate があります。コントロールの構造や外観を変更するには、そのコントロールの ControlTemplate を変更します。コントロールのビジュアルツリーの一部だけを置き換えることはできません。コントロールのビジュアルツリーを変更するには、コントロールの Template プロパティをその新しい完全な ControlTemplate に設定する必要があります。

このトピックでは、WPFExpander コントロールの ControlTemplate を示します。

このトピックには次のセクションが含まれています。

必要条件
Expander ControlTemplate の例
関連トピック

必要条件

このトピックの例を実行するには、WPF アプリケーションの作成方法を理解する必要があります。詳細については、「Windows Presentation Foundation の概要」を参照してください。また、WPF でスタイルがどのように使用されるかについても理解しておく必要があります。詳細については、「スタイルとテンプレート」を参照してください。

Expander ControlTemplate の例

この例には Expander の ControlTemplate に既定で定義されるすべての要素が含まれていますが、各値は単なる例と考えてください。

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

前の例では、次の 1 つ以上のリソースを使用しています。

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

サンプル全体については、「ControlTemplate を使用したスタイル設定のサンプル」を参照してください。

参照

概念

スタイルの設定が可能なコントロールを設計するためのガイドライン

その他の技術情報

ControlTemplate の例

次の方法で共有

エキスパンダ ControlTemplate の例

必要条件

Expander ControlTemplate の例

参照

概念

その他の技術情報

その他のリソース