エクスパンダーのスタイルとテンプレート

  • [アーティクル]

このトピックでは、Expander コントロールのスタイルとテンプレートについて説明します。 ControlTemplateの既定値を変更して外観を制御します。 詳細については、「コントロールのためにテンプレートを作成する」をご覧ください。

Expander のパーツ

Expander コントロールに名前付きパーツはありません。

Expander の状態

次の表は、Expander コントロールの表示状態の一覧を示します。

VisualState 名 VisualStateGroup 名 説明
標準 CommonStates 既定の状態です。
MouseOver CommonStates マウス ポインターがコントロール上に配置されます。
無効 CommonStates コントロールが無効になっています。
フォーカスされている FocusStates コントロールにフォーカスがあります。
フォーカスされていない FocusStates コントロールにフォーカスがありません。
[展開済み] ExpansionStates コントロールが展開されています。
Collapsed ExpansionStates コントロールが展開されていません。
ExpandDown ExpandDirectionStates コントロールが下方向に展開しています。
ExpandUp ExpandDirectionStates コントロールが上方向に展開しています。
ExpandLeft ExpandDirectionStates コントロールが左方向に展開しています。
ExpandRight ExpandDirectionStates コントロールが右方向に展開しています。
有効 ValidationStates このコントロールで Validation クラスを使用し、Validation.HasError 添付プロパティは false です。
InvalidFocused ValidationStates Validation.HasError 添付プロパティは、コントロールにフォーカスがある true です。
InvalidUnfocused ValidationStates Validation.HasError 添付プロパティは、コントロールにフォーカスがない true です。

Expander の ControlTemplate の例

次の例は、Expander コントロールの ControlTemplate を定義する方法を示しています。

<ControlTemplate x:Key="ExpanderToggleButton"
                 TargetType="{x:Type ToggleButton}">
  <Border x:Name="Border"
          CornerRadius="2,0,0,0"
          BorderThickness="0,0,1,0">
    <Border.Background>
      <LinearGradientBrush EndPoint="0.5,1"
                           StartPoint="0.5,0">
        <GradientStop Color="{DynamicResource ControlLightColor}" />
        <GradientStop Color="{DynamicResource ControlMediumColor}"
                      Offset="1" />
      </LinearGradientBrush>
    </Border.Background>
    <Border.BorderBrush>
      <LinearGradientBrush StartPoint="0,0"
                           EndPoint="0,1">
        <LinearGradientBrush.GradientStops>
          <GradientStopCollection>
            <GradientStop Color="{DynamicResource BorderLightColor}"
                          Offset="0.0" />
            <GradientStop Color="{DynamicResource BorderDarkColor}"
                          Offset="1.0" />
          </GradientStopCollection>
        </LinearGradientBrush.GradientStops>
      </LinearGradientBrush>

    </Border.BorderBrush>
    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Normal" />
        <VisualState x:Name="MouseOver">
          <Storyboard>
            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                          Storyboard.TargetProperty="(Panel.Background).
                (GradientBrush.GradientStops)[1].(GradientStop.Color)">
              <EasingColorKeyFrame KeyTime="0"
                                   Value="{StaticResource ControlMouseOverColor}" />
            </ColorAnimationUsingKeyFrames>
          </Storyboard>
        </VisualState>
        <VisualState x:Name="Pressed">
          <Storyboard>
            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                          Storyboard.TargetProperty="(Panel.Background).
                (GradientBrush.GradientStops)[1].(GradientStop.Color)">
              <EasingColorKeyFrame KeyTime="0"
                                   Value="{StaticResource ControlPressedColor}" />
            </ColorAnimationUsingKeyFrames>
          </Storyboard>
        </VisualState>
        <VisualState x:Name="Disabled">
          <Storyboard>
            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                          Storyboard.TargetProperty="(Panel.Background).
                (GradientBrush.GradientStops)[1].(GradientStop.Color)">
              <EasingColorKeyFrame KeyTime="0"
                                   Value="{StaticResource DisabledControlDarkColor}" />
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                          Storyboard.TargetProperty="(Border.BorderBrush).
                (GradientBrush.GradientStops)[1].(GradientStop.Color)">
              <EasingColorKeyFrame KeyTime="0"
                                   Value="{StaticResource DisabledBorderLightColor}" />
            </ColorAnimationUsingKeyFrames>
          </Storyboard>
        </VisualState>
      </VisualStateGroup>
      <VisualStateGroup x:Name="CheckStates">
        <VisualState x:Name="Checked">
          <Storyboard>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                           Storyboard.TargetName="CollapsedArrow">
              <DiscreteObjectKeyFrame KeyTime="0"
                                      Value="{x:Static Visibility.Hidden}" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                           Storyboard.TargetName="ExpandededArrow">
              <DiscreteObjectKeyFrame KeyTime="0"
                                      Value="{x:Static Visibility.Visible}" />
            </ObjectAnimationUsingKeyFrames>
          </Storyboard>
        </VisualState>
        <VisualState x:Name="Unchecked" />
        <VisualState x:Name="Indeterminate" />
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid>
      <Path x:Name="CollapsedArrow"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Data="M 0 0 L 4 4 L 8 0 Z">
        <Path.Fill>
          <SolidColorBrush Color="{DynamicResource GlyphColor}" />
        </Path.Fill>
      </Path>
      <Path x:Name="ExpandededArrow"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Visibility="Collapsed"
            Data="M 0 4 L 4 0 L 8 4 Z">
        <Path.Fill>
          <SolidColorBrush Color="{DynamicResource GlyphColor}" />
        </Path.Fill>
      </Path>
    </Grid>
  </Border>
</ControlTemplate>

<Style TargetType="{x:Type Expander}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type Expander}">
        <Grid>
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition x:Name="ContentRow"
                           Height="0" />
          </Grid.RowDefinitions>
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal" />
              <VisualState x:Name="MouseOver" />
              <VisualState x:Name="Disabled">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Panel.Background).
                      (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource DisabledControlDarkColor}" />
                  </ColorAnimationUsingKeyFrames>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Border.BorderBrush).
                      (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource DisabledBorderLightColor}" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <Border x:Name="Border"
                  Grid.Row="0"
                  BorderThickness="1"
                  CornerRadius="2,2,0,0">
            <Border.BorderBrush>
              <LinearGradientBrush EndPoint="0,1"
                                   StartPoint="0,0">
                <GradientStop Color="{DynamicResource BorderLightColor}"
                              Offset="0" />
                <GradientStop Color="{DynamicResource BorderDarkColor}"
                              Offset="1" />
              </LinearGradientBrush>

            </Border.BorderBrush>
            <Border.Background>

              <LinearGradientBrush StartPoint="0,0"
                                   EndPoint="0,1">
                <LinearGradientBrush.GradientStops>
                  <GradientStopCollection>
                    <GradientStop Color="{DynamicResource ControlLightColor}"
                                  Offset="0.0" />
                    <GradientStop Color="{DynamicResource ControlMediumColor}"
                                  Offset="1.0" />
                  </GradientStopCollection>
                </LinearGradientBrush.GradientStops>
              </LinearGradientBrush>

            </Border.Background>
            <Grid>
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="20" />
                <ColumnDefinition Width="*" />
              </Grid.ColumnDefinitions>
              <ToggleButton OverridesDefaultStyle="True"
                            Template="{StaticResource ExpanderToggleButton}"
                            IsChecked="{Binding IsExpanded, Mode=TwoWay, 
                  RelativeSource={RelativeSource TemplatedParent}}">
                <ToggleButton.Background>
                  <LinearGradientBrush EndPoint="0.5,1"
                                       StartPoint="0.5,0">
                    <GradientStop Color="{DynamicResource ControlLightColor}"
                                  Offset="0" />
                    <GradientStop Color="{DynamicResource ControlMediumColor}"
                                  Offset="1" />
                  </LinearGradientBrush>
                </ToggleButton.Background>
              </ToggleButton>
              <ContentPresenter Grid.Column="1"
                                Margin="4"
                                ContentSource="Header"
                                RecognizesAccessKey="True" />
            </Grid>
          </Border>
          <Border x:Name="Content"
                  Grid.Row="1"
                  BorderThickness="1,0,1,1"
                  CornerRadius="0,0,2,2">
            <Border.BorderBrush>
              <SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
            </Border.BorderBrush>
            <Border.Background>
              <SolidColorBrush Color="{DynamicResource ContentAreaColorDark}" />
            </Border.Background>
            <ContentPresenter Margin="4" />
          </Border>
        </Grid>
        <ControlTemplate.Triggers>
          <Trigger Property="IsExpanded"
                   Value="True">
            <Setter TargetName="ContentRow"
                    Property="Height"
                    Value="{Binding Height, ElementName=Content}" />
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

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

<!--Control colors.-->
<Color x:Key="WindowColor">#FFE8EDF9</Color>
<Color x:Key="ContentAreaColorLight">#FFC5CBF9</Color>
<Color x:Key="ContentAreaColorDark">#FF7381F9</Color>

<Color x:Key="DisabledControlLightColor">#FFE8EDF9</Color>
<Color x:Key="DisabledControlDarkColor">#FFC5CBF9</Color>
<Color x:Key="DisabledForegroundColor">#FF888888</Color>

<Color x:Key="SelectedBackgroundColor">#FFC5CBF9</Color>
<Color x:Key="SelectedUnfocusedColor">#FFDDDDDD</Color>

<Color x:Key="ControlLightColor">White</Color>
<Color x:Key="ControlMediumColor">#FF7381F9</Color>
<Color x:Key="ControlDarkColor">#FF211AA9</Color>

<Color x:Key="ControlMouseOverColor">#FF3843C4</Color>
<Color x:Key="ControlPressedColor">#FF211AA9</Color>


<Color x:Key="GlyphColor">#FF444444</Color>
<Color x:Key="GlyphMouseOver">sc#1, 0.004391443, 0.002428215, 0.242281124</Color>

<!--Border colors-->
<Color x:Key="BorderLightColor">#FFCCCCCC</Color>
<Color x:Key="BorderMediumColor">#FF888888</Color>
<Color x:Key="BorderDarkColor">#FF444444</Color>

<Color x:Key="PressedBorderLightColor">#FF888888</Color>
<Color x:Key="PressedBorderDarkColor">#FF444444</Color>

<Color x:Key="DisabledBorderLightColor">#FFAAAAAA</Color>
<Color x:Key="DisabledBorderDarkColor">#FF888888</Color>

<Color x:Key="DefaultBorderBrushDarkColor">Black</Color>

<!--Control-specific resources.-->
<Color x:Key="HeaderTopColor">#FFC5CBF9</Color>
<Color x:Key="DatagridCurrentCellBorderColor">Black</Color>
<Color x:Key="SliderTrackDarkColor">#FFC5CBF9</Color>

<Color x:Key="NavButtonFrameColor">#FF3843C4</Color>

<LinearGradientBrush x:Key="MenuPopupBrush"
                     EndPoint="0.5,1"
                     StartPoint="0.5,0">
  <GradientStop Color="{DynamicResource ControlLightColor}"
                Offset="0" />
  <GradientStop Color="{DynamicResource ControlMediumColor}"
                Offset="0.5" />
  <GradientStop Color="{DynamicResource ControlLightColor}"
                Offset="1" />
</LinearGradientBrush>

<LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill"
                     StartPoint="0,0"
                     EndPoint="1,0">
  <LinearGradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#000000FF"
                    Offset="0" />
      <GradientStop Color="#600000FF"
                    Offset="0.4" />
      <GradientStop Color="#600000FF"
                    Offset="0.6" />
      <GradientStop Color="#000000FF"
                    Offset="1" />
    </GradientStopCollection>
  </LinearGradientBrush.GradientStops>
</LinearGradientBrush>

完全なサンプルについては、Styling with ControlTemplates Sampleを参照してください。

関連項目