在Silverlight 2 Beta2 中使用TabControl

     在Silverlight 2 Beta2 中新加入了TabControl控件，使用它可以帮助我们实现属性页的效果。
如下图：

           

     本DEMO的XAML代码段如下：

< Canvas  x:Name ="LayoutRoot"  Background ="White" >
     < local:TabControl   x:Name ="tab1"  Canvas.Top ="20"  Canvas.Left ="20"  Height ="100"  Width ="300"   />   
     < local:TabControl   x:Name ="tab2"  Canvas.Top ="140"  Canvas.Left ="20"  Height ="100"  Width ="300"   />
     < local:TabControl   x:Name ="tab3"  Canvas.Top ="280"  Canvas.Left ="20"  Height ="100"  Width ="300"    >
         < local:TabItem  x:Name ="white"  Header ="white"   Background ="white"  Style =" {StaticResource MyTabItemStyle} " />
         < local:TabItem  x:Name ="red"  Header ="red"   Background ="Red"  Style =" {StaticResource MyTabItemStyle} " />
         < local:TabItem  x:Name ="blue"  Header ="blue"  Background ="Blue"  Style =" {StaticResource MyTabItemStyle} " />
     </ local:TabControl >
</ Canvas >

    下面是它的page.xaml.cs代码：

public  Page()
{
    InitializeComponent();
     this .Loaded  +=   new  RoutedEventHandler(Page_Loaded);           
}

void  tab3_SelectionChanged( object  sender, SelectionChangedEventArgs e)
{
    tab3.Background  =  ((TabItem)tab3.SelectedItem).Background;
}

void  tab2_SelectionChanged( object  sender, SelectionChangedEventArgs e)
{
    tab1.SelectedIndex  =  tab2.SelectedIndex;
     // object o = tab1.FindName("first item");
}


void  Page_Loaded( object  sender, RoutedEventArgs e)
{
    List < TabItem >  tabItems  =   new  List < TabItem > ()
    {
         new  TabItem() {Header  =   " 第一选项 " , Content  =   " 第一选项中内容 " },
         new  TabItem() {Header  =   " 第二选项 " , Content  =   " 第二选项中内容 " },
         new  TabItem() {Header  =   " 第三选项 " , Content  =   " 第三选项中内容 " }
    };
     foreach  (TabItem tabItem  in  tabItems)
    {
        tab1.Items.Add(tabItem);
    }


    tabItems  =   new  List < TabItem > ()
    {
         new  TabItem() {Header  =   " 第一选项 " , Content  =   " 第一选项中内容 " },
         new  TabItem() {Header  =   " 第二选项 " , Content  =   " 第二选项中内容 " },
         new  TabItem() {Header  =   " 第三选项 " , Content  =   " 第三选项中内容 " }
    };
     foreach  (TabItem tabItem  in  tabItems)
    {
        tab2.Items.Add(tabItem);
    }


    tab1.TabStripPlacement  =  Dock.Bottom;
    tab2.TabStripPlacement  =  Dock.Left;
    tab3.TabStripPlacement  =  Dock.Top;

    tab2.SelectionChanged  +=   new  SelectionChangedEventHandler(tab2_SelectionChanged);
    tab3.SelectionChanged  +=   new  SelectionChangedEventHandler(tab3_SelectionChanged);
}

    代码很简单，这里就不多说什么了。

    源码下载链接，请点击这里:)