How to implement Panel (Layout) Controls in WPF Applications with Example

On By
A WPF application contains a good number of User Interface (UI) elements such as user input controls ,Menu systems, graphical content,status bar etc.
Why we use panel controls in WPF:-When we place content within a window that does not make use of panels,it is positioned dead center within the window's container.If we want to place multiple element directly within window, you will get an error message (compile time errors).This error comes due to assign multiple objects in its content properties. A window can assign only a single object to its contents property. when a window needs to multiple elements,they must be putted within any number of panels. All the panel controls come under System.Windows.Controls namespace.To build complex user interfaces , panel controls can be intermixed(ex. A Dock panel contains Stack panel controls) to provide  for a great deal of flexibility and control. 

Example:-

<Window x:Class="Wpf_panels.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="msdotnet.co.in" Height="350" Width="525">
    <Label Name="mylb" Width="90" Height="30" FontSize="15">Welcome to my website</Label> 
    <Button Name="bnt" Width="90" Height="20" >Submit</Button>
</Window>
Error Message :-
You will get following error message: "The property Content is set more than once".
There are following panel controls used in WPF Which are given below :-
  • Canvas
  • DockPanel
  • Grid
  • StackPanel
  • WrapPanel
1.) Canvas :- This provides a "classic" mode of content placement.In Canvas panel control,items stay exactly where we put them at design time.
To define content in Canvas panel control we use following tags as given below:-
  <Canvas>    --> opening tag
.......Contents here..............
</Canvas>     -->closing tag

 Example :- Suppose we want to design a login page then we will  have to Create Labels ,Button, Text Boxes ,etc. as given below:-
Syntax:-

<Window x:Class="Wpf_panels.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="msdotnet.co.in" Height="350" Width="525" FontSize="15">
    <Canvas Background="Pink">
        <Label Name="mylb" Width="207" Height="30" FontSize="15" Canvas.Left="123" Canvas.Top="28" FontStyle="Normal" Foreground="Blue">Welcome to my website</Label>
        <Label Name="mylb1" Width="113" Height="30" FontSize="15" Canvas.Left="0" Canvas.Top="132">UserName</Label>
        <TextBox Canvas.Left="140" Canvas.Top="132" Name="txt1" Width="190" Height="26"/>     
        <Label Name="mylb2" Width="113" Height="30" FontSize="15" Canvas.Left="0" Canvas.Top="176">Password</Label>
        <TextBox Canvas.Left="140" Canvas.Top="176" Name="txt2" Width="190" Height="26"/>
        <Button Name="bnt1" Width="90" Height="29" Canvas.Left="197" Canvas.Top="217">Submit</Button>   
    </Canvas>
</Window>
Output:-
canvas
Note:-
  • Here You can see, all controls(labels,text boxes and button) are putted within opening(<Canvas>) and closing(</Canvas>) tag of  the Canvas panel .
  • You can make  any complex designs with the help of Canvas panel  in WPF easily.
  • The order of codes does not dependent on the placement of the controls.You can place any codes anywhere within canvas tag ,But position should be different(left,right,etc.).
2.) DockPanel :- This panel is basically used to lock content to a specified side of panel(Top,Bottom,left,right). This is called master panel that means,this control contains any number of additional  panel for grouping of related content.we can attached property syntax as seen with the canvas type. We can't lock Dock panel contents where we put them at design time. The benefit of using DockPanel types is that as the user resizes the window,each element remains "connected" to the specified of Panel (Via DockPanel.Dock)
 Syntax :-

<Window x:Class="Wpf_panels.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Example of Dockpanel" Height="300" Width="488">
    <DockPanel Background="Pink">
        <Label DockPanel.Dock="Top" Name="lb1" FontSize="20" HorizontalAlignment="Center">Welocme to msdotnet.co.in DockPanel</Label>
        <Label DockPanel.Dock="Top" Name="lb2" FontSize="16" HorizontalAlignment="Left" Height="31" Width="107">User Name</Label>
        <TextBox DockPanel.Dock="Top" Height="33" Name="textBox1" Width="186" HorizontalAlignment="Left"></TextBox>
        <Label DockPanel.Dock="Top" Name="lb3" FontSize="16" HorizontalAlignment="Left" Height="34" Width="113">Password</Label>
        <TextBox DockPanel.Dock="Top" Height="31" Name="textBox2" Width="186" HorizontalAlignment="Left"></TextBox>
        <Button DockPanel.Dock="Top" Height="37" Name="button1" Width="98" HorizontalAlignment="Left">Login</Button>
    </DockPanel>
</Window>
Output :-
dock
Note:- If we add multiple elements to the same side of a DockPanel ,they will be stacked along the specified edge in the order that they declared .

3.) WrapPanel :-  A WrapPanel allows us to define content that will flow across the panel as the window is resized. When positioning elements in a WrapPanel,We don't specify top,bottom,left and right docking values as we do with the canvas.In a WrapPanel,each sub element is free to define height and width value (among other property values) to control its overall size.
By Default, Content within a WrapPanel left to right manner .However , if we change the value of the orientation property to vertical ,we can wrap content in a top to bottom manner.
Ex.       <WrapPanel Background="SkyBlue" Orientation="Vertical">
Syntax : -

<Window x:Class="Wpf_panels.Window2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Example of Wrap Panel" Height="300" Width="477" Loaded="Window_Loaded">
    <WrapPanel Background="SkyBlue" Orientation="Vertical">
        <Label Name="lb1" Width="209" Height="36" FontSize="18" HorizontalContentAlignment="Center">Welcme to Wrap Panel</Label>
        <Label Name="lb2" FontSize="15" >Enter Name</Label>
        <TextBox Name="txt1" Background="AliceBlue"></TextBox>
        <Label Name="lb3" FontSize="15">Enter Aera code</Label>
        <TextBox Name="txt2" Background="AliceBlue"></TextBox>
        <Button Name="bnt" Width="90" FontFamily="Arial" Background="LightBlue">OK</Button>
    </WrapPanel>
</Window>
Output:-
wrap

4.)StackPanel  :- A StackPanel control arranges content into a single line that can be oriented horizontally or vertically .This based on the value assigned to the orientation property.
You can assign property to Vertical as given below codes:-
<StackPanel Background="LightCoral" Orientation="Vertical">
 Syntax :-

<Window x:Class="Wpf_panels.Window3"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Example of Stack Panel" Height="300" Width="556">
    <StackPanel Background="LightCoral" Orientation="Vertical">
        <Label Name="lb1" FontSize="20" HorizontalContentAlignment="Center" Width="229" Height="90">Welcome to Stack Panel</Label>
        <Label Name="lb2" FontSize="18" >Registration Id</Label>
        <TextBox Name="txt1" Background="AliceBlue" Width="273" HorizontalAlignment="Left"></TextBox>
        <Label Name="lb3" FontSize="18" >Password</Label>
        <TextBox Name="txt2" Background="AliceBlue" Width="273" HorizontalAlignment="Left"></TextBox>
        <Button Name="bnt" FontSize="18" Width="134" Height="29" HorizontalAlignment="Left">Proceed</Button>
    </StackPanel>
</Window>
Output:-

4.)GridPanel :- A GridPanel  is already defines in every WPF Application. A GridPanel helps to arrange the content within a series of cells, maintained within tabular Grid. This Panel is like a HTML table .When we define any grid panels ,we have to follow  three steps as given below:-
  • Define each column in the Grid 
  • Define each row in the Grid
  • Assign content to each cell of the Grid using Attached property syntax.
Syntax :-

<Window x:Class="Wpf_panels.Window4"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Welcoe to Grid Panel" Height="300" Width="526">
    <Grid Background="AliceBlue">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
       <Label Name="lb1" FontSize="16" Grid.Column="0" Grid.Row="0">Enter Book Name</Label>
       <TextBox Name="txt1" Width="220" Height="25" Grid.Column="1" Grid.Row="0"></TextBox>
       <Label Name="lb2" FontSize="16" Grid.Column="0"  Grid.Row="1" HorizontalAlignment="Left" Width="149">Author Name</Label>
        <TextBox Name="txt2" Width="220" Height="25" Grid.Column="1" Grid.Row="1"></TextBox>
        <Button Name="bnt" Width="100" Height="30" FontSize="18" Grid.Column="1" Grid.Row="2">Check</Button>
    </Grid>
</Window>
Output:-

Note:- You can implement this whole concepts in your WPF Window .
 There are some steps to implement this concepts on WPF Window as given below:-
Step 1 :- First open your visual studio --> File -->New --> Project --> WPF Application --> OK .
wpf
Step 2 :- Write XAML codes as shown above panels codes --> You will see following output (Example of canvas panel) as shown below:-
wpf_app
Step 3 :- Now open Solution Explorer --> Add New Item --> select Window (wpf) -->OK  --> Similarly Implement other controls also --> link window to another window using following codes.

using System;
using System.Data;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace Wpf_panels
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void bnt1_Click(object sender, RoutedEventArgs e)
        {
            Window1 w1 = new Window1();
            MainWindow obj = new MainWindow();  
            w1.Show();
            obj.Hide();
            this.Close();
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            Window2 W2 = new Window2();
            MainWindow obj = new MainWindow();
            W2.Show();
            obj.Hide();
            this.Close(); 
        }
        private void button2_Click(object sender, RoutedEventArgs e)
        {
            Window3 w3 = new Window3();
            MainWindow obj = new MainWindow();
            w3.Show();
            obj.Hide();
            this.Close();
        }
        private void button3_Click(object sender, RoutedEventArgs e)
        {
            Window4 w4 = new Window4();
            MainWindow obj = new MainWindow();
            w4.Show();
            obj.Hide();
            this.Close();
        }
    }
}
 
Step 4 :- You can  Download Whole Attached file from below --> and  Run directly it on your visual studio. 
Note:-  
You can  learn lots of thing about WPF from this Application.
For More ...
  1. Namespace in Wpf with Examples
  2. WCF Concepts in APS.NET Application
  3. How to Connect database through OleDb and Ado .Net
  4. How to send forget password in asp.net application
  5. Views  concepts in sql server
  6. Threading concepts in c#
  7. How to use Navigation control in asp,net
  8. How to add controls at run time in asp.net
  9. Directory and directory info class in c#
  10. Collection concepts in c#
Download Whole Attached File
       Download
Subscribe through email and get Free updates in inbox
Please like and share this post with your friends...

You May Also Like...

0 comments:

Post a Comment

Powered by Blogger.