在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 = " 第三选项中内容 " }
};
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 = " 第三选项中内容 " }
};
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);
}
代码很简单,这里就不多说什么了。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。