Controls in WPF - Part 2

Posted by John Doe in WPF category on 2/11/2011 for Beginner level | Points: 250 | Views : 10255

Rating: 4.5 out of 5

2 vote(s)

Post Article |

Search Articles |

Articles Home

We will look into three main types of in WPF.

Introduction

This is the 2nd Part from the series of Controls in WPF.

Please Click Here to read Part 1.

As discussed in Part 1, WPF provides total three types of controls.

Content Controls
Item Controls
Layout Controls

We have already covered Content Controls in Part 1.

Now, We will look into Item Controls.

2. Item Controls

This are also known as list controls as generally they are used to contain multiple controls within it. The user will have choice to select the values from the collection.

One thing to notice here is Item Controls overcome the problem of Content Controls as they don't have restriction on the type of data they can have. Say for example, Item Control can have RadioButton controls or similar other controls.

Few examples are, ListBox Control, ComboBox Control, TreeView Control, Menus, ContextMenu Contorol, TollBar Control, etc.

I will only cover few of the controls as the rest are very much familiar with the people who are working on Microsoft Technologies. (like Listbox, ComboBox, etc.)

To start with,

TreeView Control

Many people think that this perticular control is very much complex to use. But, TreeView is very much simple and nice control to use. It's similar to the ListBox control. The difference is TreeView lists the data in Tree Structure.

* TreeViewItem Control

The TreeViewItem is being used to create a TreeView Structure.

XAML Example of TreeViewItem Control:

<TreeView>
  <TreeViewItem Header="Employee Names"
     <TreeViewItem Header="Vishal" />
     <TreeViewItem Header="Ketan" />
     <TreeViewItem Header="Imran" />
  </ TreeViewItem>
  <TreeViewItem Header="Employee City"
     <TreeViewItem Header="Sydney" />
     <TreeViewItem Header="Chennai" />
     <TreeViewItem Header="Delhi" />
  </ TreeViewItem>
</TreeView>

Now Let's look at the live example of the same :

Paste below XAML code in your VS 2010 (or whatever version you are using):

<Window x:Class="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">
    <Grid>
        <TreeView>
            <TreeViewItem Header="Employee Names" Name="TreeViewItem1">
                <TreeViewItem Header="Vishal"/>
                <TreeViewItem Header="Ketan"/>
                <TreeViewItem Header="Imran"/>
            </TreeViewItem>
            <TreeViewItem Header="Employee City">
                <TreeViewItem Header="Sydney"/>
                <TreeViewItem Header="Chennai"/>
                <TreeViewItem Header="Delhi"/>
            </TreeViewItem>
        </TreeView>
    </Grid>
</Window>

The output of the same is shown as below :

ContextMenu Control

the dis-advantage of using Menu Controls were they have a fixed location. This dis-advantage has been overcome by ContextMenu Control. Also, it is very much easy to create a ContextMenu Control in WPF.

For example,

<ListBox Name="MyListBox">
  <ListBox.ContextMenu>
    <ContextMenu>
     <MenuItem Header="Cut"    Command="ApplicationCommands.Cut" />
     <MenuItem Header="Copy"  Command="ApplicationCommands.Copy" />
     <MenuItem Header="Paste" Command="ApplicationCommands.Paste" />
    </ ContextMenu>
  <ListBox.ContextMenu>
</ListBox>

To show the ContextMenu control, user will have to click right-clicks or press Shift+F10 at the time control have the focus.

Let's see the same in live scenario :

Paste the below XAML code :

<Window x:Class="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">
    <Grid>
        <ListBox Name="MyListBox">
            <ListBox.ContextMenu>
                <ContextMenu>
                    <MenuItem Header="Cut"    Command="ApplicationCommands.Cut"/>
                    <MenuItem Header="Copy"  Command="ApplicationCommands.Copy"/>
                    <MenuItem Header="Paste" Command="ApplicationCommands.Paste"/>
                </ContextMenu>
            </ListBox.ContextMenu>
        </ListBox>
    </Grid>
</Window>