In our app, we needed to create a selection list for an input field. The obvious solution is to use a ListBox. But we wanted the ListBox to be horizontal, like this:

Horizontal ListBox

The solution

<ListBox Grid.Row="0" ItemsSource="{Binding Types}" SelectedItem="{Binding SelectedType,Mode=TwoWay}" ItemTemplate="{StaticResource MyTemplate}">
	<ListBox.ItemsPanel>
		<ItemsPanelTemplate>
			<StackPanel Orientation="Horizontal"/>
		</ItemsPanelTemplate>
	</ListBox.ItemsPanel>
</ListBox>

ItemsPanel is the panel in which the items are rendered. When you set it's template to a StackPanel with horizontal orientation the items are rendered according to the layout of the StackPanel container instead of the default ListBox layout.

In order to change the design of the items I used a simple DataTemplate and set it to the ItemTemplate property of the list.

But how to change the color of the selected item? that's on the next post…