老杨999 发表于 2013-1-3 15:38:17

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]
查看完整版本: Tabcontrol动态添加和移除TabItem