Post
Ask Question

Overview of Panels in WPF

Step 1: Create an empty WPF using Visual Studio, enter the name for the application and click on OK



Step 2: Add elements with help of Stackpanel.

Code:

  1. <StackPanel Margin="-10,0,9.667,-0.333">  
  2.     <Button Name="Hi" Margin="45,45,0,0" Content="Name" />  
  3.     <Button Name="hw" Margin="45,45,0,0" Content="Name" />  
  4.     <Button Name="r" Margin="45,45,0,0" Content="Name" />  
  5.     <Button Name="u" Margin="45,45,0,0" Content="Name" />  
  6. </StackPanel>  


Code of Mainwindow.xaml:
  1. <Window x:Class="Panels_WPF.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525">  
  2.     <Grid>  
  3.         <StackPanel Margin="-10,0,9.667,-0.333">  
  4.             <Button Name="Hi" Margin="45,45,0,0" Content="Name" />  
  5.             <Button Name="hw" Margin="45,45,0,0" Content="Name" />  
  6.             <Button Name="r" Margin="45,45,0,0" Content="Name" />  
  7.             <Button Name="u" Margin="45,45,0,0" Content="Name" />  
  8.         </StackPanel>  
  9.     </Grid>  
  10. </Window>  
Step 3: Add a new window by right clicking on the solution name and name it as Wrapapnel.xaml for Wrappanel

Code of Wrappanel.xaml:
  1. <Window x:Class="Panels_WPF.Wrappanel" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Wrappanel" Height="300" Width="300">  
  2.     <Grid>  
  3.         <WrapPanel>  
  4.             <Button Name="Hi" Margin="45,45,0,0" Content="Name" />  
  5.             <Button Name="hw" Margin="45,45,0,0" Content="Name" />  
  6.             <Button Name="r" Margin="45,45,0,0" Content="Name" />  
  7.             <Button Name="u" Margin="45,45,0,0" Content="Name" />  
  8.   
  9.         </WrapPanel>  
  10.   
  11.     </Grid>  
  12. </Window>  
The window will be as such for wrappanel,



Step 4: Now make the button at Mainwindow.xaml for Wrappanel to open this window using the following code:

Double click on Wrap panel button and write the following code at Mainwindow.xaml.cs
  1. Wrappanel p = newWrappanel();  
  2. p.Show();  
Code for mainwindow.xaml.cs:

  1. using System;  
  2. usingSystem.Collections.Generic;  
  3. usingSystem.Linq;  
  4. usingSystem.Text;  
  5. usingSystem.Threading.Tasks;  
  6. usingSystem.Windows;  
  7. usingSystem.Windows.Controls;  
  8. usingSystem.Windows.Data;  
  9. usingSystem.Windows.Documents;  
  10. usingSystem.Windows.Input;  
  11. usingSystem.Windows.Media;  
  12. usingSystem.Windows.Media.Imaging;  
  13. usingSystem.Windows.Navigation;  
  14. usingSystem.Windows.Shapes;  
  15. namespacePanels_WPF  
  16. {  
  17.     ///<summary>  
  18.     /// Interaction logic for MainWindow.xaml  
  19.     ///</summary>  
  20.     publicpartialclassMainWindow: Window  
  21.     {  
  22.         publicMainWindow()  
  23.         {  
  24.             InitializeComponent();  
  25.         }  
  26.         privatevoidHi_Click(object sender, RoutedEventArgs e)  
  27.         {  
  28.             Wrappanel p = newWrappanel();  
  29.             p.Show();  
  30.         }  
  31.     }  
  32. }  
Step 5: Create a new window the same for Dockpanel and place the elements within the grid using. <Dockpanel></DockPanel>.

The code should be as:
  1. <Window x:Class="Panels_WPF.Dockpanel" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Dockpanel" Height="300" Width="300">  
  2.     <Grid>  
  3.   
  4.         <DockPanel>  
  5.             <Button Name="Hi" Margin="45,45,0,0" Content="Name" />  
  6.             <Button Name="hw" Margin="45,45,0,0" Content="Name" />  
  7.             <Button Name="r" Margin="45,45,0,0" Content="Name" />  
  8.             <Button Name="u" Margin="45,45,0,0" Content="Name" />  
  9.         </DockPanel>  
  10.     </Grid>  
  11. </Window>  


Step 6: Now run the code: