在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 >
< 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);
}
{
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);
}
代码很简单,这里就不多说什么了。
源码下载链接,请点击这里:)