首页 新闻 搜索 专区 学院

WPF Tabcontrol控件模板问题

0
悬赏园豆:30 [已解决问题] 解决于 2013-06-06 22:49

从Blend中复制TabControl的标准模板到vs2010,除了删除三个TabStripPlacement触发器外,没做其他修改,但应用该模板后,就发生如下图所示的怪异现象,不知是啥原因。(win7 64位的系统,vs专业版,没打补丁)


代码如下:

<Window x:Class="WpfApplication3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
  
  <Window.Resources>
    
          <ControlTemplate x:Key="myTemp" TargetType="{x:Type TabControl}">
            <Grid ClipToBounds="true" KeyboardNavigation.TabNavigation="Local" SnapsToDevicePixels="true">
              <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="ColumnDefinition0" />
                <ColumnDefinition x:Name="ColumnDefinition1" Width="0" />
              </Grid.ColumnDefinitions>
              <Grid.RowDefinitions>
                <RowDefinition x:Name="RowDefinition0" Height="Auto" />
                <RowDefinition x:Name="RowDefinition1" Height="*" />
              </Grid.RowDefinitions>
              <TabPanel x:Name="HeaderPanel" Grid.Column="0" Grid.Row="0" Margin="2,2,2,0" Panel.ZIndex="1" IsItemsHost="true" KeyboardNavigation.TabIndex="1" />
              <Border x:Name="ContentPanel" Grid.Column="0" Grid.Row="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" KeyboardNavigation.DirectionalNavigation="Contained" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
                <ContentPresenter x:Name="PART_SelectedContentHost" Margin="{TemplateBinding Padding}" ContentSource="SelectedContent" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
              </Border>
            </Grid>
            <ControlTemplate.Triggers>
             
              <Trigger Property="IsEnabled" Value="false">
                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
              </Trigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        
  </Window.Resources>
  
    <Grid  Height="255" Width="365" >
    <TabControl Template="{StaticResource myTemp}" Height="206"  Margin="50,23,0,0" Name="tabControl1"  Width="220">
      <TabItem Header="tabItem1" Name="tabItem1">
        <Button Content="Button" Height="42" Name="button1" Width="94" />
      </TabItem>
    </TabControl>
  </Grid>
</Window>
seewold的主页 seewold | 初学一级 | 园豆:109
提问于:2013-05-04 13:49
< >
分享
最佳答案
0

首先要弄明白你删掉的代码是做什么用的

<ControlTemplate.Triggers>
                            <Trigger Property="TabStripPlacement" Value="Bottom">
                                <Setter Property="Grid.Row" TargetName="headerPanel" Value="1"/>
                                <Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/>
                                <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                                <Setter Property="Height" TargetName="RowDefinition1" Value="Auto"/>
                                <Setter Property="Margin" TargetName="headerPanel" Value="2,0,2,2"/>
                            </Trigger>
                            <Trigger Property="TabStripPlacement" Value="Left">
                                <Setter Property="Grid.Row" TargetName="headerPanel" Value="0"/>
                                <Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/>
                                <Setter Property="Grid.Column" TargetName="headerPanel" Value="0"/>
                                <Setter Property="Grid.Column" TargetName="contentPanel" Value="1"/>
                                <Setter Property="Width" TargetName="ColumnDefinition0" Value="Auto"/>
                                <Setter Property="Width" TargetName="ColumnDefinition1" Value="*"/>
                                <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                                <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
                                <Setter Property="Margin" TargetName="headerPanel" Value="2,2,0,2"/>
                            </Trigger>
                            <Trigger Property="TabStripPlacement" Value="Right">
                                <Setter Property="Grid.Row" TargetName="headerPanel" Value="0"/>
                                <Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/>
                                <Setter Property="Grid.Column" TargetName="headerPanel" Value="1"/>
                                <Setter Property="Grid.Column" TargetName="contentPanel" Value="0"/>
                                <Setter Property="Width" TargetName="ColumnDefinition0" Value="*"/>
                                <Setter Property="Width" TargetName="ColumnDefinition1" Value="Auto"/>
                                <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                                <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
                                <Setter Property="Margin" TargetName="headerPanel" Value="0,2,2,2"/>
                            </Trigger>

TabStripPlacement是用来设置TabItem标签头的对齐方式(默认是TOP)。参考http://www.cnblogs.com/Kinglee/archive/2009/08/07/1541525.html

这些触发器就是用于设置TabItem布局,你可以看到在触发器中有设置Head和content的位置(Row),高度宽度以及margin。删掉了这些触发器,TabItem的布局位置就没有了,也就是会认为TabItem的Head和Content都会从坐标(0,0)开始。所以TabItem的内容就会错位,错位的偏移大小刚好就是TabItem的Head的大小。

在vs2010中,你可以把代码修改成下面这样,即修改TabItem的高度和宽度为0,为了方便观看,把TabItem的内容用蓝色Grid填充。

 <TabControl Template="{StaticResource myTemp}" Height="206" TabStripPlacement="Top" Margin="137,69,146,36" Name="tabControl1"  Width="220" Padding="0">
            <TabItem Header="tabItem1" Name="tabItem1" Width="0" Height="0" >
                <Grid Background="Blue"/>
            </TabItem>
 </TabControl>

这时候点击Grid可以看到选择框的偏移消失了。也就是说你在Button中看到的选择框偏移其实就是TabItem占用的。

看到这里可能也发现了,默认的Tabitem对齐方式是TOP,但是删掉的三个触发器中是Left,right和bottom,没有删除Top,但是却对显示产生影响了。影响仅仅是选择框偏移,但实际控件并没有偏移。

这其实是VS2010的小Bug,在VS2012中,这个问题已经被处理了。

可以看看同样的代码在VS2010(上图)和2012(下图)的显示区别

所以结论就是,在vs2010中不要更改那三个Trigger,如果更改了,其实是没有影响的,就是显示会有偏差,如果在vs2012下那就没有问题了

收获园豆:30
WuRang | 小虾三级 |园豆:1730 | 2013-05-24 11:23

 非常感谢您如此详细的解答,谢谢!

回头换成vs2012好了。

seewold | 园豆:109 (初学一级) | 2013-06-06 22:47
其他回答(1)
0

与 TabControl 的 Padding 设置有关

Yu | 园豆:12980 (专家六级) | 2013-05-04 16:04

设置 Padding是可以解决,但我是想搞明白,复制的就是系统的标准模板,为何使用默认的就没问题,用复制的就有问题。

支持(0) 反对(0) seewold | 园豆:109 (初学一级) | 2013-05-04 20:38
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册