How to: Create a Horizontal ListBox

This example shows how to create a horizontal ListBox by defining a style. The ListBoxItem controls are listed horizontally and separated by user defined separators. The style uses the Orientation enumerated type and a ScrollViewer with the HorizontalScrollBarVisibility property set. The following example shows the styles for the Separator and the ListBox.

Example

<Grid.Resources>
  <Style x:Key="Separator" TargetType="{x:Type StackPanel}">
    <Setter Property = "Margin" Value= "4"/>
    <Setter Property = "Width" Value= "2"/>
    <Setter Property = "Height" Value= "12"/>
    <Setter Property = "Background" Value= "Gray"/>
  </Style>

  <Style x:Key="ListBoxTemplate" TargetType="{x:Type ListBox}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListBox}">
          <Border Background="{TemplateBinding Panel.Background}" 
                  BorderBrush="{TemplateBinding Border.BorderBrush}"
                  BorderThickness="{TemplateBinding Border.BorderThickness}">
            <ScrollViewer HorizontalScrollBarVisibility="Auto">
              <StackPanel x:Name="StackPanel1" IsItemsHost="True"
                 Orientation="Horizontal"/>
            </ScrollViewer>
          </Border>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</Grid.Resources>

For the complete sample see Horizontal ListBox Sample.

See Also

Tasks

How to: Create a ListBox with an Event Handler

Concepts

ListBox Overview