Posted by: Zeeshan Amjad | November 12, 2009

Horizontal ListBox revisited

Previously we saw that how can we create a horizontal list box using the layout transform and using the rotate transform class. But there is one problem with that approach, it will rotate the whole list box. If we want to only make the items of the list box horizontal, then we can’t use this technique. In this case we are going to use the ItemsPanelStack class. Here is a partial class hierarchy of this class.


ItemsPanel template class is a member of ItemsControl as define in this class diagram.


List Box class is indirectly inherited by Items Control class therefore it already has the property of ItemsPanelTemplate. Here is a partial class diagram of List Box.


Now if we want to make all the items of list box horizontal, then we can define the horizontal stack panel inside the ItemsPanelTemplate. Here is a XAML code for this. Also note that at the same time we can also define DataTemplate of the list box items to further control the rendering of the list box items.

  1: <Window x:Class="UIElement.Window1"
  2:     xmlns=""
  3:     xmlns:x=""
  4:     xmlns:local="clr-namespace:UIElement"
  5:     Title="Horizontal List Box" Height="300" Width="400">
  6:     <Grid>        
  7:         <ListBox Name="list" Margin="5" HorizontalContentAlignment="Stretch">
  8:             <ListBox.ItemsPanel>
  9:                 <ItemsPanelTemplate>
 10:                     <StackPanel Margin="5" Orientation="Horizontal">
 11:                     </StackPanel>
 12:                 </ItemsPanelTemplate>
 13:             </ListBox.ItemsPanel>
 14:             <ListBox.ItemTemplate>
 15:                 <DataTemplate>
 16:                     <Border Margin="5" BorderBrush="Brown" CornerRadius="5"  BorderThickness="2">
 17:                         <TextBlock Margin="5" FontSize="14" Text="{Binding}"/>
 18:                     </Border>
 19:                 </DataTemplate>
 20:             </ListBox.ItemTemplate>
 21:         </ListBox>
 22:     </Grid>
 23: </Window>

Here is complete C# code of this project.

  1: using System;
  2: using System.Collections.Generic;
  3: using System.Linq;
  4: using System.Text;
  5: using System.Windows;
  6: using System.Windows.Controls;
  7: using System.Windows.Data;
  8: using System.Windows.Documents;
  9: using System.Windows.Input;
 10: using System.Windows.Media;
 11: using System.Windows.Media.Imaging;
 12: using System.Windows.Navigation;
 13: using System.Windows.Shapes;
 15: namespace UIElement
 16: {
 17:     /// <summary>
 18:     /// Interaction logic for Window1.xaml
 19:     /// </summary>
 20:     public partial class Window1 : Window
 21:     {
 22:         public List<String> items
 23:         { get; set; }
 25:         public Window1()
 26:         {            
 27:             InitializeComponent();
 29:             items = new List<string>();
 30:             items.Add("Maryland");
 31:             items.Add("California");
 32:             items.Add("Taxes");
 33:             items.Add("Washington");
 34:             items.Add("Virginia");
 36:             list.ItemsSource = items;
 37:         }
 38:     }
 39: }

Here is the output of this program.




  1. […] Making Horizontal tree view very much similar to making horizontal list box. i.e. we are going to use the ItemPanelTemplate class for this. Here is a partial class hierarchy […]

  2. […] We have already saw few examples of ItemPanel Template in ListBox when creating horizontal list box here. We also saw couple of examples of using Radial Panel here and here.  Now we are going to use […]

  3. […] Custom Panel in List Box We have already saw the example of using item panel template here and here. But in both examples we were using the built in template. If we want to use our own panel […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s


%d bloggers like this: