ListBox のスタイルとテンプレート

[アーティクル]
08/09/2011

更新 : 2011 年 4 月

このトピックでは、ListBox コントロールのスタイルおよびテンプレートについて説明します。既定の ControlTemplate に変更を加えることで、コントロールに独自の外観を設定できます。詳細については、「ControlTemplate の作成による既存のコントロールの外観のカスタマイズ」を参照してください。

ListBox のパーツ

ListBox コントロールには、名前付きのパーツは存在しません。

ListBox の ControlTemplate を作成する際には、テンプレートの ScrollViewer に ItemsPresenter を含めることができます。 ItemsPresenter により、ListBox の各項目が表示されます。また、ScrollViewer により、コントロール内でスクロールできるようになります。 ItemsPresenter が ScrollViewer の直接の子でない場合は、ItemsPresenter に ItemsPresenter という名前を付ける必要があります。

ListBox の状態

次の表は、ListBox コントロールの表示状態の一覧です。

VisualState 名	VisualStateGroup 名	説明
Valid	ValidationStates	コントロールが有効です。
InvalidFocused	ValidationStates	コントロールは有効ではありませんが、フォーカスがあります。
InvalidUnfocused	ValidationStates	コントロールは有効ではなく、フォーカスはありません。

ListBoxItem のパーツ

ListBoxItem コントロールには、名前付きのパーツは存在しません。

ListBoxItem の状態

次の表は、ListBox コントロールの表示状態の一覧です。

VisualState 名	VisualStateGroup 名	説明
Normal	CommonStates	既定の状態です。
MouseOver	CommonStates	マウスポインターがコントロール上に配置されています。
Disabled	CommonStates	項目が無効です。
Focused	FocusStates	項目にフォーカスがあります。
Unfocused	FocusStates	項目にフォーカスがありません。
Unselected	SelectionStates	項目は選択されています。
Selected	SelectionStates	項目は選択されていません。
SelectedUnfocused	SelectionStates	項目は選択されていますが、フォーカスはありません。
Valid	ValidationStates	このコントロールは Validation クラスを使用し、Validation.HasError 添付プロパティは false です。
InvalidFocused	ValidationStates	Validation.HasError 添付プロパティは true で、コントロールにはフォーカスがあります。
InvalidUnfocused	ValidationStates	Validation.HasError 添付プロパティは true で、コントロールにはフォーカスがありません。

ListBox ControlTemplate の例

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

<Style x:Key="{x:Type ListBox}"
       TargetType="ListBox">
  <Setter Property="SnapsToDevicePixels"
          Value="true" />
  <Setter Property="OverridesDefaultStyle"
          Value="true" />
  <Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
          Value="Auto" />
  <Setter Property="ScrollViewer.VerticalScrollBarVisibility"
          Value="Auto" />
  <Setter Property="ScrollViewer.CanContentScroll"
          Value="true" />
  <Setter Property="MinWidth"
          Value="120" />
  <Setter Property="MinHeight"
          Value="95" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ListBox">
        <Border Name="Border"
                BorderThickness="1"
                CornerRadius="2">
          <Border.Background>
            <SolidColorBrush Color="{StaticResource ControlLightColor}" />
          </Border.Background>
          <Border.BorderBrush>
            <SolidColorBrush Color="{StaticResource BorderMediumColor}" />
          </Border.BorderBrush>
          <ScrollViewer Margin="0"
                        Focusable="false">
            <StackPanel Margin="2"
                        IsItemsHost="True" />
          </ScrollViewer>
        </Border>
        <ControlTemplate.Triggers>
          <Trigger Property="IsEnabled"
                   Value="false">
            <Setter TargetName="Border"
                    Property="Background">
              <Setter.Value>
                <SolidColorBrush Color="{StaticResource DisabledControlLightColor}" />
              </Setter.Value>
            </Setter>
            <Setter TargetName="Border"
                    Property="BorderBrush">
              <Setter.Value>
                <SolidColorBrush Color="{DynamicResource DisabledBorderLightColor}" />
              </Setter.Value>

            </Setter>
          </Trigger>
          <Trigger Property="IsGrouping"
                   Value="true">
            <Setter Property="ScrollViewer.CanContentScroll"
                    Value="false" />
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<Style x:Key="{x:Type ListBoxItem}"
       TargetType="ListBoxItem">
  <Setter Property="SnapsToDevicePixels"
          Value="true" />
  <Setter Property="OverridesDefaultStyle"
          Value="true" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ListBoxItem">
        <Border x:Name="Border"
                Padding="2"
                SnapsToDevicePixels="true">
          <Border.Background>
            <SolidColorBrush Color="Transparent" />
          </Border.Background>
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="SelectionStates">
              <VisualState x:Name="Unselected" />
              <VisualState x:Name="Selected">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Panel.Background).
                    (SolidColorBrush.Color)">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource SelectedBackgroundColor}" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="SelectedUnfocused">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Panel.Background).
                    (SolidColorBrush.Color)">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource SelectedUnfocusedColor}" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <ContentPresenter />
        </Border>
      </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>

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

参照

Style

ControlTemplate

概念

スタイルとテンプレート

その他の技術情報

コントロールのスタイルとテンプレート

コントロールのカスタマイズ

ControlTemplate の作成による既存のコントロールの外観のカスタマイズ

履歴の変更

日付	履歴	理由
2011 年 4 月	ItemsPresenter および ScrollViewer が ControlTemplate に含まれることに関する解説を追加。	情報の拡充
2010 年 8 月	ControlTemplate の例を追加。	情報の拡充

2011 年 4 月

ItemsPresenter および ScrollViewer が ControlTemplate に含まれることに関する解説を追加。

情報の拡充

2010 年 8 月

ControlTemplate の例を追加。