Posted by: Zeeshan Amjad | October 29, 2009

Horizontal List Box


We can easily change the layout of any UI Element. Let’s take a look at List Box. If we want to make a horizontal list box then we can use the RotateTranform class. there are other transform classess too. Here is a partial class diagram of GeneralTransform class.

GeneralTransform

Here is a XAML file for this.

  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:     Title="Horizontal List Box" Height="300" Width="300">
  5:     <Grid>
  6:         <Grid.LayoutTransform>
  7:             <RotateTransform Angle="90"/>
  8:         </Grid.LayoutTransform>
  9:         
 10:         <ListBox Name="list" Margin="5">
 11: 
 12:         </ListBox>
 13:     </Grid>
 14: </Window>
 15: 

Here is the C# code of this

  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 Window1()
 23:         {
 24:             InitializeComponent();
 25: 
 26:             List<String> items = new List<string>();
 27:             items.Add("Maryland");
 28:             items.Add("California");
 29:             items.Add("Taxes");
 30:             items.Add("Washington");
 31:             items.Add("Virginia");
 32: 
 33:             list.ItemsSource = items;
 34:         }
 35:     }
 36: }
 37: 

Here is the output of this program.

Horizontal_ListBox

In fact we can rotate it with any angle. Here is a 45 degree rotation of list box.

  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:     Title="Diagonal List Box" Height="300" Width="300">
  5:     <Grid>
  6:         <Grid.LayoutTransform>
  7:             <RotateTransform Angle="45"/>
  8:         </Grid.LayoutTransform>
  9:         
 10:         <ListBox Name="list" Margin="5">
 11:         </ListBox>
 12:     </Grid>
 13: </Window>
 14: 

Here is its output.

DiagonalListBox

Advertisements

Responses

  1. Thats not exactly what I had in mind when searching for “Horizontal Listbox”


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: