Silverlight 2 tutorial (9): Introduction to the new Silverlight 2 beta2 control TabControl

TabControl of the new Silverlight 2 beta2 Control

Silverlight 2 provides designers and developers with a set of controls that can be used in applications. Through the Expression tool, we can set the appearance of these controls. In Beta 2 of Silverlight 2, a new control is added: TabControl

The TabControl control is included in the System. Windows. Controls. Extended class library, rather than in the core class library of Silverlight. To use the TabControl control, you must add a reference to the Extended Assembly. In Expression Blend, you can find TabControl in the custom control of Asset Library.

 

In fact, custom controls include TabControl and TabItem. In Blend, drag the TabControl control to the designer interface, and double-click the TabControl control in the Objects and Timeline browser. A yellow border is displayed around the control, indicates that the control is currently selected. At this point, you must go back to Asset Library, go to the Asset Library control, and double-click it, it will be added to the TabControl sub-control, you can add multiple.

 

 

The final XAML file may look like the following:

<Ex: TabControl TabStripPlacement = "Bottom" VerticalAlignment = "Top"
Width = "231.148" Height = "156.611" HorizontalAlignment = "Left"
X: Name = "tabstrip1">
<Ex: TabItem Width = "75" Height = "20">
</Ex: TabItem>
<Ex: TabItem Width = "75" Height = "20" Header = "Second">
</Ex: TabItem>
<Ex: TabItem Width = "75" Height = "20" Header = "Third">
</Ex: TabItem>
</Ex: TabControl>

Note that the "ex" namespace of the TabControl may be "System_Windows_Controls" by default. This is automatically added when the TabControl control is added, this namespace is actually added to the root node of the XAML file and can be changed to any desired name.

TabControl has some attributes. One of the most important attributes is TabStripPlacement. This attribute allows us to set the display direction of TabItems (tabs): Top, Left, Right, or Bottom. We can set it in XAML and use the Dock enumeration settings at runtime.

Each TabItem has two important attributes: Header and Content. The Header sets the Content of the tab, while the Content sets the specific Content in the TabItem. It can be set to text values or other women, such as button controls. For example

<Ex: TabItem Width = "75" Height = "20" Header = "Third">
<StackPanel Orientation = "Vertical">
<TextBox x: Name = "yourname"/>
<Button Content = "Click me" Click = "Button_Click"/>
<TextBlock x: Name = "resulttext"/>
</StackPanel>
</Ex: TabItem>

If you want to set the Header content, you can explicitly use TabItem. Header, for example
<Ex: TabItem Width = "75" Height = "20">
<Ex: TabItem. Header>
<Button Content = "foo"/>
</Ex: TabItem. Header>
<Button Content = "Click Me" Click = "Button_Click_1"/>
</Ex: TabItem>