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" />
  9. </WrapPanel>
  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>
  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: