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.

Template_02

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

Template_04

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.

ListBox

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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  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>
 24: 

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;
 14: 
 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; }
 24: 
 25:         public Window1()
 26:         {            
 27:             InitializeComponent();
 28: 
 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");
 35: 
 36:             list.ItemsSource = items;
 37:         }
 38:     }
 39: }
 40: 

Here is the output of this program.

Horizontal_ListBox_02

Advertisements

Responses

  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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

Categories

%d bloggers like this: