ListBox Styles and Templates

 

This topic describes the styles and templates for the ListBox control. You can modify the default ControlTemplate to give the control a unique appearance. For more information, see Customizing the Appearance of an Existing Control by Creating a ControlTemplate.

The ListBox control does not have any named parts.

When you create a ControlTemplate for a ListBox, your template might contain an ItemsPresenter within a ScrollViewer. (The ItemsPresenter displays each item in the ListBox; the ScrollViewer enables scrolling within the control). If the ItemsPresenter is not the direct child of the ScrollViewer, you must give the ItemsPresenter the name, ItemsPresenter.

The following table lists the visual states for the ListBox control.

VisualState NameVisualStateGroup NameDescription
ValidValidationStatesThe control is valid.
InvalidFocusedValidationStatesThe control is not valid and has focus.
InvalidUnfocusedValidationStatesThe control is not valid and does not have focus.

The ListBoxItem control does not have any named parts.

The following table lists the visual states for the ListBox control.

VisualState NameVisualStateGroup NameDescription
NormalCommonStatesThe default state.
MouseOverCommonStatesThe mouse pointer is positioned over the control.
DisabledCommonStatesThe item is disabled.
FocusedFocusStatesThe item has focus.
UnfocusedFocusStatesThe item does not have focus.
UnselectedSelectionStatesThe item is not selected.
SelectedSelectionStatesThe item is currentlyplate selected.
SelectedUnfocusedSelectionStatesThe item is selected, but does not have focus.
ValidValidationStatesThe control uses the Validation class and the Validation.HasError attached property is false.
InvalidFocusedValidationStatesThe Validation.HasError attached property is true has the control has focus.
InvalidUnfocusedValidationStatesThe Validation.HasError attached property is true has the control does not have focus.

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>

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>

For the complete sample, see Styling with ControlTemplates Sample.

Style
ControlTemplate
Control Styles and Templates
Control Customization
Styling and Templating
Customizing the Appearance of an Existing Control by Creating a ControlTemplate

Show: