[Silverlight] TabControl, the boy ----- Day14.2

[Silverlight] TabControl, the boy ----- Day14.2

In .NET 1.x era, there WebControl to provide this demand, while at the beginning of .NET 2.0 does not have this control, you can only come through the MultiView for simulation,

Later ASP.NET AJAX ControlToolkit also appeared in this control.

The benefits of using this control, I want it to say, because there is a demand there will generate this control.

How to use this control it?

1.

First create a new project, the project Page.xaml file, enter the following Xaml program:

<UserControl xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" x: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <Grid x:Name="LayoutRoot" Background="White"> <basics:TabControl> <basics:TabItem Header="运动" Background="Red" FontSize="20" > </basics:TabItem> <basics:TabItem Header="新闻" Background="Green" FontSize="20" > </basics:TabItem> <basics:TabItem Header="娱乐" Background="Blue" FontSize="20" > </basics:TabItem> </basics:TabControl> </Grid> </UserControl>

Screen is displayed as follows:

This practice is just like ASP.NET AJAX TOOLKIT TabControl, like adding more TabItem in a TabContainer in.

I joined here three TabItem, and then set its header name, background color and size.

2.

Next, add some controls to see in which:

<UserControl xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" x: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <Grid x:Name="LayoutRoot" Background="White"> <basics:TabControl > <basics:TabItem Header="运动" Background="Red" FontSize="20" > <basics:Calendar x:Name="cal1"></basics:Calendar> </basics:TabItem> <basics:TabItem Header="新闻" Background="Green" FontSize="20" > <TextBox x:Name="uxTextBox" Text="测试"></TextBox> </basics:TabItem> <basics:TabItem Header="娱乐" Background="Blue" FontSize="20" > <Button Content="我是按钮，不要按我"></Button> </basics:TabItem> </basics:TabControl> </Grid> </UserControl>

The results show the following:

In fact, here, you should have a doubt in Visual Studio 2K8, you can only see the surface of the first program set up a tab, but the tab you want to look at how to do after?

If you have a Expression Blend2 SP1, very lucky, you can adjust in this tool.

But if not, do not want us to "imagine" the second tab looks of it from xaml code?

I have not encountered this particular artistic talent, what should I do? Think about this TabControl there must be a way to display the default tab attributes.

Er er, yes, and it has this property - the SelectedIndex . It is possible to view the content tab by setting this property. Here we are set to 1.

<UserControl xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" x: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <Grid x:Name="LayoutRoot" Background="White"> <basics:TabControl SelectedIndex="1"> <basics:TabItem Header="运动" Background="Red" FontSize="20" > <basics:Calendar x:Name="cal1"></basics:Calendar> </basics:TabItem> <basics:TabItem Header="新闻" Background="Green" FontSize="20" > <TextBox x:Name="uxTextBox" Text="测试"></TextBox> </basics:TabItem> <basics:TabItem Header="娱乐" Background="Blue" FontSize="20" > <Button Content="我是按钮，不要按我"></Button> </basics:TabItem> </basics:TabControl> </Grid> </UserControl>

Visual Studio 2K8 plan provided surface:

 

Usually this control, we have noticed is that switching tab is triggered that event? It looks like Toolkit is SelectionChanged event.

public Page() { InitializeComponent(); uxTabControl.SelectionChanged += new SelectionChangedEventHandler(uxTabControl_SelectionChanged); } void uxTabControl_SelectionChanged(object sender, SelectionChangedEventArgs e) { Txt.Text = "现在选择的是第" + (((TabControl)sender).SelectedIndex + 1) + "个标签，标头是：" + ((TabItem)(((TabControl)sender).SelectedItem)).Header.ToString(); }

Online Demo

Trial of the General Assembly, the next time we see Hello ~

 

If you have questions Microsoft technologies, you can ask questions to MSDN Forum.

If you have questions Microsoft IT management, you can go to the TechNet Forum to ask questions Oh.

 

Original: Large column  [Silverlight] TabControl, the boy ----- Day14.2