How to Use Checkbox in WPF

Checkbox is a GUI element that permits the user to make a binary choice i.e. user may have to answer yes or no. Now a days programming have a new option to set the value to null. It means checkbox may be used as a three state which are checked, unchecked and intermediate.

The following screenshot shows three states of a checkbox

In the above image all the three checkboxes have IsThreeState property to true and some more properties like the following code in xaml:

<CheckBox IsThreeState="True" Content="Checked" IsChecked="True"></CheckBox>
<CheckBox IsThreeState="True" Content="UnChecked" IsChecked="False"></CheckBox>
<CheckBox IsThreeState="True" Content="Intermediate" IsChecked="{x:Null}"></CheckBox>

IsChecked property is used to set the state of checkbox. You may have three options for these state values as I have used in above code snippet. Checkbox is mostly used in objective type answers or we can say Boolean type answers. Gender value may also be store through checkbox control.


We can perform the desired function, when the checkbox is checked or unchecked using the events respectively.

private void Checkbox_Checked(object sender, RoutedEventArgs e)
{
MessageBox.Show("Checkbox Checked");
}

private void Checkbox_Unchecked(object sender, RoutedEventArgs e)
{
MessageBox.Show("Checkbox Checked");
}

Each time when a checkbox is checked or unchecked, a message will be shown defined in the above code snippets. To add a checkbox dynamically with checked property true we can write the following code:

CheckBox chkBox = new CheckBox();
chkBox.Name = "checkBox";
chkBox.Content = "Checked";
chkBox.IsChecked = true;
chkBox.IsThreeState = true;
this.Content = chkBox;

The above code will replace all the content of the window with this checkbox. So if you want to add this to any other container like stackpanel or anything, then you have to add this as a children of that container.

How to Implement Custom Control, Currency TextBox: Windows Forms

Currency Textbox, custom control, as the name implies, will accept only numbers, decimals and control characters. None of other type will be allowed in this textbox. This textbox is basically used to input prices, rates or any measurement including precision.

I have discussed about all the events used to create custom textbox. Open your Visual Studio 2013 Windows Forms project and add a new class named “CurrencyTextBox”, inherit this by System.Windows.Forms.TextBox. Go through the following points, they all together will make this textbox:

Property

Property will be used to get or set the value in the textbox.

private decimal currencyValue;
public decimal CurrencyValue
        {
            get { return currencyValue; }
            set { currencyValue = value; }
        }

Constructor

When the object of this class has been created, by-default it’s value is set to zero, as written in the below c# code.

public CurrencyTextBox()
        {
            currencyValue = 0;
        }

OnKeyPress

What is to be allowed to write in the textbox? Decided in this event. The first line is used to call its base class constructor with specified arguments. After this I have used some if conditions to specify which key is to be accepted or which is not. “e.Handled=true” this line is used to stop the character from being entered into the textbox.

protected override void OnKeyPress(KeyPressEventArgs e)
        {
            base.OnKeyPress(e);
            if (!Char.IsDigit(e.KeyChar) && !Char.IsControl(e.KeyChar) && e.KeyChar != '.')
            {
                e.Handled = true;
            }
            if (e.KeyChar == '.' && this.Text.Contains("."))
            {
                e.Handled = true;
            }
            if (e.KeyChar == '.' && this.Text.Length < 1)
            {
                e.Handled = true;
            }
        }

OnValidated

When the focus is changed, this event will convert the entered value into decimal value. Because currency is used in decimal not string.

protected override void OnValidated(EventArgs e)
        {
            Decimal value = Convert.ToDecimal(this.Text);
            this.Text = value.ToString("C");
        }

OnClick

When the user click on the textbox, it will set the text to currencyValue (property value) and the cursor will be placed at the last of input value.

protected override void OnClick(EventArgs e)
        {
            this.Text = currencyValue.ToString();
            if (this.Text == "0")
                this.Clear();
            this.SelectionStart = this.Text.Length;
        }

OnTextChanged

Change the newly entered value into decimal format.

protected override void OnTextChanged(EventArgs e)
        {
            currencyValue = Convert.ToDecimal(this.Text);
        }

Run your project and in the toolbox a node is added named components followed by project name. You can use this textbox in your project as per your requirements.

Download CurrencyTextBox.cs

Steps and Events Used to Create Custom Control in C#: Windows Forms

In my previous article I have explained what is Custom Control, its types and features in brief. In this article I will write some steps to create the custom control, and will create a currency textbox control that will accept only currency type value.

Steps to create Custom control

• Open your windows forms project, and create a class. Name of class will be the control’s name, you want to create.
• Define a property, type should be respective to the value stored e.g. decimal, string, int etc.
• Override some of the required methods like onClick, onKeyPressed, onTextChanged and OnValidated in the sense of textbox, including the constructor (discussed later).
• Build the project and the control will added in to your toolbox window.

As I said that to make a custom control we have to override some required events of the base class. Here below I am writing about the methods, required to make a custom textbox.

OnKeyPress: this event occurs when user pressed a key while the respective control have focus. It passes the current value, the control have. When we override this event it has the following Syntax:

protected override void OnKeyPress(KeyPressEventArgs e)
{
//your code
}

OnValidated: Occurs when the respective control is validating. When user change the focus by using keyboard, or any other way, this validating event will occur. Following syntax will be used to override this event.

protected override void OnValidated(EventArgs e)
{
//your code
}

OnClick: Raises when the user click on the control. Contains the function is to be executed, when user click on the control. Syntax:

protected override void OnClick(EventArgs e)
{
//your code
}

OnTextChanged: Occurs when the user change the text of the control. Contains the code to be executed, when user change the text of the control. Syntax:

protected override void OnTextChanged(EventArgs e)
{
//your code
}

In the next, we will create a currency TextBox, that will only accept the currency related value like decimal, control characters.

Make your own Custom CurrencyTextBox

How to Develop your Own Custom Controls in C#

Custom control, the control with combined features of other controls, can be developed by any programmer easily. A custom control will not only be usable in the same application, but also it can be used in any other application that may be on other system. This designed control can be easily embedded in other applications.

Custom control have some basic features as well as some functionality that may be known by the programmer:

• Improves encapsulation.
• Simplifying a programming model.
• Can swap out a control with another one.
• Combines UI elements in a simple way.
• Using these controls programmer can develop unique controls.

Types

User Control: combines other controls in a logical unit. Inherit from System.Windows.Forms.UserControl class.

Inherited controls: developed by an existing .NET control that is as close as you want to develop. We have to create a custom class and inherit an existing abstract class that is close to what we are developing.

Owner-drawn controls: inherit from a base class like System.Windows.Forms.Control. These controls provides most customizable UI.

Extender providers: These are used to add features to other controls on a form, means these are not necessarily at all.

These controls may be used in our other applications and it reduces the amount of code and the code duplication. It also helps in modularize your code. In the next article we will explain about the steps to create a custom control and also about the events, need to override to create custom textbox.

How to set PictureBox Image using OpenFileDialog or Bitmap Class: WindowsForms

A person’s basic properties are name, age, date of birth, contact no. and also have a picture of that person. To insert the picture we have to preview that picture at the same time we are loading the picture. That’s why we need this picture box control on the windows forms.

Picture Box control is used to display pictures that may be jpeg, jpg, png or any bitmap file. The picture can be set during run time by the user, or can be fixed by the programmer during design time. It have many properties to be used by the programmer, to make the picture adjustable.
Picture box have some common properties that are mostly used by, which are:

• SizeMode: used to control the clipping and positioning of the image in the display area.
• ImageLocation: specify the image to be displayed.
• ClientSize: used to change the size of the display area at run time.
• BorderStyle: to distinguish the control from the rest of the form, even it have no image.

Drag-n-drop a picture box which will hold the image and button to be used to browse the image. The form will look like the image below:

Generate the click event of button and write the following C# code:

OpenFileDialog ofd = new OpenFileDialog();
ofd.ShowDialog();
pictureBox1.ImageLocation = ofd.FileName;
pictureBox1.SizeMode = PictureBoxSizeMode.Zoom;

When you run this project and click on the button, it will show an openFileDialog box. You have to select an image file and click on OK button. At the last the picture has been set on the picture box as shown in the below image.

It is not required to set the picture as above, we can set an object also of the Image class in the System.Drawing namespace. For that, just create an object of Bitmap class and set that object to the image property of picture box, as described in the below code:

Bitmap bt = new Bitmap(“image path”);
pictureBox1.Image = bt;
pictureBox1.SizeMode = PictureBoxSizeMode.Zoom;

The most thing to be noticed in the second code, is we have to know the exact path of the image file. Run the code and it will give the same output as the first code provide.

See Also: OpenFileDialog in windows forms

Check If File Exist or Not at Specified Location: C#

We can specify the extension of files, to be opened using OpenFileDIalog as I have explained in Use Filters in Open File Dialog. Let suppose user have been copied a file at a specified location and save that location for future reference. After some time, when user want to use that file with that location and, the file is not there, then it will throw an exception.


To avoid that exception, we have to check that file’s existence at the given location. The existence of file can be check through File.Exist() method, which resided in System.IO.File class in Visual Studio.

The following c# code will check the file named “ab.jpg” in our current directory which is Debug folder of the solution.

if (File.Exists(Environment.CurrentDirectory + "\\ab.jpg"))
{
//Write your code to execute
}
else
MessageBox.Show("File Not Exist");

If the file exist at the debug folder, it will execute our line of code, and if file not exist, it will show a message containing “File Not Exist”.

See Also: Use Filters to Open Desired Files

How to Specify Filters in OpenFileDialog: Windows Forms

To open an existing file on the system, open file dialog box is used. Create an object of OpenFileDialog class and call the ShowMethod() to open this type of dialog box. I have explained about this dialog box in my previous article i.e. Use OpenFileDialog to open an existing file.

In many Software, we can select only the specified type of file such as excel, word or text files. In Windows forms we can also use this feature by using filters for this dialog box.

Add a windows form project and write the following code in C# language:

OpenFileDialog ofd = new OpenFileDialog();
ofd.Filter = "jpg files: |*.jpg";
ofd.Title = "Images";
ofd.ShowDialog();

Now in the above code, I have specified the type of file, user have to select. Using above code the user have to select only jpg files. Run this code and it will show an open file dialog look like the following:

We can change these filter as per our requirements, even we can specify some more filters in a single file dialog. Check out the below line of code:

ofd.Filter = "jpg files: |*.jpg; *.jpeg;*.png";

The above line, when used, can select these three type of files as specified.

Previous:  Open File Dialog in Windows Forms                 Next: Check If File Exist or Not

How to Use Images in Treeview: WPF

Image control can be placed in any other control such like Treeview, Toolbar control or any other controls. The images can be stored in your solution files. To place an image in Treeview control using following simple steps.

Place a stackpanel with horizontal orientation and look like following structure:

 <StackPanel Orientation="Horizontal" Height="30">
<Label Content="first"></Label>
<Image Source="buttonImage.png"></Image>
</StackPanel>

The XAML code will place a label and an image in a stack panel. Now to use this in treeview control just place it in between the treeview item code.

<TreeView HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5">
<TreeViewItem Header="Item1">
<StackPanel Orientation="Horizontal" Height="30">
<Label Content="first"></Label>
<Image Source="buttonImage.png"></Image>
</StackPanel>
</TreeViewItem>
</TreeView>

A single treeview item will be placed in the WPF window. Now write the following code to place three treeview items each having an image:

<TreeView HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5">
<TreeViewItem Header="Item1">
<StackPanel Orientation="Horizontal" Height="30">
<Label Content="first"></Label>
<Image Source="buttonImage.png"></Image>
</StackPanel>
</TreeViewItem>
<TreeViewItem Header="Item2">
<StackPanel Orientation="Horizontal" Height="30">
<Label Content="second"></Label>
<Image Source="image1.png"></Image>
</StackPanel>
</TreeViewItem>
<TreeViewItem Header="Item3">
<StackPanel Orientation="Horizontal" Height="30">
<Label Content="third"></Label>
<Image Source="image2.png"></Image>
</StackPanel>
</TreeViewItem>
</TreeView>

Run the project and expand each of the node of treeview, each node have its label and an image as shown in the following image:

See Also: Place an Image in Toolbar

Introduction of WPF TreeView Control

Treeview control is used to display our data in hierarchical form, where some of the nodes are parent and some of them are children of their parents. In the left side of windows explorer there is a treeview containing some libraries, or our computer shortcuts and some favourites.

The parent node can be expanded or collapsed by the user. A simple treeview containing some nodes can be designed by the following XAML code:

<TreeView HorizontalAlignment="Left" VerticalAlignment="Top">
<TreeViewItem Header="Item1"/>
<TreeViewItem Header="Item2"/>
<TreeViewItem Header="Item3"/>
<TreeViewItem Header="Item4"/>
</TreeView>

The code will place a treeview contains four items as described in above code. The code specifies that the treeview will placed in the left and top of the window having margin of 5 points as shown in the following image:

Now we have to add some children for the treeview item added above. Write the following XAML code:

<TreeView HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5">
<TreeViewItem Header="Item1">
<TreeViewItem Header="Child 1"></TreeViewItem>
<TreeViewItem Header="Child 2"></TreeViewItem>
</TreeViewItem>
<TreeViewItem Header="Item2">
<TreeViewItem Header="Child 1"></TreeViewItem>
<TreeViewItem Header="Child 2"></TreeViewItem>
</TreeViewItem>
<TreeViewItem Header="Item3">
<TreeViewItem Header="Child 1"></TreeViewItem>
<TreeViewItem Header="Child 2"></TreeViewItem>
</TreeViewItem>
</TreeView>

Run the project and it will show three parent nodes, each contains two children, as shown in the following image:

Like above children we can add more children to the parent node and a children can also have its children. The same process will follow up to add nested nodes.

See Also: How to use Treeview in Windows Forms

How to Load UserControl in ToolBar Control: WPF

In earlier post I have placed some images and labels in toolbar control using some lines of XAML code. Now if we want to load a user control, written in another file, we have so follow some steps like the below.

Just add a user control through “Add New Item” from the file menu or from the right click on the project. Rename it if you want and write the following XAML code to add two labels and two textbox in this user control:

<StackPanel Orientation="Horizontal">
<Label Content="Name"></Label>
<TextBox Width="50"></TextBox>
<Label Content="Age"></Label>
<TextBox Width="40"></TextBox>
</StackPanel>

Now open our WPF window and add a reference of our current project (or the project which contains our user control), just like using:

xmlns:uc="clr-namespace:WpfApplication1"

Now write the following line of XAML code in the main content of the window:

<ToolBar Name="toolbarControl">
<uc:UserControl1></uc:UserControl1>
</ToolBar>

Run the project and the toolbar control will be load with the above user control.

How to Place an Image in Toolbar Control: WPF

Toolbar control is used to place some shortcuts in the windows environment. We can use this toolbar in our WPF application as used in our previous post. In this post, we will place an image control in to this toolbar.

We can directly place the image or we can use a stack panel to use an image. Just write the following XAML code:

<ToolBar VerticalAlignment="Bottom">
<StackPanel Orientation="Horizontal">
<Label Content="Image 1"></Label>
<Image Source="buttonImage.png" Width="80" Height="40"></Image>

<Label Content="Image 2"></Label>
<Image Source="image1.png" Width="80" Height="40"></Image>
</StackPanel>
</ToolBar>

Run the above code and it will place two label control with two images respectively. These two images are placed in my solution files. The images are fix proportionally according to the width and height provided.

The same process may be done by the c# code (through code behind file). We can use as many images as we want to use in a single toolbar control. In the next article we will load a user control in this toolbar control.

See Also: How to Load UserControl in Toolbar Control

How to Use ToolBar Control: WPF

Toolbar control is a container control, that can contains other types of controls like labels, buttons even other containers. In our windows environment, there is also a toolbar which contains our shortcut buttons with images. Wherever we want to go in computer, we can go through a single click on the toolbar’s buttons.

<ToolBar Header="Header of Toolbar Control"/>

The above line of XAML code will place a toolbar control with the header text. The header text will be the above text i.e. “Header of Toolbar Control”. The following image shows the toolbar control:

In the right side of this toolbar there is a symbol down arrow key which provides an overflow mechanism. This mechanism is used, when there are more items to fit in the control, to place those items in this overflow area.

<ToolBar VerticalAlignment="Bottom">
<Button Content="File"></Button>
<Button Content="Edit"></Button>
<Button Content="View"></Button>
<Button Content="Help"></Button>
</ToolBar>

Just analyse the above XAML code, it contains four buttons like a simple menu bar. These buttons will be shown in the toolbar control without using the overflow area.

Now, if we want to use that overflow area then just decrease the width of this control as I do in following XAML code.

<ToolBar VerticalAlignment="Bottom" Width="150">
<Button Content="File"></Button>
<Button Content="Edit"></Button>
<Button Content="View"></Button>
<Button Content="Help"></Button>
<Button Content="Height"></Button>
<Button Content="Width"></Button>
<Button Content="Margin"></Button>
</ToolBar>

Using this code it will show four buttons by default, and the last three button in the overflow area. It means when we have some more items to be used, then those items will placed on that overflow area.

See Also: How to place an image in Toolbar control

How to Make TextBox Control ReadOnly: WPF

In our previous post, we have enable the spell check feature of the textbox, through which user can check the spellings of the word entered and correct it. As we know that the textbox is used to input any value by the user, but it can be used to display fix text on the screen.

To display fix text that cannot be edited by the user, we have to make the textbox read-only. The textbox have a property IsReadOnly, that is set to be true to enable this feature. Just write the following XAML code snippet:

<TextBox Width="300" Height="25" Margin="5"
Text="This is the correct line and you cannot edit it."
 IsReadOnly="True">
</TextBox>

Now run the code and a textbox will display with the above text written. The thing to check is, this textbox have its fix text and the user can not vary that text.

So the read-only property is used to make the textbox read-only for the users. We can validate the input entered by the user by writing some line of code in our code part. We will validate the input in our next article.

How to Enable Spell Check in TextBox: WPF

WPF Textbox control is used to input some value by the user at run time. Now it is not sure that the entered values are correct, it means user can write anything wrong in the textbox. So it is programmer’s job to check the value and correct it if wrong.

WPF textbox control provides a spell check functionality something same as MS Word. We have to use SpellCheck and Language property of the textbox. SpellCheck will enable the feature and language will decide the language in which spell check is to be performed.

<TextBox Width="300" Height="25" Margin="5"
Text="This si not teh correct line written by teh usre"
SpellCheck.IsEnabled="True" Language="En-Us">
</TextBox>

The code above will show a textbox with the given text. According to US English language, the textbox will place some red lines on the wrong words, as shown in the following image.

As in MS Word, when we right click on the wrong word, then it will show some help options in the context menu, as shown in the following image:

How to Use TextBox Control in WPF

The previous controls i.e. Label, TextBlock and etc. are used to display fix text in a window. Their text can be changed but through the programming, not by the user. Now to input some value by the user, or enable text editing, the text box control is used. The textbox control can contain only unformatted text in its text property.

<TextBox Width="200" Height=”25” Text="WPF Textbox control"></TextBox>

The above code will place a textbox control having width two hundred and above text in the textbox. The textbox is shown in the following image:

In the above textbox only one line can be written, means we can’t either enter a new line in to the textbox or cant inset more lines by default. To enable multiline, it have two properties to do that i.e. TextWrapping and AcceptReturn. To insert a multiline textbox, write following code:

<TextBox Width="200" Height="40" Margin="5" Text="WPF Textbox control" TextWrapping="Wrap" AcceptsReturn="True"></TextBox>

Now when we run and write some more lines, then it will show something like this:

In the next post we will enable spell check for this textbox control.

TextBlock Control Introduction: WPF

According to previous post, Label control derives from Content Control and can: display other type of data as well as string, perform all the functions of a content control. There are some drawbacks in label control such as it cannot support multi line texts.

Textblock control is derived from Framework Element, and can display string type of data only. It has a property TextWrapping which is used to display our text in multiple lines. Means text block can be used to display paragraphs in WPF. A textblock can be drawn in XAML code with below line:

<TextBlock Text="text block" Width="200"/>

It will show the above text in the width specified. If we want to show some more text, then we have to use TextWrapping property of this textblock. If we don’t enable text wrapping then it will only show the text that can be shown in specified width.

<TextBlock Text="Textblock control is derived from Framework
Element, and can display string type of data only.
It has a property TextWrapping which is used to
display our text in multiple lines. Means text
block can be used to display paragraphs in WPF"
Width="200" TextWrapping="Wrap"/>

Now when we run this code, it will show the text written above. The width will be fixed as 200 and height will be increased according to the given text.

If we also specified height here, then the text will not be shown. Just placed the height as 200 here and check out the output as:

How to Place Items in TabControl: WPF

In our previous post, we have learnt about tab control and place some tabs into that control. In this post we will place a container, means we will place a simple entry form into a tab item. As we all know the entry form can contain name, age, address or some more basic information about a person.

So I am taking only name and age here as for example. Just write the following code in our XAML code window:

<TabControl Name="tabControl" Margin="5">
<TabItem Header="Entry Form Tab">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="200"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Label Content="Name"/>
<Label Content="Age" Grid.Row="1"/>

<TextBox Margin="2" Grid.Column="1"></TextBox>
<TextBox Margin="2" Grid.Column="1" Grid.Row="1"></TextBox>
</Grid>
</TabItem>
</TabControl>

Just run the code and a tab control is placed on our window with an entry form. The form will look like the following image:

So we have simply placed an entry form into tab item. We can set anything as the content property of tab item, just as above code.

In the above code, i have modify only a single tab item for example. If you need more tabs then you can modify as many tabs as you want to.

How to Create Tabs using TabControl: WPF

When there is not much space on our screen then programmer uses a tab control. Tab control is used to organize multiple tabs on WPF window, which can performs individual function decided by the programmer. It can contains collection of objects of any type i.e. string, image or a container.

Through XAML, we can place a tab control easily using the element Tab Control. To place some tabs into tab control, we have to use TabItem elements. Write the following code in your XAML:

<TabControl Name="tabControl" Height="400" Width="300" Margin="5">
<TabItem Header="Tab 1" Width="70"></TabItem>
<TabItem Header="Tab 2" Width="70"></TabItem>
<TabItem Header="Tab 3" Width="70"></TabItem>
</TabControl>

Now run the code and check out the tab control. It have three tabs with their own header as described above.

The same tab control can also be generated through the following code in C# code behind file:

TabControl tabcontrol = new TabControl();
tabcontrol.Name = "tabControl";
tabcontrol.Height = 400;
tabcontrol.Width = 300;
tabcontrol.Margin = new Thickness(5);

TabItem tabItem1 = new TabItem();
tabItem1.Header = "Tab 1";
tabcontrol.Items.Add(tabItem1);

TabItem tabItem2 = new TabItem();
tabItem2.Header = "Tab 2";
tabcontrol.Items.Add(tabItem2);

TabItem tabItem3 = new TabItem();
tabItem3.Header = "Tab 2";
tabcontrol.Items.Add(tabItem3);

this.Content = tabcontrol;

In next article, we will place some items/containers in these tab items. The containers could have other items/containers.

How to Customize Status Bar in WPF

In earlier post, we have learnt about placing a status bar and add some items on that. WPF provides some advanced options with status bar i.e. we can add some more items or even containers in status bar. In this article we will add a stack panel, image and some more items in a status bar.

Just write the following code in our XAML code window:

<StatusBar Name="statusBar" VerticalAlignment="Bottom">
<StackPanel Orientation="Horizontal">
<StackPanel>
<StatusBarItem Margin="5" >Status 1</StatusBarItem>
<StatusBarItem Margin="5" >Status 2</StatusBarItem>
<StatusBarItem Margin="5" >Status 3</StatusBarItem>
</StackPanel>
<Image Margin="5" Source="wall.jpg" Width="100" Height="30"></Image>
<ProgressBar Width="150" Height="20" Name="progressBar" Value="45"
HorizontalAlignment="Right" Margin="5"></ProgressBar>
</StackPanel>
</StatusBar>

Run the project and it will show a window with three strings in a stack panel, an image and a progress bar. The first stack panel also contain a nested stack panel. These items are added just for example, not for any purpose.

Just like the above code, we can place any control in the status bar, according to our requirements.

Status Bar Control: WPF

As the name implies, this control is used to show the status of our progress in our application. The status may be like line/column no. in Notepad, page no. in MS Word, or some text in visual studio. It is very easy to add a status bar in our WPF applications.

Just drag-n-drop the Status bar control on the window, it will display a horizontal bar on the window. It can contains strings, images or other containers like panels. A single item can be added using StatusBarItem in the control. The following XAML code will be used to add a status bar in a window.

<StatusBar Name="statusBar" VerticalAlignment="Bottom">
<StatusBarItem Name="statusBarItem">Value Inserted</StatusBarItem>          
</StatusBar>

In the above code the status bar has been placed on bottom by using VerticalAlignment property. When we run the code, it will add a status bar as shown in following image:

To add a progress bar control with above string, just use the following code:

<StatusBar Name="statusBar" VerticalAlignment="Bottom">
<StatusBarItem Name="statusBarItem">Value Inserted</StatusBarItem>
<ProgressBar Width="150" Height="20" Name="progressBar" Value="45"
HorizontalAlignment="Right"></ProgressBar>
</StatusBar>

When we run the code, it will display a string on left with a progress bar on right side of the window.