Published: 30 Jun 2010
By: Medusa M

In this article, you will learn how to use the TabControl and ToggleButton controls in Silverlight.

Contents [hide]

Introduction:

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> and </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 SelectedItem and 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 System.Windows.Controls.Primitives namespace.

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.

The 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

Initial State

Figure 4: Checked State

Checked State

Figure 5: Unchecked State

Unchecked State

The two most important events of the ToggleButton class are the Checked and 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.

Conclusion

In this article you learnt how to work with the TabControl and ToggleButton controls of Silverlight.

<<  Previous Article Continue reading and see our next or previous articles Next Article >>

About Medusa M

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.

Other articles in this category


Displaying Notification Messages in a Silverlight Dashboard Application
In this article we will see how we could display a notification message and further a list of notifi...
Air Space Issue in Web Browser Control in Silverlight
Air Space issue is a common issue in Web Browser control in Silverlight and WPF. To explain the issu...
TextBox Row Filter in Telerik's RadGridView in Silverlight
If you have come across the JQGrid features, you might have seen the filter row available as the fir...
Widget Refresh Timer in MVVM in Silverlight
In this article we'll see how to refresh and disable widgets using the Model View View-Model pattern...
Develop a Flexible 2.5D Scene Editor Targeting Silverlight RPG Games - Part 2
In this article, I'm going to introduce to you how to construct such a 2.5D RPG game scene editor th...

You might also be interested in the following related blog posts


Silverlight MVP read more
Telerik Releases New Controls for Silverlight 3 and WPF read more
Mixing Silverlight and MS ASP.NET AJAX 3.5 in the same web application. read more
Telerik Launches RadControls for Silverlight 3 for Line-of-Business Application Development read more
Why Embedded Silverlight Makes Sense read more
Telerik Announces Support for Microsoft Silverlight 3 read more
Reviewing my favorites Silverlight books read more
Moonlight 1.0 Released, Silverlight script updated – and a Chrome hack read more
Source code for Silverlight controls published read more
Silverlight resources for designers read more
Top
 
 
 

Please login to rate or to leave a comment.