Silverlight provides a number of powerful controls that enable yo to design rich user interfaces. The TabControl and ToggleButton controls in Silverlight are two such controls.
Using the TabControl in Silverlight
A common application scenario is that of storing and processing employee data. Assume that you want to create a Silverlight application that will accept the employee's personal as well as professional details. You don't want to jumble them up by creating user interface (UI) elements for both of them in the same page. How can you go about this then? The solution is quite simple. You can use tabs.
The TabControl control in Silverlight enables you to create tabbed views, such that each view is like a container holding one or more child elements and each view is distinct from the other. The advantage is that even if you have many tabbed items, only one will be visible at a time, thus saving screen space. While the employee example is good enough to use the TabControl, there are many other applications where this control could be useful. Developers who are well-versed with Windows Forms will find this control familiar since the Windows Forms Toolbox also has a similar control.
A TabControl can contain one or more TabItems, each of which represent a tabbed page. Within each TabItem, you can have UI controls such as TextBox, DatePicker and so forth.
The TabControl is categoruzed as a "layout and element grouping" control.
Let's examine how to use the TabControl in Silverlight 3 for an employee application.
Create a Silverlight 3 application named TabDemo. Select Project, Add Reference and add the
System.Windows.Controls namespace. Drag and drop a TabControl between the
</Grid> tags. Modify the MainPage.xaml as shown below:
Listing 1: MainPage.xaml
This will render a TabControl with two tabs named Personal and Professional respectively. Each of them contains controls such as TextBlock, TextBox, and so on. Observe that a reference has been made to the namespace and assembly,
System.Windows.Controls, in order to use the TabControl and TabItem controls. As the namespace alias specified is "
controls", the relevant controls are automatically prefixed with "
controls" when they are added from the Toolbox.
Save and build the application.
You cannot switch between the tabs at design time but when you execute the application and click the second tab, you will be able to view its contents.
The figure shows the application being executed in the browser window:
You can use the
SelectedIndex properties of the TabControl class to manipulate the tab views at runtime. For example,
SelectedIndex property gets or sets the index of the currently selected TabItem. You can also write code to handle the
SelectionChanged event of the TabControl class to perform spercific action when the user selects a tab.Using these members of the TabControl class, you can write code to manipulate the tabs at runtime.
Unlike in Windows Forms, changing the visibility of the control is a little different in Silverlight. The following code can be used to change the visibility. Assume that tabStudentInfo is a TabControl.
Listing 2: MainPage.xaml.cs
To hide the control, you can write:
Listing 3: MainPage.xaml.cs
You can also programmaticaly add TabItems at runtime through code:
Listing 4: MainPage.xaml.cs
By making use of Expression Blend, you can also design, format, and style the TabControl to make it visually appealing.
You can also databind a TabControl through its ItemsSource property.
Using the ToggleButton control in Silverlight
The ToggleButton control in Silverlight allows the user to change its state. This control is the base class for RadioButton and CheckBox controls. At the same time, this control can be used independently. Although a ToggleButton control looks similar to a normal button, it is different in some ways. When a normal button is clicked, it processses the click action and returns to its default state. But when a ToggleButton control is clicked, it remains in that state and does not return to default state immediately after the click action is processed.
The ToggleButton class is defined in the
The control has a property,
IsThreeState, which specifies whether the ToggleButton has two or three states. The two states are checked and unchecked, and the third is the indeterminate state.
IsChecked property specifies the state of the ToggleButton control. You can specify the text for the control by using its Content property.
All the features of the Silverlight Button control are supported by the ToggleButton.
Let us now see how to use this control. Create a new Silverlight project named ToggleDemo.
Next, in the Design view of MainPage.xaml, add a Canvas between the
<Grid></Grid> tags. Drag and drop a TextBlock and a ToggleButton from the ToolBox. Configure the properties of these controls and also add event handlers as shown below:
Listing 5: MainPage.xaml
In the code behind, MainPage.xaml.cs, you will add the following code:
Listing 6: MainPage.xaml.cs
In the Voting method, code is written to find out whether the button was in checked state, unchecked state, or indeterminate state. Depending upon the result, an appropriate message is displayed in the TextBlock.
Save and build the application.
When you run the application, by selecting Debug-Start without Debugging in Visual Studio IDE, you will see the following output as shown in Figure 2, 3 and 4 respectively:
Figure 3: Initial State
Figure 4: Checked State
Figure 5: Unchecked State
The two most important events of the ToggleButton class are the
Unchecked events. The
Checked event occurs when the state is changed to checked, while the
Unchecked event occurs when the state is changed to unchecked. The state is changed whenever you click on the button.
You can modify the default ControlTemplate to give the ToggleButton control to make it attractive a unique appearance.Though you can do it using XAML code, it is far easier to accomplish this using Expression Blend.
In this article you learnt how to work with the TabControl and ToggleButton controls of Silverlight.
Medusa loves experimenting with technology trends, especially that of Microsoft.
This author has published 14 articles on DotNetSlackers. View other articles or the complete profile here.
Please login to rate or to leave a comment.