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

このトピックでは、ListBox コントロールのスタイルとテンプレートについて説明します。This topic describes the styles and templates for the ListBox 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.

ListBox パーツListBox Parts

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

ListBoxControlTemplate を作成する場合、テンプレートに ScrollViewer内の ItemsPresenter が含まれている可能性があります。When you create a ControlTemplate for a ListBox, your template might contain an ItemsPresenter within a ScrollViewer. (ItemsPresenter には、ListBox内の各項目が表示されます。 ScrollViewer では、コントロール内でのスクロールが有効になります)。(The ItemsPresenter displays each item in the ListBox; the ScrollViewer enables scrolling within the control). ItemsPresenterScrollViewerの直接の子でない場合は、ItemsPresenter の名前を ItemsPresenterに指定する必要があります。If the ItemsPresenter is not the direct child of the ScrollViewer, you must give the ItemsPresenter the name, ItemsPresenter.

リスト ボックスの状態ListBox States

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

VisualState 名VisualState Name VisualStateGroup 名VisualStateGroup Name 説明Description
有効Valid ValidationStatesValidationStates コントロールは有効です。The control is valid.
InvalidFocusedInvalidFocused ValidationStatesValidationStates コントロールが無効で、フォーカスがあります。The control is not valid and has focus.
InvalidUnfocusedInvalidUnfocused ValidationStatesValidationStates コントロールが無効で、フォーカスがありません。The control is not valid and does not have focus.

ListBoxItem のパーツListBoxItem Parts

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

ListBoxItem の状態ListBoxItem States

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

VisualState 名VisualState Name VisualStateGroup 名VisualStateGroup Name 説明Description
標準Normal CommonStatesCommonStates 既定の状態です。The default state.
MouseOverMouseOver CommonStatesCommonStates マウス ポインターがコントロール上に配置されます。The mouse pointer is positioned over the control.
DisabledDisabled CommonStatesCommonStates この項目は無効です。The item is disabled.
フォーカスされているFocused FocusStatesFocusStates この項目にフォーカスがあります。The item has focus.
フォーカスされていないUnfocused FocusStatesFocusStates この項目にフォーカスがありません。The item does not have focus.
未選択Unselected SelectionStatesSelectionStates この項目は選択されていません。The item is not selected.
選択済みSelected SelectionStatesSelectionStates この項目は、選択した currentlyplate です。The item is currentlyplate selected.
SelectedUnfocusedSelectedUnfocused SelectionStatesSelectionStates この項目は選択されていますが、フォーカスがありません。The item is selected, but does not have focus.
有効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.

ListBox ControlTemplate の例ListBox ControlTemplate Example

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

<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 つ以上を使用します。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