ToggleButton のスタイルとテンプレートToggleButton Styles and Templates

このトピックでは、ToggleButton コントロールのスタイルとテンプレートについて説明します。This topic describes the styles and templates for the ToggleButton control. ControlTemplateの既定値を変更して外観を制御します。You can modify the default ControlTemplate to give the control a unique appearance. 詳細については、「Customizing the Appearance of an Existing Control by Creating a ControlTemplate」を参照してください。For more information, see Customizing the Appearance of an Existing Control by Creating a ControlTemplate.

ToggleButton の部分ToggleButton Parts

ToggleButton コントロールには、名前付きの部分がありません。The ToggleButton control does not have any named parts.

ToggleButton の状態ToggleButton States

次の表は、ToggleButton コントロールの表示状態を示しています。The following table lists the visual states for the ToggleButton control.

VisualState 名VisualState Name VisualStateGroup 名VisualStateGroup Name 説明Description
標準Normal CommonStatesCommonStates 既定の状態です。The default state.
MouseOverMouseOver CommonStatesCommonStates マウス ポインターがコントロール上に配置されます。The mouse pointer is positioned over the control.
押されているPressed CommonStatesCommonStates コントロールが押されています。The control is pressed.
DisabledDisabled CommonStatesCommonStates コントロールが無効になっています。The control is disabled.
フォーカスされているFocused FocusStatesFocusStates コントロールにフォーカスがあります。The control has focus.
フォーカスされていないUnfocused FocusStatesFocusStates コントロールにフォーカスがありません。The control does not have focus.
チェック済みChecked CheckStatesCheckStates IsCheckedtrue です。IsChecked is true.
再帰Unchecked CheckStatesCheckStates IsCheckedfalse です。IsChecked is false.
確定Indeterminate CheckStatesCheckStates IsThreeStatetrue で、IsCheckednull です。IsThreeState is true, and IsChecked is null.
有効Valid ValidationStatesValidationStates コントロールは Validation クラスを使用し、HasError 添付プロパティは falseます。The control uses the Validation class and the HasError attached property is false.
InvalidFocusedInvalidFocused ValidationStatesValidationStates HasError 添付プロパティは、コントロールにフォーカスがある true です。The HasError attached property is true has the control has focus.
InvalidUnfocusedInvalidUnfocused ValidationStatesValidationStates HasError 添付プロパティは、コントロールにフォーカスがない true です。The HasError attached property is true has the control does not have focus.

注意

未確定の表示状態がコントロールテンプレートに存在しない場合、チェックを行わない状態は既定のビジュアル状態として使用されます。If the Indeterminate visual state does not exist in your control template, then the Unchecked visual state will be used as default visual state.

ToggleButton ControlTemplate の例ToggleButton ControlTemplate Example

次の例は、ToggleButton コントロールの ControlTemplate を定義する方法を示しています。The following example shows how to define a ControlTemplate for the ToggleButton control.

<ControlTemplate x:Key="ComboBoxToggleButton"
                 TargetType="{x:Type ToggleButton}">
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition />
      <ColumnDefinition Width="20" />
    </Grid.ColumnDefinitions>
    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Normal" />
        <VisualState x:Name="MouseOver">
          <Storyboard>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).
                (GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                          Storyboard.TargetName="Border">
              <EasingColorKeyFrame KeyTime="0"
                                   Value="{StaticResource ControlMouseOverColor}" />
            </ColorAnimationUsingKeyFrames>
          </Storyboard>
        </VisualState>
        <VisualState x:Name="Pressed" />
        <VisualState x:Name="Disabled">
          <Storyboard>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).
                (GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                          Storyboard.TargetName="Border">
              <EasingColorKeyFrame KeyTime="0"
                                   Value="{StaticResource DisabledControlDarkColor}" />
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).
                (SolidColorBrush.Color)"
                                          Storyboard.TargetName="Arrow">
              <EasingColorKeyFrame KeyTime="0"
                                   Value="{StaticResource DisabledForegroundColor}" />
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).
                (GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                          Storyboard.TargetName="Border">
              <EasingColorKeyFrame KeyTime="0"
                                   Value="{StaticResource DisabledBorderDarkColor}" />
            </ColorAnimationUsingKeyFrames>
          </Storyboard>
        </VisualState>
      </VisualStateGroup>
      <VisualStateGroup x:Name="CheckStates">
        <VisualState x:Name="Checked">
          <Storyboard>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).
                (GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                          Storyboard.TargetName="Border">
              <EasingColorKeyFrame KeyTime="0"
                                   Value="{StaticResource ControlPressedColor}" />
            </ColorAnimationUsingKeyFrames>
          </Storyboard>
        </VisualState>
        <VisualState x:Name="Unchecked" />
        <VisualState x:Name="Indeterminate" />
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Border x:Name="Border"
            Grid.ColumnSpan="2"
            CornerRadius="2"
            BorderThickness="1">
      <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}" />
              <GradientStop Color="{DynamicResource ControlMediumColor}"
                            Offset="1.0" />
            </GradientStopCollection>
          </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>

      </Border.Background>
    </Border>
    <Border Grid.Column="0"
            CornerRadius="2,0,0,2"
            Margin="1" >
      <Border.Background>
          <SolidColorBrush Color="{DynamicResource ControlLightColor}"/>
      </Border.Background>
    </Border>
    <Path x:Name="Arrow"
          Grid.Column="1"
          HorizontalAlignment="Center"
          VerticalAlignment="Center"
          Data="M 0 0 L 4 4 L 8 0 Z" >
      <Path.Fill>
          <SolidColorBrush Color="{DynamicResource GlyphColor}"/>
      </Path.Fill>
    </Path>
  </Grid>
</ControlTemplate>

前の例では、次のリソースの 1 つ以上を使用します。The preceding example uses one or more of the following resources.

<!--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を参照してください。For the complete sample, see Styling with ControlTemplates Sample.

関連項目See also