StackPanel Overview in WPF

Layouts in WPF

WPF layout, a mostly used component of an application, is basically used to arranging controls on fixed pixels. Users can not resize the places which are placed in these layouts. There are five built-in panels i.e. Stack Panel, Canvas, Wrap Panel, Grid and Dock Panel resides in System.Windows.Controls namespace.

Stack Panel:

A very popular panel because of its simplicity and usefulness. As its name suggests it simply place its children into a stack. This panel is used in the same way as stacks in C programming. It places its children from the right/bottom most side, previous element will move when new one comes, and so on.

By default the orientation property of any stackpanel is vertical, if we want to show our contents in horizontal then we have to change the orientation of stackpanel. As in above diagram I have placed three button in both of the views one by one. By using simple code in xaml I can use a stack panel as in above window.

<StackPanel>
<Button Content="First " Width="70"></Button>
<Button Content="Second " Width="70"></Button>
<Button Content="Third " Width="70"></Button>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button Content="First " Height="50"></Button>
<Button Content="Second " Height="50"></Button>
<Button Content="Third " Height="50"></Button>
</StackPanel>

There are some cases in which we have to use nested stack panel like to show a person’s image and some information. 

<StackPanel>
<Image Source="...." Name="image"></Image>
<StackPanel >
<Label Content="Name"></Label>
<Label Content="Age"></Label>
<Label Content="Father Name"></Label>
</StackPanel>
</StackPanel>

Wrap panel

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 use HyperlinkButton with XAML in Windows 8 App Development

HyperLinkButton, used to open the specified URI in the default browser. URI can be specified in NavigateURI property of this button and it will launch that by clicking on that button. This button look like a text with underline. This button opens another page side by side in windows 8 app development.

Here's the XAML code which will create this type of button:

<Page

    x:Class="App4.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:App4"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        

<HyperlinkButton x:Name="h1" NavigateUri="http://msdn.microsoft.com" Height="200" Width="257" Content="Microsoft Development Network" Margin="90,20,0,548" />

    </Grid>

</Page>

Here above the XAML code is so simple to read and understand. This code is using some mostly used properties described below:

• x:Name: Specify the name of this button and used in code behind file.
• NavigateURI: get or set the URI to navigate to when the button is clicked.
• Height & Width: commonly used property by XAML elements. Read Height & Width in XAML.
• Content: the text to be shown on the button.
• Margin: specify the extra space to get placed around the outside edges. Read Margin in XAML.

Output

Use HyperlinkButton in C# code

Windows Store App : How to use Grid in XAML

Introduction

By-default a Grid element has one row and one column i.e. a single cell, any control placed inside the Grid will be placed in this cell. Lets see the below simple XAML code where a textbox is placed in the first row and first column. Programmer is not specifying here, but it have value of Grid.Row as well as Grid.Column property to zero.

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <TextBlock Text="Hello World" />

</Grid>

How to Insert multiple Rows and Columns in Grid

Step-1 : Create <Grid.RowDefinitions> and <Grid.ColumnDefinitions > inside the Grid.

  <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <Grid.RowDefinitions>              

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions >             

        </Grid.ColumnDefinitions>

</Grid>

Step-2: Lets create Three rows and three columns, by adding three RowDefinition and ColumnDefinition child as in below code.

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <Grid.RowDefinitions>   

            <RowDefinition Height="150"/>

            <RowDefinition Height="Auto" />

            <RowDefinition Height="*" />

           

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions >          

            <ColumnDefinition Width="*" />

            <ColumnDefinition Width="*" />

            <ColumnDefinition Width="*" />

        </Grid.ColumnDefinitions>

</Grid>

Here we have three rows and three column. Every row contains height attribute and column contains width attribute.The first row's height, expressed as an integer value for a pixel count. In the second row's height, described by a literal "Auto" or you can say height will adjust according to the content which will placed inside the grid. In third row's height, described by the asterisk character(*)  means you can say the last row will take remaining space of the grid.

How to place controls in rows and columns 

Generally grid is used when we are placing elements in no. of rows and columns. Suppose we want to move control to the second row and second column. To do that we have to set the value of Grid.Row and Grid.Column attribute of the respective element. Review the following XAML:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <Grid.RowDefinitions>   

            <RowDefinition Height="150"/>

            <RowDefinition Height="Auto" />

            <RowDefinition Height="*" />

           

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions >          

            <ColumnDefinition Width="*" />

            <ColumnDefinition Width="*" />

            <ColumnDefinition Width="*" />

        </Grid.ColumnDefinitions>

        <TextBlock x:Name="firstBlock" Text=" Hello World" Grid.Row="1" Grid.Column="1" />

    </Grid>

Look out the above code, i have set the value of Grid.Row and Grid.Column to 1 for textbox element. By this it will placed in the second row and second column.

Design view of the code

Here your snap simplifies relation between TextBlock and Grid. Lets take a simple theory to understand how to define TextBlock outside the Grid.RowDefinitions and Grid.ColumnDefinitions.

Suppose you have three fruits apple, grapes and orange now you want to place all of them in individual row and column. Then you can simply place these items in the specified rows and column using Grid.Row and Grid.Column attribute.

How to change Application name in Windows Store Grid App

Introduction

In our previous article, we have studied about Windows Store Grid App. In this article we will learn about App.xaml file and their behaviors also take a simple example to change Application name.

Pre-requisite

• You need windows 8 SDK
• You need developer license

General Structure of App.xaml file

<Application

    x:Class="FirstGridApplication.App"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:FirstGridApplication"

    xmlns:localData="using:FirstGridApplication.Data">

    <Application.Resources>

        <ResourceDictionary>

            <ResourceDictionary.MergedDictionaries>

                <!--

                    Styles that define common aspects of the platform look and feel

                    Required by Visual Studio project and item templates

                 -->

                <ResourceDictionary Source="Common/StandardStyles.xaml"/>

            </ResourceDictionary.MergedDictionaries>

            <!-- Application-specific resources -->

            <x:String x:Key="AppName">FirstGridApplication</x:String>

        </ResourceDictionary>

    </Application.Resources>

</Application>

If you want to change Application name in Grid App then you should go for  App.xaml file and change in markup as specified in below XAML code

 <x:String x:Key="AppName">FirstGridApplication</x:String>

First Output Page

<x:String x:Key="AppName">My Application</x:String>

After change Output will become

Getting Started with Windows Store Grid App (XAML)

Introduction

The Grid App is basically used for navigating between categories. User can search contents between categories for example, photo and video apps in Windows 8. In this article we will discuss basics about windows store Grid App. Lets start windows Store Grid Apps with some simple steps. Select  File->New Project->Windows Store Grid (XAML) under the "Windows Store" category.

After selecting "OK" button you have successfully created windows Store Grid Application and by-default application page will be opened. This app contains many files shown in Solution Explorer:

The Grid App template includes these .xaml files:

App.xaml, where you can change your application name also provides markup for the content Host.
GroupedItemsPage.xaml, it is the first page of the application. It contains Application name, Group name, Item name with sub-title. It enables a user to select an item to navigate to the full-page item view, or to select a group label to navigate to the group details page.

GroupDetailPage.xaml, It shows Group name with short description and also item name with short description, and select an item to navigate to the full-page item view.

ItemDetailPage.xaml, which is the full-page view for an item.

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: