Post
Ask Question

WPF WrapPanel Tutorial

WPF WrapPanel

 
WPF WrapPanel control is a panel that positions child elements in sequential position from left to right by default. If child elements that are stacked don’t fit in the row or column they are in, the remaining elements will wrap around in the same sequence. The following is an example of two wrap panels, one is horizontal and the second is vertical. 
 
WPF WrapPanel 
 
The WrapPanel element in XAML represents a Wrap Panel WPF control.
 
The following code snippet declares a WrapPanel in XAML and sets its height, width, and background properties. 
  1. <WrapPanel Width="300" Height="200"  
  2.            Background="LightBlue" />  
Note: To test this code, create a WPF app in Visual Studio and replace default Grid panel with the above code. 
 

Set WrapPanel Orientation

 
The Orientation property sets the wrapping of child elements. It can either be horizontally or vertically. When we use the horizontal orientation, child content forms horizontal rows. When we use a vertical orientation, child content is first positioned in a vertical column.
 
The following code snippet sets the Orientation of a WrapPanel to Horizontal. 
  1. <WrapPanel Orientation=”Horizontal”>    
  2.  Children    
  3. </WrapPanel>    
Listing 1 is the complete code that defines a WrapPanel and sets the Orientation, ItemHeight, and ItemWidth properties of a WrapPanel in XAML. This below code will have every item of a WrapPanel have height and width 100 respectively.  
  1. <Window x:Class="WrapPanelSample.Window1"  
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.     Title="Window1" Height="400" Width="539.426" Name="RootWindow">  
  5.   
  6.   <WrapPanel Width="300" Height="200"  
  7.            Background="LightBlue" Orientation="Vertical"   
  8.            ItemHeight="100" ItemWidth="100" />  
  9. </Window>  
Listing 1.
 
Note: If you do not specify ItemHeight and ItemWidth properties of a WrapPanel, the default height and width of child items within a WrapPanel will be child elements height and width.
 
The code example in Listing 2 adds various child elements to a Wrap Panel. 
  1. <WrapPanel>  
  2.     <Ellipse Width="100" Height="100" Fill="Red" />  
  3.     <Separator Width="10" />  
  4.     <Button Background="Orange" Width="180" Height="50"  
  5.             FontFamily="Georgia" FontSize="18"   
  6.             FontWeight="Bold" Name="ClickMeButton" >Click Me button</Button>  
  7.     <Separator Width="10" />  
  8.     <TextBox Height="50" Width="200" Name="Button1" />  
  9.     <Rectangle Width="100" Height="100" Fill="Green" />  
  10. </WrapPanel>  
Listing 2.
 
The XAML code example in Listing 3 declares a WrapPanel control, adds 8 ellipse to the panel, and keeps its orientation to horizontal by default.
  1. <WrapPanel >  
  2.     <Ellipse Width="100" Height="100" Fill="Red" />  
  3.     <Ellipse Width="90" Height="90" Fill="Orange" />  
  4.     <Ellipse Width="80" Height="80" Fill="Yellow" />  
  5.     <Ellipse Width="70" Height="70" Fill="LightGreen" />  
  6.     <Ellipse Width="60" Height="60" Fill="Green" />  
  7.     <Ellipse Width="50" Height="50" Fill="LightBlue" />  
  8.     <Ellipse Width="40" Height="40" Fill="Blue" />  
  9.     <Ellipse Width="30" Height="30" Fill="Black" />  
  10. </WrapPanel>  
Listing 3.
 
The output looks like Figure 1 where all child controls are wrapped horizontally.
 
WPF WrapPanel 
 
Figure 1. 
 
Now if you change orientation to vertical like the following code:
  1. <WrapPanel Orientation="Vertical">  
The output looks like Figure 2. As you can see Figure 2, the new controls are aligned vertically.
 
Vertical WrapPanel 
 
Figure 2. 
 
The WrapPanel class in WPF represents a WrapPanel. The following code sample in Listing 4 creates a WrapPanel dynamically, sets its properties and adds five ellipses. The last line of the code sets the WrapPanel as the content of main windows, Name RootWindow. 
  1. private void CreateDynamicWrapPanel()    
  2. {    
  3.     // Create a WrapPanel and set its properties    
  4.     WrapPanel dynamicWrapPanel = new WrapPanel();    
  5.     dynamicWrapPanel.Background = new SolidColorBrush(Colors.LightBlue);    
  6.     dynamicWrapPanel.Orientation = Orientation.Horizontal;    
  7.     
  8.     // Create Ellipses and add to StackPanel    
  9.     Ellipse redCircle = new Ellipse();    
  10.     redCircle.Width = 100;    
  11.     redCircle.Height = 100;    
  12.     redCircle.Fill = new SolidColorBrush(Colors.Red);    
  13.     dynamicWrapPanel.Children.Add(redCircle);    
  14.     
  15.     Ellipse orangeCircle = new Ellipse();    
  16.     orangeCircle.Width = 80;    
  17.     orangeCircle.Height = 80;    
  18.     orangeCircle.Fill = new SolidColorBrush(Colors.Orange);    
  19.     dynamicWrapPanel.Children.Add(orangeCircle);    
  20.     
  21.     Ellipse yellowCircle = new Ellipse();    
  22.     yellowCircle.Width = 60;    
  23.     yellowCircle.Height = 60;    
  24.     yellowCircle.Fill = new SolidColorBrush(Colors.Yellow);    
  25.     dynamicWrapPanel.Children.Add(yellowCircle);    
  26.     
  27.     Ellipse greenCircle = new Ellipse();    
  28.     greenCircle.Width = 40;    
  29.     greenCircle.Height = 40;    
  30.     greenCircle.Fill = new SolidColorBrush(Colors.Green);    
  31.     dynamicWrapPanel.Children.Add(greenCircle);    
  32.     
  33.     Ellipse blueCircle = new Ellipse();    
  34.     blueCircle.Width = 20;    
  35.     blueCircle.Height = 20;    
  36.     blueCircle.Fill = new SolidColorBrush(Colors.Blue);    
  37.     dynamicWrapPanel.Children.Add(blueCircle);    
  38.     
  39.     // Display WrapPanel into a Window    
  40.     RootWindow.Content = dynamicWrapPanel;    
  41. }  
Listing 4.
 
The complete Window class is listed in Listing 5.  
  1. public partial class Window1 : Window      
  2. {      
  3.     public Window1()      
  4.     {      
  5.         InitializeComponent();      
  6.         CreateDynamicWrapPanel();      
  7.     }      
  8.       
  9.     private void CreateDynamicWrapPanel()      
  10.     {      
  11.         // Create a WrapPanel and set its properties      
  12.         WrapPanel dynamicWrapPanel = new WrapPanel();      
  13.         dynamicWrapPanel.Background = new SolidColorBrush(Colors.LightBlue);      
  14.         dynamicWrapPanel.Orientation = Orientation.Horizontal;      
  15.       
  16.         // Create Ellipses and add to StackPanel      
  17.         Ellipse redCircle = new Ellipse();      
  18.         redCircle.Width = 100;      
  19.         redCircle.Height = 100;      
  20.         redCircle.Fill = new SolidColorBrush(Colors.Red);      
  21.         dynamicWrapPanel.Children.Add(redCircle);      
  22.       
  23.         Ellipse orangeCircle = new Ellipse();      
  24.         orangeCircle.Width = 80;      
  25.         orangeCircle.Height = 80;      
  26.         orangeCircle.Fill = new SolidColorBrush(Colors.Orange);      
  27.         dynamicWrapPanel.Children.Add(orangeCircle);      
  28.       
  29.         Ellipse yellowCircle = new Ellipse();      
  30.         yellowCircle.Width = 60;      
  31.         yellowCircle.Height = 60;      
  32.         yellowCircle.Fill = new SolidColorBrush(Colors.Yellow);      
  33.         dynamicWrapPanel.Children.Add(yellowCircle);      
  34.       
  35.         Ellipse greenCircle = new Ellipse();      
  36.         greenCircle.Width = 40;      
  37.         greenCircle.Height = 40;      
  38.         greenCircle.Fill = new SolidColorBrush(Colors.Green);      
  39.         dynamicWrapPanel.Children.Add(greenCircle);      
  40.       
  41.         Ellipse blueCircle = new Ellipse();      
  42.         blueCircle.Width = 20;      
  43.         blueCircle.Height = 20;      
  44.         blueCircle.Fill = new SolidColorBrush(Colors.Blue);      
  45.         dynamicWrapPanel.Children.Add(blueCircle);      
  46.       
  47.         // Display Panel into a Window      
  48.         RootWindow.Content = dynamicWrapPanel;      
  49.     }        
  50. }  
Listing 5.
 
Summary
 
In this article, I discussed WrapPanel in WPF and how to use it in your WPF app. 


Similar Articles
Mindcracker
Founded in 2003, Mindcracker is the authority in custom software development and innovation. We put best practices into action. We deliver solutions based on consumer and industry analysis.