This article is compatible with the latest version of Silverlight.
DomainUpDown control is one of the controls available in the Silverlight Toolkit which can be found in
Silverlight Toolkit
This control Represents a Windows spin box (also known as an up-down control) that displays string values.Help files for the assemblies are downloaded with them by default. This control belongs to the following namepsace.
Namespace: System.Windows.Forms
Assembly: System.Windows.Forms (in System.Windows.Forms.dll)
The control is bound with a datasource collection. One item from the collection will be displayed at a time. User can enter text into the control provided one of the values of the collection is matched else it will be rejected. There is readonly property which is false by default .If you want to restrict the users from entering values then you can make it readonly.
The following namespace has to be added to use this control.
| xmlns:inputToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit" |
The content that is selected or entered is converted to string by default so it can be displayed in there. Any shared or static member of this types are thread safe and any instance variable are not thread safe for this control. I am using a Silverlight navigation project template that is provided with .Net RIA services.
Any collection datasource can be bound with the spin controls through the itemsSource property.
| Me.MyDomUpDo.ItemsSource = myDtSource |
There is also a property called items through which we can add and remove the items from the control dynamically through clikc eventhandlers.
| myItems.Items.Add(New String("Test1")) |
| myItems.Items.Add(New String("Test2")) |
There is one more interested property called wrap . This property enabled the control to move through the first or last items when the lower bound or upper bound of the controls are reached.
We can bind a collection directly with the DomainUpDown control like as follows.
| mySrc.Add("Sample") |
| mySrc.Add("Test") |
| mySrc.Add("Collection") |
| mySrc.Add("Books") |
| mySrc.Add("Joe") |
| mySrc.Add("Allmighty") |
| |
| Me.myUpDown.ItemsSource = mySrc |
One of the cool features is we can put our own tem plates inside the control like a StackPanel
or Grid. Then bind the controls inside them using the Bind property. Through this we can achieve
very cool UI's. One of the example is as follow's
| Me.styledUpDown.ItemsSource = Reporsitory.GetEmpList() |
We have two important evenst called ValueChanged and ValueChanging. They are explained as follow's
ValueChanging - Before rendering the control we can apply the changes needed
ValueChanged - After the control is rendered the post changes that has to be applied
Combining with Blend we can produce a lot more stunning results as we can see in the sample pages provided in the ToolkitHomepage.
I have a demo application demonstrating this sample. See the third row which has a DomainUpDown with two textboxe's bounded with the collections.
| <Grid> |
| <StackPanel> |
| <Button x:Name="genVal" Click="genVal_Click" Content="Generate Value"></Button> |
| <TextBlock Text="Items Add - Remove" ></TextBlock > |
| <inputToolkit:DomainUpDown x:Name="myItems"> |
| </inputToolkit:DomainUpDown> |
| <TextBlock Text="Collection Binding" ></TextBlock > |
| <inputToolkit:DomainUpDown x:Name="myUpDown"> |
| </inputToolkit:DomainUpDown> |
| <TextBlock Text="Items Collection" ></TextBlock > |
| <inputToolkit:DomainUpDown x:Name="styledUpDown" ValueChanged="styledUpDown_ValueChanged" ValueChanging="styledUpDown_ValueChanging"> |
| <inputToolkit:DomainUpDown.ItemTemplate> |
| <DataTemplate> |
| <StackPanel Orientation="Horizontal"> |
| <TextBox Width="25" Height="25" Text="{Binding EmpId}"></TextBox> |
| <TextBox Width="75" Height="25" Text="{Binding EName}"></TextBox> |
| </StackPanel> |
| </DataTemplate> |
| </inputToolkit:DomainUpDown.ItemTemplate> |
| </inputToolkit:DomainUpDown> |
| </StackPanel> |
| </Grid> |
Thats it . You can now download the needed softwares and start using the controls.Thanks.