Tabcontrol动态添加和移除TabItem
Tabcontrol动态添加和移除TabItem<div id="cnblogs_post_body">现在很多软件的主界面都流行设计成选项卡的模式,比如现在的IE浏览器,每打开一个新的页面,便增加一个选项卡,在选项卡的头部的右侧,放置一个关闭按钮。需要关闭的时候,直接点对应的选项卡的关闭按钮关闭。
先看一下实现以后的效果图:
http://pic002.cnblogs.com/images/2012/328750/2012112823474687.jpg
左侧,是软件的功能列表,这个比较简单,用ListBox、Treeview或是Expander都可以实现。在此就不多说了,今天主要说一下,右边这个选项卡是如何实现的。如果是用Winform来实现的话,立马头就大了。要实现这样的效果,肯定得改写控件了。用WPF实现,那是相当快啊。只要重新写一个样式就可以了。
Tabcontrol的Header部分的Style如下:
<div class="cnblogs_code"><StyleTargetType="{x:Type TabItem}"> <SetterProperty="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type TabItem}"> <Border x:Name="layout" BorderBrush="Gray" BorderThickness="1,1,1,0" Background="{TemplateBinding Background}" CornerRadius="3" Margin="2,0,2,0"> <Grid Height="20"> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition Width="25"/> </Grid.ColumnDefinitions> <TextBlockTextAlignment="Center" Text="{TemplateBinding Header}" Grid.Column="0" Margin="4,0,3,0" VerticalAlignment="Center" HorizontalAlignment="Center"/> <Button Content="X" Grid.Column="1"Height="8" Width="8" Margin="4,1,3,2" Tag="{TemplateBinding Header}" Click="Button_Click" Background="{x:Null}" BorderBrush="{x:Null}" VerticalAlignment="Center"> <Button.Template> <ControlTemplate > <Grid> <Rectangle> <Rectangle.Fill> <VisualBrush> <VisualBrush.Visual> <Path x:Name="btnPath" Data="M0 0L10 10M0 10L10 0" Stroke="Gray" StrokeThickness="1"/> </VisualBrush.Visual> </VisualBrush> </Rectangle.Fill> </Rectangle> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="btnPath" Property="Stroke" Value="Red"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Button.Template> </Button> </Grid> </Border> <ControlTemplate.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter Property="Background" Value="White"/> <Setter TargetName="layout" Property="Margin" Value="2,0,2,-1.5"/> </Trigger> <Trigger Property="IsSelected" Value="false"> <Setter Property="Background" Value="LightBlue"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>
页:
[1]