Posted by: Zeeshan Amjad | December 17, 2009

Diagonal List Box item


We have already seen how to make the horizontal list box using the item panel template. Here is a class diagram of item panel template.

Template_02

Item panel template is used with ItemsControl or any class inherited by it. This relationship is shown 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

We can change the layout of all items of list box, because it is already inherited by UIElement class. Here is a class diagram of Transformation class.

GeneralTransform 

Here is a simple XAML code to apply transformation on individual item in list box.

  1: <ListBox.ItemsPanel>
  2: 	<ItemsPanelTemplate>                    
  3: 		<WrapPanel>
  4: 			<WrapPanel.LayoutTransform>
  5: 				<RotateTransform Angle="45"/>
  6: 			</WrapPanel.LayoutTransform>
  7: 		</WrapPanel>
  8: 	</ItemsPanelTemplate>
  9: </ListBox.ItemsPanel>
 10: 

Here is complete XAML code of this program.

  1: <Window x:Class="WpfListBox23.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     Title="List Box" Height="300" Width="300">
  5:     <Grid>
  6:         <ListBox Name="list" Margin="5">
  7:             <ListBox.ItemsPanel>
  8:                 <ItemsPanelTemplate>                    
  9:                     <WrapPanel>
 10:                         <WrapPanel.LayoutTransform>
 11:                             <RotateTransform Angle="45"/>
 12:                         </WrapPanel.LayoutTransform>
 13:                     </WrapPanel>
 14:                 </ItemsPanelTemplate>
 15:             </ListBox.ItemsPanel>
 16:             
 17:             <ListBox.ItemTemplate>
 18:                 <DataTemplate>
 19:                     <Border Margin="3" BorderBrush="Brown" BorderThickness="1" CornerRadius="3">
 20:                         <TextBlock Margin="3" Text="{Binding}"/>
 21:                     </Border>
 22:                 </DataTemplate>
 23:             </ListBox.ItemTemplate>
 24:         </ListBox>
 25:     </Grid>
 26: </Window>
 27: 

Here is complete C# code of this program.

  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 WpfListBox23
 16: {
 17:     /// <summary>
 18:     /// Interaction logic for Window1.xaml
 19:     /// </summary>
 20:     public partial class Window1 : Window
 21:     {
 22:         public Window1()
 23:         {
 24:             InitializeComponent();
 25: 
 26:             List<String> lst = new List<string>();
 27: 
 28:             lst.Add("Maryland");
 29:             lst.Add("Virginia");
 30:             lst.Add("West Virginia");
 31:             lst.Add("Ohio");
 32:             lst.Add("New York");
 33:             lst.Add("New Jersey");
 34:             lst.Add("Pennsylvania");
 35:             lst.Add("Delaware");
 36:             lst.Add("Tennessee");
 37: 
 38:             list.ItemsSource = lst;
 39:         }
 40:     }
 41: }
 42: 

This is the output of this program

DiagonalListBox

Advertisements

Responses

  1. […] 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 then the […]

  2. perfect.


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: