Controls in Silverlight(….Items Control)

An items control is used to customize list controls.

If you are creating an items control from scratch follow these steps.
I am declaring a class Person with two properties name and city in my project.
My main aim is to bind the objects of Person class to an items control and set their
appearance.

Project files Person  Class
Project Files

public class Person
    {
        private string pname;
        public string PName
        {
            set{ pname = value; }
            get{ return pname; }
        }
        private string city;
        public string PCity
        {
            set{ city = value; }
            get{ return city; }
        }
        public Person()
        {
        }
    }

An Itemscontrol includes four important elements.

  • Items
  • ItemsTemplate
  • Template
  • ItemsPresenter

Step1: Adding items to control
Add reference to your namespace. Create objects of Person class and add it to the Items property.

Step2: Setting the appearance of individual item.
Set the template for individual item. Here you have to set the DataTemplate property within ItemTemplate and bind the elements to the properties of objects created. If you do not bind you will get the data in Namespace.Class format.

Step3: Setting the template of control.
This step is optional. Setting the template means you are recreating the control.
You are adding and removing the parts of a control.Once the elements are added to set the appearance , do add a very important element called the ItemsPresenter.

ItemsPresenter like ContentPresenter in content controls makes your items visible .Your items won’t be visible if you set the template and forget to  add ItemsPresenter.

You can even decide the layout of items in the panel by setting the ItemsPanelTemplate.It is again optional.

Here is the whole xaml code following the above steps with a pic below of my custom Itemscontrol.

CustomItemsControls

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Controls_ItemsControl"
    x:Class="Controls_ItemsControl.MainPage"
    Width="640" Height="480">
<Grid x:Name="LayoutRoot" Background="White">
<ItemsControl Height="205" Width="300" VerticalAlignment="Top" Margin="170,23,170,0">
    <!– Adding the items to the control–>
        <ItemsControl.Items>
            <local:Person PName="John" PCity="Banglore"></local:Person>
            <local:Person PName="Sammy" PCity="Bombay"></local:Person>
        </ItemsControl.Items>
    <!–Displaying and Setting the appearance of individual items–>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Border Grid.Column="0" BorderBrush="CadetBlue"  BorderThickness="10">
                            <TextBlock  Text="{Binding PName}"></TextBlock>
                    </Border>
                    <Border Grid.Column="1" BorderBrush="DarkOrange"  BorderThickness="10">
                            <TextBlock  Text="{Binding PCity}"></TextBlock>
                    </Border>
                </Grid>
            </DataTemplate>  
        </ItemsControl.ItemTemplate>   
    <!–Setting the template of control–>   
    <ItemsControl.Template>
        <ControlTemplate>
            <Border BorderBrush="ForestGreen"  BorderThickness="10">
                <ItemsPresenter/>
            </Border>
        </ControlTemplate>
    </ItemsControl.Template>
</ItemsControl>
</Grid>
</UserControl>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s