Posted by: Zeeshan Amjad | September 22, 2009

Right to Left Stack in WPF


When we select the stack panel’s orientation Horizontal then by default it insert the data from left to right. Here is a sample code to demonstrate this.

  1: <Window x:Class="WpfStack.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     Title="Horizontal Stack" Height="300" Width="300">
  5:     <StackPanel Orientation="Horizontal">
  6:         <Border Background="Blue" Width="25" Margin="5"></Border>
  7:         <Border Background="Red" Width="25" Margin="5"></Border>
  8:         <Border Background="Green" Width="25" Margin="5"></Border>
  9:         <Border Background="Yellow" Width="25" Margin="5"></Border>
 10:     </StackPanel>
 11: </Window>
 12: 

Here is the output of this program.

HorizontalStack_01

If we want to make a horizontal stack that grows from right to left then we have multiple options. First option came in mind is a custom layout, i.e. create one class inherited by Panel class and override ArrangeOveride and MeasureOverride functions.

But there is one simple method to create horizontal right to left stack. We can use the dock panel and dock every item at the right hand side. Here is a XAML code for this.

  1: <Window x:Class="WpfStack.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     Title="Horizontal Stack" Height="300" Width="300">
  5:     <DockPanel>
  6:         <Border DockPanel.Dock="Right" Background="Blue" Width="25" Margin="5"></Border>
  7:         <Border DockPanel.Dock="Right" Background="Red" Width="25" Margin="5"></Border>
  8:         <Border DockPanel.Dock="Right" Background="Green" Width="25" Margin="5"></Border>
  9:         <Border DockPanel.Dock="Right" Background="Yellow" Width="25" Margin="5"></Border>
 10:     </DockPanel>
 11: </Window>
 12: 

Here is the output of the program.

HorizontalStack_02 

This is quite close to our requirement except the last element is not at required position. This is because in doc panel the last element get the remaining space. We can easily fix this problem by adding one dummy element after adding all the required element. Here is XAML code of this.

  1: <Window x:Class="WpfStack.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     Title="Horizontal Stack" Height="300" Width="300">
  5:     <DockPanel>
  6:         <Border DockPanel.Dock="Right" Background="Blue" Width="25" Margin="5"></Border>
  7:         <Border DockPanel.Dock="Right" Background="Red" Width="25" Margin="5"></Border>
  8:         <Border DockPanel.Dock="Right" Background="Green" Width="25" Margin="5"></Border>
  9:         <Border DockPanel.Dock="Right" Background="Yellow" Width="25" Margin="5"></Border>
 10:         <Border></Border>
 11:     </DockPanel>
 12: </Window>
 13: 

Here is the output of this program.

HorizontalStack_03

Advertisements

Responses

  1. Thank you. It was useful to me

    • Thanks for visiting.


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: