[Silverlight]TabControl，这个好家伙 ----- Day14.2

[Silverlight]TabControl，这个好家伙 ----- Day14.2

在.NET 1.x 时代，有WebControl来提供这个需求，而在.NET 2.0一开始没有这个控件，就只能透过MultiView来作模拟，

后来ASP.NET AJAX ControlToolkit中也出现了这个控件。

使用这个控件的好处，我想不必多说，因为有需求才会有这个控件的产生.

要怎使用这个控件呢？

1.

首先建立一个新项目，在项目的Page.xaml文件中，输入下列Xaml程序：

<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>

画面显示如下：

这作法就跟ASP.NET AJAX TOOLKIT的TabControl一样，在一个TabContainer中加入多个TabItem。

这边我加入了三个TabItem，然后在设定其标头名称、背景色及大小。

2.

接下来，在其中新增一些控件看看：

<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>

显示结果如下：

其实到这里，你应该会有一个疑惑，在Visual Studio 2K8中，你只能看到第一个页签的设计划面，但是要看之后的页签要怎办？

如果你有Expression Blend2 SP1，很幸运的，你可以在这个工具中调整。

但是如果没有，难道要我们从xaml code去“想像”第二个页签的长相吗？

尤其又遇到我这种没有艺术天分的，该怎办？ 想一想，这种TabControl一定会有一种可以默认要显示页签的属性。

嗯嗯，没错，果然有这个属性 - SelectedIndex。所以可以透过设定这个属性来检视页签内容。这里我们设定为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的设计划面：

 

通常这个控件，我们还要注意到的是，切换页签会触发那个事件？ 看起来跟Toolkit的一样，是SelectionChanged事件。

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(); }

线上Demo

试炼大会，我们下次见啰 ～

 

如果您有微软技术开发的问题，可以到MSDN Forum发问。

如果您有微软IT管理的问题，可以到TechNet Forum发问喔。

 

原文:大专栏  [Silverlight]TabControl，这个好家伙 ----- Day14.2