by Sujith Chandana

In previous article we started to discuss about Content Controls. So, this article will discuss the rest of the Content Controls and Items Controls.  

Group Box

Group Box is a familiar control for organizing chunks of controls. It is typically used to contain multiple items, but because it is a content control, it can only directly contain a single item. Therefore, you typically need to set Group Box’s content to an intermediate control that can contain multiple children. The stack panel is used in XAML to fulfill that. Normally a group box we can implement like this.

 <GroupBox Header="Subjects" Margin="10,10,68,72" Name="groupBox1">

<StackPanel>   

    <CheckBox>English</CheckBox>

    <CheckBox>Mathamathics</CheckBox>

    <CheckBox>Science</CheckBox>

    </StackPanel>

    </GroupBox>

Just like the Content property, the Header property can be set to an arbitrary object, and if it derives from UI Element it gets rendered as expected. For an example,

<GroupBox Margin="10,10,0,0" Name ----- Width="124">

<GroupBox.Header>

    <Button>Subject</Button>

    </GroupBox.Header>

    <StackPanel Height="154" Width="189">

    <CheckBox>English</CheckBox>

    <CheckBox>Mathamathics</CheckBox>

    <CheckBox>Science</CheckBox>

    </StackPanel>

    </GroupBox>

Expander

Expander is exciting control because it doesn’t already exists in win-32 based UI technologies such as windows forms. It is like a group box. It contains a button that enables you to expand and collapse the inner content.

<Expander Header="Subject" Height="100" Margin="54,0,74,-8" Name="expander1" VerticalAlignment="Bottom"
<StackPanel Height="154" Width="189">

    <CheckBox>English</CheckBox>

  <CheckBox>Mathamathics</CheckBox>

   <CheckBox>Science</CheckBox>

    </StackPanel>

    </Expander>

Expander defines an IsExpanded property and Expanded/Collapsed events. And also can control which direction the expansion happens (Up, Down, Left, or Right) with an ExpandDirection property.

 Items Controls

In previous section we discussed few things about content control.  Another major category of WPF controls are items controls, which can contain unlimited collection of items rather than just a single piece of content. Contents of items controls store in item property. Each item can be an arbitrary object.

Ex:

List Box

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

xmlns:sys="clr-namespace:System;assembly=mscorlib" HorizontalAlignment="Right" Margin="0,171.28,45,163" Width="135">

    <Button>Button</Button>

    <Expander Header="Expander" />

    <sys:DateTime>6/1/2009</sys:DateTime>

    <sys:DateTime>6/2/2009</sys:DateTime>

    <sys:DateTime>6/3/2009</sys:DateTime>

Child elements are added to items collections because item is a content property. There are three DateTime object and two UI elements in above example.

 We can add objects to the initially empty collection or remove objects, but we can’t point Items to an entirely different collection, because items property is read only. Items Control has a separate property that supports filling its items with an existing arbitrary collection, called ItemsSource.  

Additional interesting properties of ItemsControl

HashItems – A Boolean read-only property can use to know about control is in the empty state or not

IsGrouping – A Boolean property that tells if the control’s items are divided into top-level groups. This grouping is done directly within the Items Collection class, which contains several properties for managing and naming groups of items.

DisplayMemberPath – Can be set to the name of a property on each item. It is a string property.

Now look at what happens when use DislpayMemberPath property. Each DateTime object change to relevant day. That is a ToString based enumeration value return by DisplayMemberpath property.

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

     xmlns:sys="clr-namespace:System;assembly=mscorlib" DisplayMemberPath="DayOfWeek" HorizontalAlignment="Right" Margin="0,171.28,45,163" Width="135">

    <Button>Button</Button>

<Expander Header="Expander" />

    <sys:DateTime>6/1/2009</sys:DateTime>

    <sys:DateTime>6/2/2009</sys:DateTime>

    <sys:DateTime>5/31/2009</sys:DateTime>

    </ListBox>

So, we discussed about one thing but, ListBox is not only the items control. Items Controls can be divided in to three main groups as Selectors, Menus and Everything else.

Selectors

These are also items controls whose items can be indexed and, most important, selected. SelectedIndex, SelectedValue, SelectedItem are basic properties to handle selectors. You are already familiar with those because windows form applications. IsSelected, IsSelectionActive are another two Boolean properties supported by Selectors.

ComboBox, ListBox, ListView, TabControl are Selector derived controls.

ComboBox

IsEditable and IsReadOnly properties are control modes of selection box. Beyond that, StaysOpenOnEdit property can be set to true to keep the drop-down open if the user clicks on the selection box.

Simple example for a combo box

<ComboBox Margin="0,254,122,256" Name="comboBox1" Text="Select One" HorizontalAlignment="Right" Width="128">

    <!-- Item #1 -->

    <StackPanel Orientation="Horizontal" Margin="5">

    <Image Source="sujith.jpg"/>

    <StackPanel Width="200">

    <TextBlock Margin="5,0" FontSize="12" FontWeight="Bold"

VerticalAlignment="center">Sujith</TextBlock>

    <TextBlock Margin="5" VerticalAlignment="center" TextWrapping="Wrap">

Some text gone here...

    </TextBlock>

    </StackPanel>

    </StackPanel>

    <!-- Item #2 -->

    <StackPanel Orientation="Horizontal" Margin="5">

    <Image Source="lion.jpg"/>

    <StackPanel Width="200">

    <TextBlock Margin="5,0" FontSize="14" FontWeight="Bold"

VerticalAlignment="center">Lion</TextBlock>

    <TextBlock Margin="5" VerticalAlignment="center" TextWrapping="Wrap">

some text gone here.....

    </TextBlock>

    </StackPanel>

    </StackPanel>

    </ComboBox>

This will display as follows.you can see these kind of things in Microsoft Office packages so on.