Share via


ListBox Styles and Templates

Microsoft Silverlight will reach end of support after October 2021. Learn more.

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 Using a ControlTemplate.

ListBox Parts

The following table lists the named parts for the ListBox control.

ListBox Part

Type

Description

ScrollViewer

ScrollViewer

The ScrollViewer that handles scrolling the contents of the ListBox.

ListBox States

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

VisualState Name

VisualStateGroup Name

Description

Valid

ValidationStates

The control is valid.

InvalidFocused

ValidationStates

The control is not valid and has focus.

InvalidUnfocused

ValidationStates

The control is not valid and does not have focus.

ListBoxItem Parts

The ListBoxItem control does not have any named parts.

ListBoxItem States

The following table lists the visual states for the ListBoxItem class.

ListBoxItem VisualState Name

VisualStateGroup Name

Description

Normal

CommonStates

The default state.

MouseOver

CommonStates

The mouse pointer is positioned over the control.

Disabled

CommonStates

The item is disabled.

Focused

FocusStates

The item has focus.

Unfocused

FocusStates

The item does not have focus.

Selected

SelectionStates

The item is currently selected.

Unselected

SelectionStates

The item is not selected.

SelectedUnfocused

SelectionStates

The item is selected, but does not have focus. This state is not present in the default control template of ListBoxItem. However, you can modify the ControlTemplate of ListBoxItem to use this state.

BeforeLoaded

LayoutStates

ListBoxItem is not yet loaded.

AfterLoaded

LayoutStates

ListBoxItem is loaded.

BeforeUnloaded

LayoutStates

ListBoxItem is not yet unloaded.

Default Style and Template

The following properties of the ListBoxItem control are not used in its default template. However, you can modify the default template and use template binding to set these properties.

The following shows the XML namespace mapping that you have to specify when you work with styles and templates.

<!-- XML Namespace mapping. -->
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
NoteNote:

The default templates still specify the vsm: XML namespace mapping for the VisualStateManager element for legacy reasons. You can however, use the VisualStateManager element without specifying the vsm: mapping.

The following XAML shows the default style and template for the ListBox control and the ListBoxItem class.

  <Style TargetType="ListBox">
        <Setter Property="Padding" Value="1"/>
        <Setter Property="Background" Value="#FFFFFFFF" />
        <Setter Property="Foreground" Value="#FF000000"/>
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="VerticalContentAlignment" Value="Top" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="TabNavigation" Value="Once" />
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="BorderBrush">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFA3AEB9" Offset="0"/>
                    <GradientStop Color="#FF8399A9" Offset="0.375"/>
                    <GradientStop Color="#FF718597" Offset="0.375"/>
                    <GradientStop Color="#FF617584" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>  
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBox">
                    <Grid>
                        <vsm:VisualStateManager.VisualStateGroups>
                            <vsm:VisualStateGroup x:Name="ValidationStates">
                                <vsm:VisualState x:Name="Valid"/>
                                <vsm:VisualState x:Name="InvalidUnfocused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" >
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="InvalidFocused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" >
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="validationTooltip" Storyboard.TargetProperty="IsOpen">
                                            <DiscreteObjectKeyFrame KeyTime="0" >
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Boolean>True</sys:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                        </vsm:VisualStateManager.VisualStateGroups>
                        <Border CornerRadius="2" 
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                            <ScrollViewer x:Name="ScrollViewer" Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}" BorderBrush="Transparent" BorderThickness="0" TabNavigation="{TemplateBinding TabNavigation}">
                                <ItemsPresenter />
                            </ScrollViewer>
                        </Border>
                        <Border x:Name="ValidationErrorElement" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2" BorderBrush="#FFDB000C" Visibility="Collapsed">
                            <ToolTipService.ToolTip>
                                <ToolTip x:Name="validationTooltip" Template="{StaticResource ValidationToolTipTemplate}" Placement="Right" 
                                             PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" 
                                             DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
                                    <ToolTip.Triggers>
                                        <EventTrigger RoutedEvent="Canvas.Loaded">
                                            <EventTrigger.Actions>
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="validationTooltip" Storyboard.TargetProperty="IsHitTestVisible">
                                                            <DiscreteObjectKeyFrame KeyTime="0" >
                                                                <DiscreteObjectKeyFrame.Value>
                                                                    <sys:Boolean>true</sys:Boolean>
                                                                </DiscreteObjectKeyFrame.Value>
                                                            </DiscreteObjectKeyFrame>
                                                        </ObjectAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </EventTrigger.Actions>
                                        </EventTrigger>
                                    </ToolTip.Triggers>
                                </ToolTip>
                            </ToolTipService.ToolTip>
                            <Grid Width="10" Height="10" HorizontalAlignment="Right" Margin="0,-4,-4,0" VerticalAlignment="Top" Background="Transparent">
                                <Path Margin="-1,3,0,0" Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 z" Fill="#FFDC000C"/>
                                <Path Margin="-1,3,0,0" Data="M 0,0 L2,0 L 8,6 L8,8" Fill="#ffffff"/>
                            </Grid>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
<Style TargetType="ListBoxItem">
      <Setter Property="Padding" Value="3" />
      <Setter Property="HorizontalContentAlignment" Value="Left" />
      <Setter Property="VerticalContentAlignment" Value="Top" />
      <Setter Property="Background" Value="Transparent" />
      <Setter Property="BorderThickness" Value="1"/>
      <Setter Property="TabNavigation" Value="Local" />
      <Setter Property="Template">
          <Setter.Value>
              <ControlTemplate TargetType="ListBoxItem">
                  <Grid Background="{TemplateBinding Background}">
                      <vsm:VisualStateManager.VisualStateGroups>
                          <vsm:VisualStateGroup x:Name="CommonStates">
                              <vsm:VisualState x:Name="Normal" />
                              <vsm:VisualState x:Name="MouseOver">
                                  <Storyboard>
                                      <DoubleAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Opacity" Duration="0" To=".35"/>
                                  </Storyboard>
                              </vsm:VisualState>
                              <vsm:VisualState x:Name="Disabled">
                                  <Storyboard>
                                      <DoubleAnimation Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity" Duration="0" To=".55" />
                                  </Storyboard>
                              </vsm:VisualState>
                          </vsm:VisualStateGroup>
                          <vsm:VisualStateGroup x:Name="SelectionStates">
                              <vsm:VisualState x:Name="Unselected" />
                              <vsm:VisualState x:Name="Selected">
                                  <Storyboard>
                                      <DoubleAnimation Storyboard.TargetName="fillColor2" Storyboard.TargetProperty="Opacity" Duration="0" To=".75"/>
                                  </Storyboard>
                              </vsm:VisualState>
                          </vsm:VisualStateGroup>
                          <vsm:VisualStateGroup x:Name="FocusStates">
                              <vsm:VisualState x:Name="Focused">
                                  <Storyboard>
                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility" Duration="0">
                                          <DiscreteObjectKeyFrame KeyTime="0">
                                              <DiscreteObjectKeyFrame.Value>
                                                  <Visibility>Visible</Visibility>
                                              </DiscreteObjectKeyFrame.Value>
                                          </DiscreteObjectKeyFrame>
                                      </ObjectAnimationUsingKeyFrames>
                                  </Storyboard>
                              </vsm:VisualState>
                              <vsm:VisualState x:Name="Unfocused"/>
                          </vsm:VisualStateGroup>
                      </vsm:VisualStateManager.VisualStateGroups>
                      <Rectangle x:Name="fillColor" Opacity="0" Fill="#FFBADDE9" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/>
                      <Rectangle x:Name="fillColor2" Opacity="0" Fill="#FFBADDE9" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/>
                      <ContentPresenter
                              x:Name="contentPresenter"
                              Content="{TemplateBinding Content}"
                              ContentTemplate="{TemplateBinding ContentTemplate}"
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                              Margin="{TemplateBinding Padding}"/>
                      <Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed" RadiusX="1" RadiusY="1" />
                  </Grid>
              </ControlTemplate>
          </Setter.Value>
      </Setter>
  </Style>

The default ControlTemplate for ListBox and ListBoxItem references the ControlTemplate for ValidationTooltip. The following XAML shows the ControlTemplate for ValidationTooltip that you must specify when you work with the ListBox or ListBoxItem control templates:

<ControlTemplate x:Key="ValidationToolTipTemplate">
      <Grid x:Name="Root" Margin="5,0" RenderTransformOrigin="0,0" Opacity="0">
          <Grid.RenderTransform>
              <TranslateTransform x:Name="xform" X="-25"/>
          </Grid.RenderTransform>
          <vsm:VisualStateManager.VisualStateGroups>
              <vsm:VisualStateGroup Name="OpenStates">
                  <vsm:VisualStateGroup.Transitions>
                      <vsm:VisualTransition GeneratedDuration="0"/>
                      <vsm:VisualTransition To="Open" GeneratedDuration="0:0:0.2">
                          <Storyboard>
                              <DoubleAnimation Storyboard.TargetName="xform" Storyboard.TargetProperty="X" To="0" Duration="0:0:0.2">
                                  <DoubleAnimation.EasingFunction>
                                      <BackEase Amplitude=".3" EasingMode="EaseOut"/>
                                  </DoubleAnimation.EasingFunction>
                              </DoubleAnimation>
                              <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2"/>
                          </Storyboard>
                      </vsm:VisualTransition>
                  </vsm:VisualStateGroup.Transitions>
                  <vsm:VisualState x:Name="Closed">
                      <Storyboard>
                          <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="0" Duration="0"/>
                      </Storyboard>
                  </vsm:VisualState>
                  <vsm:VisualState x:Name="Open">
                      <Storyboard>
                          <DoubleAnimation Storyboard.TargetName="xform" Storyboard.TargetProperty="X" To="0" Duration="0"/>
                          <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
                      </Storyboard>
                  </vsm:VisualState>
              </vsm:VisualStateGroup>
          </vsm:VisualStateManager.VisualStateGroups>

          <Border Margin="4,4,-4,-4" Background="#052A2E31" CornerRadius="5"/>
          <Border Margin="3,3,-3,-3" Background="#152A2E31" CornerRadius="4"/>
          <Border Margin="2,2,-2,-2" Background="#252A2E31" CornerRadius="3"/>
          <Border Margin="1,1,-1,-1" Background="#352A2E31" CornerRadius="2"/>

          <Border Background="#FFDC000C" CornerRadius="2"/>
          <Border CornerRadius="2">
              <TextBlock 
                  UseLayoutRounding="false" 
                  Foreground="White" Margin="8,4,8,4" MaxWidth="250" TextWrapping="Wrap" Text="{Binding (Validation.Errors)[0].ErrorContent}"/>
          </Border>
      </Grid>
  </ControlTemplate>