DockPanel in WPF

DockPanel is a Panel where each child elements dock to one of the four edges. DockPanel enables docking of child elements to an entire side of the panel streching it to fill entire Height or Width.

Let's Begin and Create various layout using DockPanel.

In the First Example, I have added 6 Button to a DockPanel. By Default, Elements inside the DockPanel Dock towards left and the Last Element inside the panel expands to take the remaining space inside the panel.

<Window x:Class="DockPanelExample1.MainWindow"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         Title="DockPanel Example" Height="350" Width="525">     <DockPanel>         <Button Content="Button1"></Button>         <Button Content="Button2"></Button>         <Button Content="Button3"></Button>         <Button Content="Button4"></Button>         <Button Content="Button5"></Button>         <Button Content="Button6"></Button>     </DockPanel> </Window>

Preview:

We can prevent or turn off the last child element to fill the remaining space by setting LastChildFill property to False.

<DockPanel LastChildFill="False">         <Button Content="Button1"></Button>         <Button Content="Button2"></Button>         <Button Content="Button3"></Button>         <Button Content="Button4"></Button>         <Button Content="Button5"></Button>         <Button Content="Button6"></Button> </DockPanel>

Preview:

We can dock an element on an edge other than Left(which is default) by using DockPanel.Dock property. For Example, If we want to dock a button to the top of DockPanel, We have to set DockPanel.Dock="Top"  in Button Element. This will Stretch the Button to the entire width of the DockPanel but height is set according to the content of it or MinHeight property.

<DockPanel>         <Button Content="Button1" DockPanel.Dock="Top"></Button>         <Button Content="Button2" DockPanel.Dock="Bottom"></Button>         <Button Content="Button3" DockPanel.Dock="Left"></Button>         <Button Content="Button4" DockPanel.Dock="Right"></Button>         <Button Content="Button5" DockPanel.Dock="Bottom"></Button>         <Button Content="Button6" DockPanel.Dock="Bottom"></Button> </DockPanel>

Preview:

In above Example, Button6 is filling the Entire remaining space. To prevent this, We have to set LastChildFill property of DockPanel  to False.

<DockPanel LastChildFill="False">         <Button Content="Button1" DockPanel.Dock="Top"></Button>         <Button Content="Button2" DockPanel.Dock="Bottom"></Button>         <Button Content="Button3" DockPanel.Dock="Left"></Button>         <Button Content="Button4" DockPanel.Dock="Right"></Button>         <Button Content="Button5" DockPanel.Dock="Bottom"></Button>         <Button Content="Button6" DockPanel.Dock="Bottom"></Button> </DockPanel>

Preview:

We can also Adjust the HorizontalAlignment property of Child Elemnts in a DockPanel.

<DockPanel>         <Button Content="Top Button" DockPanel.Dock="Top"></Button>         <Button Content="Bottom Button" DockPanel.Dock="Bottom"></Button>         <Button Content="Left Button" DockPanel.Dock="Left"></Button>         <Button Content="Right Button" DockPanel.Dock="Right"></Button>         <Button Content="Left-Aligned Bottom Button" DockPanel.Dock="Bottom" HorizontalAlignment="Left"></Button>         <Button Content="Left-Aligned Bottom Button" DockPanel.Dock="Bottom" HorizontalAlignment="Right"></Button>         <Button Content="Left-Aligned Bottom Button" DockPanel.Dock="Bottom" HorizontalAlignment="Center"></Button>         <Button Content="Remaining Spave" DockPanel.Dock="Bottom"></Button> </DockPanel>

Preview:

DockPanel is mainly used to place StackPanel, WrapPanel containers in an appropiate region of a window. Let's Create a nested layout using DockPanel and StackPanel.

In this Example, We used DockPanel to dock the StackPanel and TextBox position. 

<DockPanel LastChildFill="True">         <StackPanel Orientation="Horizontal" DockPanel.Dock="Bottom" Margin="10" HorizontalAlignment="Center">             <Button Content="Submit" Padding="10"></Button>             <Button Content="Cancel" Margin="10,0,0,0" Padding="10"></Button>         </StackPanel>         <TextBox DockPanel.Dock="Top" Margin="10"></TextBox> </DockPanel>

Preview:

I Hope you Like it. Thanks.

Read More

Mini Paint Application using c#

In this Article, I am going to show you How to create Mini Paint Application using C# Windows Form Application . I am going to show some basic features of Paint Application. Before starting, I Hope you have the Basic Knowledge of GDI+ Graphics Functionality. I have added comments in the Code so that you can easily understand the code.

Let's understand the Mini Paint Application:

using System; using System.Drawing; using System.Windows.Forms; namespace MiniPaint {     public partial class Form1 : Form     {         public Form1()         {             InitializeComponent();             g = pnl_Draw.CreateGraphics();         }         bool startPaint = false;         Graphics g;         //nullable int for storing Null value         int? initX = null;         int? initY = null;         bool drawSquare = false;         bool drawRectangle = false;         bool drawCircle = false;         //Event fired when the mouse pointer is moved over the Panel(pnl_Draw).         private void pnl_Draw_MouseMove(object sender, MouseEventArgs e)         {             if(startPaint)             {                 //Setting the Pen BackColor and line Width                 Pen p = new Pen(btn_PenColor.BackColor,float.Parse(cmb_PenSize.Text));                 //Drawing the line.                 g.DrawLine(p, new Point(initX ?? e.X, initY ?? e.Y), new Point(e.X, e.Y));                 initX = e.X;                 initY = e.Y;             }         }         //Event Fired when the mouse pointer is over Panel and a mouse button is pressed         private void pnl_Draw_MouseDown(object sender, MouseEventArgs e)         {             startPaint = true;             if (drawSquare)             {                 //Use Solid Brush for filling the graphic shapes                 SolidBrush sb = new SolidBrush(btn_PenColor.BackColor);                 //setting the width and height same for creating square.                 //Getting the width and Heigt value from Textbox(txt_ShapeSize)                 g.FillRectangle(sb, e.X, e.Y, int.Parse(txt_ShapeSize.Text), int.Parse(txt_ShapeSize.Text));                 //setting startPaint and drawSquare value to false for creating one graphic on one click.                 startPaint = false;                 drawSquare = false;             }             if(drawRectangle)             {                 SolidBrush sb = new SolidBrush(btn_PenColor.BackColor);                 //setting the width twice of the height                 g.FillRectangle(sb, e.X, e.Y, 2*int.Parse(txt_ShapeSize.Text), int.Parse(txt_ShapeSize.Text));                 startPaint = false;                 drawRectangle = false;             }             if(drawCircle)             {                 SolidBrush sb = new SolidBrush(btn_PenColor.BackColor);                 g.FillEllipse(sb, e.X, e.Y, int.Parse(txt_ShapeSize.Text), int.Parse(txt_ShapeSize.Text));                 startPaint = false;                 drawCircle = false;             }         }         //Fired when the mouse pointer is over the pnl_Draw and a mouse button is released.         private void pnl_Draw_MouseUp(object sender, MouseEventArgs e)         {             startPaint = false;             initX = null;             initY = null;         }         //Button for Setting pen Color         private void button1_Click(object sender, EventArgs e)         {             //Open Color Dialog and Set BackColor of btn_PenColor if user click on OK             ColorDialog c = new ColorDialog();             if(c.ShowDialog()==DialogResult.OK)             {                 btn_PenColor.BackColor = c.Color;             }         }         //New         private void newToolStripMenuItem_Click(object sender, EventArgs e)         {             //Clearing the graphics from the Panel(pnl_Draw)             g.Clear(pnl_Draw.BackColor);             //Setting the BackColor of pnl_draw and btn_CanvasColor to White on Clicking New under File Menu             pnl_Draw.BackColor = Color.White;             btn_CanvasColor.BackColor = Color.White;         }        //Setting the Canvas Color         private void btn_CanvasColor_Click_1(object sender, EventArgs e)         {             ColorDialog c = new ColorDialog();             if(c.ShowDialog()==DialogResult.OK)             {                 pnl_Draw.BackColor = c.Color;                 btn_CanvasColor.BackColor = c.Color;             }         }         private void btn_Square_Click(object sender, EventArgs e)         {             drawSquare = true;         }         private void btn_Rectangle_Click(object sender, EventArgs e)         {             drawRectangle = true;         }         private void btn_Circle_Click(object sender, EventArgs e)         {             drawCircle = true;         }         //Exit under File Menu         private void exitToolStripMenuItem_Click(object sender, EventArgs e)         {             if(MessageBox.Show("Do you want to Exit?","Exit",MessageBoxButtons.YesNo,MessageBoxIcon.Information)==DialogResult.Yes)             {                 Application.Exit();             }         }         //About under Help Menu         private void aboutMiniPaintToolStripMenuItem_Click(object sender, EventArgs e)         {             About a = new About();             a.ShowDialog();         }     } }

Final Preview:

Hope you Like it. Thanks.

[Download Source Code via Google Drive]

Read More