DomainUpDown Control in Silverlight 3 Application

Introduction

In this article we will see how can we use DomainUpDown Control available in Silverlight 3 Toolkit.

Creating Silverlight Project

Fire up Visual Studio 2008 and create a Silverlight Application. Name it as DomainUpDownInSL3.



Go ahead and add a DomainUpDown control and name it as MyDomainUpDown.

I have designed the page as follows:



Now what we need is a collection of sample data.

Create a class and name it as States.cs

Add the following properties:

public class States
    {
        public string State { get; set; }
        public string Capital { get; set; }
        public string Short { get; set; }
        public string Language { get; set; }
    }

Now we need to make a data template of the DomainUpDown control and bind properties to it.

<inputToolkit:DomainUpDown x:Name="MyDomainUpDown" HorizontalAlignment="Left" ValueMemberPath="Short"  Height="75" FontSize="34" Grid.Column="1" Grid.Row="1">
            <inputToolkit:DomainUpDown.ItemTemplate>
                <DataTemplate>
                    <Grid MinWidth="370">
                        <Grid.Background>
                            <SolidColorBrush Color="#aa000000" />
                        </Grid.Background>
                        <TextBlock  Foreground="#22ffffff" Margin="4+0,2+0" FontSize="34"  Text="{Binding Short}" />
                        <StackPanel  HorizontalAlignment="Right" Margin="0, 0, 8, 0">
                            <TextBlock HorizontalAlignment="Right" Foreground="White" FontSize="12" Text="{Binding Capital}" Padding="2" />
                            <TextBlock HorizontalAlignment="Right" Foreground="White" FontSize="14" Text="{Binding Language}" Padding="2" />
                            <TextBlock HorizontalAlignment="Right" Foreground="White" FontSize="14" Text="{Binding State}" Padding="2" />
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </inputToolkit:DomainUpDown.ItemTemplate>
        </inputToolkit:DomainUpDown>

Now we will create a sample list of data and assign the ItemSource of the DomainUpDown control to it:

public MainPage()
        {
            InitializeComponent();
            List<States> myList = new List<States> 
            { 
                new States{ State="Andhra Pradesh", Capital="Hyderabad", Short="AP", Language="Telugu and Urdu"},
                new States{State="Arunachal Pradesh" , Capital="Itanager", Short="ARP", Language="Miji, Apotanji, Merdukpen, Tagin,Adi"},
                new States{State="Assam" , Capital="Dispur", Short="AS", Language="Assamese"},
                new States{State="Bihar" , Capital="Patna", Short="BH", Language="Hindi"},
                new States{State="Chhattisgarh" , Capital="Raipur", Short="CH", Language="Hindi"},
                new States{State="Goa" , Capital="Panaji", Short="GO", Language="Marathi and Konkani"},
                new States{State="Gujarat" , Capital="Gandhinagar", Short="GUJ", Language="Gujarati"},
                new States{State="Haryana" , Capital="Chandigarh", Short="HAR", Language="Hindi"},
                new States{State="Himachal Pradesh" , Capital="Shimla", Short="HP", Language="Hindi and Pahari"},
                new States{State="Jammu & Kashmir" , Capital="Srinagar, Jammu", Short="JK", Language="Kashmiri,Dogri, Urdu, Ladakhi"},
                new States{State="Jharkhand" , Capital="Ranchi", Short="JH", Language="Hindi"},
                new States{State="Karnataka" , Capital="Bangalore", Short="KR", Language="Kannda"},
                new States{State="Kerala" , Capital="Trivandrum", Short="KL", Language="Malayalam"},
                new States{State="Madhya Pradesh" , Capital="Bhopal", Short="MP", Language="Hindi"},
                new States{State="Maharashtra" , Capital="Bombay", Short="MH", Language="Marathi"},
                new States{State="Manipur" , Capital="Imphal", Short="MN", Language="Manipuri"},
                new States{State="Meghalaya" , Capital="Shillong", Short="MG", Language="Khasi, Jaintia and Garo"},
                new States{State="Mizoram" , Capital="Aizawl", Short="MZ", Language="Mizo and English"},
                new States{State="Nagaland" , Capital="Kohima", Short="NG", Language="Ao, Konyak, Angami, Sema and Lotha"},
                new States{State="Orissa" , Capital="Bhubaneswar", Short="ORI", Language="Oriya"},
                new States{State="Punjab" , Capital="Chandigarh", Short="PN", Language="Punjabi"},
                new States{State="Rajasthan" , Capital="Jaipur", Short="RJ", Language="Rajasthani and Hindi"},
                new States{State="Sikkim" , Capital="Gangtok", Short="SK", Language="Bhutia, Hindi, Nepali, Lepcha, Limbu"},
                new States{State="Tamil Nadu" , Capital="Chennai", Short="TN", Language="Tamil"},
                new States{State="Tripura" , Capital="Agartala", Short="TR", Language="Bengali, Tripuri, Manipuri, Kakborak"},
                new States{State="Uttar Pradesh" , Capital="Lucknow", Short="UP", Language="Hindi"},
                new States{State="Uttaranchal" , Capital="Dehra Dun", Short="UC", Language="Hindi"},
                new States{State="West Bengal" , Capital="Kolkata", Short="WB", Language="Bengali"}
            };
            MyDomainUpDown.ItemsSource = myList;
        }         

That's it. Now run your application and you will find the following screen:

 

The good thing about this control is that when it reaches at the beginning or at the end the button gets disabled.

Enjoy Coding.