Post
Ask Question

Learn About StackPanel In WPF

Introduction

 
Stack panel is one of the simplest panels to use. It stacks its child elements in a single line, either horizontally or vertically.
 
In real life, we have seen a stack of books, arranged vertically one below another. StackPanel follows the same concept, hence the name StackPanel.
 
Learn About StackPanel In WPF

The default orientation of the StackPanel is Vertical, meaning if you don't specify the orientation property, by default elements will be stacked vertically. Also by default StackPanel stretches its elements. We can use HorizontalAlignment & VerticalAlignment property of child elements to get rid of stretch behaviour.
 
Let's create a user registration form using a stack panel.

First outer stack panel. 
  1. <StackPanel x:Name="StackPanelOuter"    
  2.               Orientation="Vertical">    
  3. </StackPanel>    
We are going to have 4 labels & 4 TextBoxes, 1 Register button & one TextBlock to show the message of a successfully registered user.
 
The main stack panel is going to stack its children vertically, we need to have each child as a child-StackPanel which will have 1 Label & TextBox.
  1. <StackPanel x:Name="StackPanelOuter"    
  2.               Orientation="Vertical">    
  3.       <StackPanel x:Name="StackPanelInnerUserName"    
  4.               Orientation="Horizontal">    
  5.              
  6.       </StackPanel>    
  7.     
  8.       <StackPanel x:Name="StackPanelInnerPassword"    
  9.               Orientation="Horizontal">    
  10.              
  11.       </StackPanel>    
  12.     
  13.       <StackPanel x:Name="StackPanelInnerConfirmPassword"    
  14.               Orientation="Horizontal">    
  15.              
  16.       </StackPanel>    
  17.          
  18.       <StackPanel x:Name="StackPanelInnerEmail"    
  19.               Orientation="Horizontal">    
  20.              
  21.       </StackPanel>    
  22.   </StackPanel>   
Next, let's add those Labels & TextBoxes. They will be aligned Horizontally. In the end Register Button & TextBlock will show a message. 
  1. <StackPanel x:Name="StackPanelOuter"    
  2.                 Orientation="Vertical">    
  3.         <StackPanel x:Name="StackPanelInnerUserName"    
  4.                 Orientation="Horizontal">    
  5.             <Label x:Name="LabelUserName"        
  6.                Content="User Name:" HorizontalAlignment=""    
  7.                Margin="0 10 0 0"/>    
  8.             <TextBox x:Name="TextBoxUserName"      
  9.                  Text="{Binding UserName}"    
  10.                  Height="20"        
  11.                  Width="150"       
  12.                  Margin="0 10 0 0"/>    
  13.         </StackPanel>    
  14.     
  15.         <StackPanel x:Name="StackPanelInnerPassword"    
  16.                 Orientation="Horizontal">    
  17.             <Label x:Name="LabelPassword"         
  18.                Content="Password:" />    
  19.             <PasswordBox  x:Name="TextBoxPassword"        
  20.                  Height="20"        
  21.                  Width="150" />    
  22.         </StackPanel>    
  23.     
  24.   <StackPanel x:Name="StackPanelOuter"    
  25.                 Orientation="Vertical">    
  26.         <StackPanel x:Name="StackPanelInnerUserName"    
  27.                 Orientation="Horizontal" >    
  28.             <Label x:Name="LabelUserName"        
  29.                Content="User Name:"     
  30.                Margin="0 10 0 0"/>    
  31.             <TextBox x:Name="TextBoxUserName"      
  32.                  Text="{Binding UserName}"    
  33.                  Height="20"        
  34.                  Width="150"       
  35.                  Margin="50 10 0 0"/>    
  36.         </StackPanel>    
  37.     
  38.         <StackPanel x:Name="StackPanelInnerPassword"    
  39.                 Orientation="Horizontal">    
  40.             <Label x:Name="LabelPassword"         
  41.                Content="Password:" />    
  42.             <PasswordBox  x:Name="TextBoxPassword"        
  43.                  Height="20"        
  44.                  Width="150"    
  45.                  Margin="60 0 0 0" />    
  46.         </StackPanel>    
  47.     
  48.         <StackPanel x:Name="StackPanelInnerConfirmPassword"    
  49.                 Orientation="Horizontal">    
  50.             <Label x:Name="LabelConfirmPassword"         
  51.                Content="Confirm Password:" />    
  52.             <PasswordBox x:Name="TextBoxConfirmPassword"        
  53.                  Height="20"        
  54.                  Width="150"     
  55.                  Margin="14 0 0 0" />    
  56.         </StackPanel>    
  57.            
  58.         <StackPanel x:Name="StackPanelInnerEmail"    
  59.                 Orientation="Horizontal">    
  60.             <Label x:Name="LabelEmailId"         
  61.                Content="Email:" />    
  62.             <TextBox x:Name="TextBoxEmail"        
  63.                  Height="20"        
  64.                  Width="150"     
  65.                  Margin="80 0 0 0"/>    
  66.         </StackPanel>    
  67.             
  68.         <Button x:Name="ButtonLogin"        
  69.                 Height="20"        
  70.                 Width="100"        
  71.                 Content="Register"        
  72.                 HorizontalAlignment="Center"        
  73.                 Margin="20 10 0 0"      
  74.                 Command="{Binding RegisterButtonClicked}"    
  75.                 />    
  76.     
  77.         <TextBlock x:Name="TextBlockMessage"    
  78.                    Visibility="{Binding IsButtonClicked, Converter={StaticResource BooleanToVisibilityConverter}}"    
  79.                    Text="{Binding UserName, StringFormat='User: {0} is successfully registered!'}"    
  80.                    HorizontalAlignment="Center"    
  81.                    Margin="20 8 0 0"      
  82.                    />    
  83.     </StackPanel>   
We have the body ready, now  it's time for the brain. Let's add our ViewModel.
  1. using Prism.Commands;  
  2. using Prism.Mvvm;  
  3.   
  4. namespace A  
  5. {  
  6.     class MainWindowViewModel : BindableBase  
  7.     {  
  8.         #region Properties  
  9.         private bool _isButtonClicked;  
  10.         public bool IsButtonClicked  
  11.         {  
  12.             get { return _isButtonClicked; }  
  13.             set { SetProperty(ref _isButtonClicked , value); }  
  14.         }  
  15.   
  16.   
  17.         private string _userName;  
  18.         public string UserName  
  19.         {  
  20.             get { return _userName; }  
  21.             set { SetProperty(ref _userName, value); }  
  22.         }  
  23.   
  24.         public DelegateCommand<object> RegisterButtonClicked { get; set; }  
  25.         #endregion  
  26.  
  27.         #region Constructor  
  28.         public MainWindowViewModel()  
  29.         {  
  30.             RegisterButtonClicked = new DelegateCommand<object>(RegisterUser);  
  31.         }  
  32.  
  33.         #endregion  
  34.  
  35.         #region Event Methods  
  36.         private void RegisterUser(object obj)  
  37.         {  
  38.             IsButtonClicked = true;  
  39.         }  
  40.         #endregion  
  41.     }  
  42. } 
Let's see our beautifully stacked screen,
 
Learn About StackPanel In WPF
Perfect!
 

Conclusion

 
In this article, we learned how one can use stackpanel to arrange elements on the screen.
 
This panel is used when one wants to arrange elements in a queue one after another either horizontally or vertically.
 
Feel free to give any suggestions.
 
If you have any doubt or just wants to connect you can reach me @
Thank you all, Happy Coding!


Similar Articles