none
Tabcontrol 如何才能让header在下面? RRS feed

  • 问题

  • 现在一般的貌似都在上面显示header文字,有个变态的需求要让这个header在下面,怎么搞?
    2011年9月14日 9:50

答案

  • 这个需求确实很变态,我想是不是可以修改一下TabControl的模板来快速实现呢? 我是通过把HeaderPanel的Grid.Row放到第二行,把ContentPanel放到第一行。这样Header就一直在下面了

        <ControlTemplate x:Key="TabWrapPanelControlTemplate" TargetType="{x:Type TabControl}">
    
          <Grid ClipToBounds="True" KeyboardNavigation.TabNavigation="Local" SnapsToDevicePixels="True">
    
            <Grid.ColumnDefinitions>
    
              <ColumnDefinition Name="ColumnDefinition0" Width="*"/>
    
              <ColumnDefinition Name="ColumnDefinition2" Width="0"/>
    
            </Grid.ColumnDefinitions>
    
            <Grid.RowDefinitions>
    
              <RowDefinition Name="RowDefinition0" Height="Auto"/>
    
              <RowDefinition Name="RowDefinition1" Height="*"/>
    
            </Grid.RowDefinitions>
    
            <WrapPanel Name="HeaderPanel"
    
                      Grid.Column="0"
    
                      Grid.Row="1"
    
                      Margin="2,2,2,0"
    
                      Panel.ZIndex="1"
    
                      IsItemsHost="True"
    
                      KeyboardNavigation.TabIndex="1"/>
    
            <Border Name="ContentPanel"
    
                      Grid.Column="0"
    
                      Grid.Row="0"
    
                      Background="{TemplateBinding Panel.Background}"
    
                      BorderBrush="{TemplateBinding Border.BorderBrush}"
    
                      BorderThickness="{TemplateBinding Border.BorderThickness}"
    
                      KeyboardNavigation.DirectionalNavigation="Contained"
    
                      KeyboardNavigation.TabIndex="2"
    
                      KeyboardNavigation.TabNavigation="Local">
    
              <ContentPresenter Name="PART_SelectedContentHost"
    
                         Margin="{TemplateBinding Control.Padding}"
    
                         Content="{TemplateBinding TabControl.SelectedContent}"
    
                         ContentSource="SelectedContent"
    
                         ContentStringFormat="{TemplateBinding TabControl.SelectedContentStringFormat}"
    
                         ContentTemplate="{TemplateBinding TabControl.SelectedContentTemplate}"
    
                         SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"/>
    
            </Border>
    
          </Grid>
    
        </ControlTemplate>
    
    
     我的Demo:<a href="http://files.cnblogs.com/midcn/TabControl.rar" rel="nofollow">http://files.cnblogs.com/midcn/TabControl.rar</a>
    
    

    • 已编辑 MaJiXiang 2011年9月14日 17:22
    • 已标记为答案 a013strife 2011年9月15日 1:23
    2011年9月14日 17:18

全部回复

  • 这个需求确实很变态,我想是不是可以修改一下TabControl的模板来快速实现呢? 我是通过把HeaderPanel的Grid.Row放到第二行,把ContentPanel放到第一行。这样Header就一直在下面了

        <ControlTemplate x:Key="TabWrapPanelControlTemplate" TargetType="{x:Type TabControl}">
    
          <Grid ClipToBounds="True" KeyboardNavigation.TabNavigation="Local" SnapsToDevicePixels="True">
    
            <Grid.ColumnDefinitions>
    
              <ColumnDefinition Name="ColumnDefinition0" Width="*"/>
    
              <ColumnDefinition Name="ColumnDefinition2" Width="0"/>
    
            </Grid.ColumnDefinitions>
    
            <Grid.RowDefinitions>
    
              <RowDefinition Name="RowDefinition0" Height="Auto"/>
    
              <RowDefinition Name="RowDefinition1" Height="*"/>
    
            </Grid.RowDefinitions>
    
            <WrapPanel Name="HeaderPanel"
    
                      Grid.Column="0"
    
                      Grid.Row="1"
    
                      Margin="2,2,2,0"
    
                      Panel.ZIndex="1"
    
                      IsItemsHost="True"
    
                      KeyboardNavigation.TabIndex="1"/>
    
            <Border Name="ContentPanel"
    
                      Grid.Column="0"
    
                      Grid.Row="0"
    
                      Background="{TemplateBinding Panel.Background}"
    
                      BorderBrush="{TemplateBinding Border.BorderBrush}"
    
                      BorderThickness="{TemplateBinding Border.BorderThickness}"
    
                      KeyboardNavigation.DirectionalNavigation="Contained"
    
                      KeyboardNavigation.TabIndex="2"
    
                      KeyboardNavigation.TabNavigation="Local">
    
              <ContentPresenter Name="PART_SelectedContentHost"
    
                         Margin="{TemplateBinding Control.Padding}"
    
                         Content="{TemplateBinding TabControl.SelectedContent}"
    
                         ContentSource="SelectedContent"
    
                         ContentStringFormat="{TemplateBinding TabControl.SelectedContentStringFormat}"
    
                         ContentTemplate="{TemplateBinding TabControl.SelectedContentTemplate}"
    
                         SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"/>
    
            </Border>
    
          </Grid>
    
        </ControlTemplate>
    
    
     我的Demo:<a href="http://files.cnblogs.com/midcn/TabControl.rar" rel="nofollow">http://files.cnblogs.com/midcn/TabControl.rar</a>
    
    

    • 已编辑 MaJiXiang 2011年9月14日 17:22
    • 已标记为答案 a013strife 2011年9月15日 1:23
    2011年9月14日 17:18
  • 恩,可以通过修改controltemplate实现,楼上是我实际用的方法。
    2011年9月15日 1:23
  • 参考我很早的一篇博客: http://www.cnblogs.com/wpf_gd/articles/1707750.html


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    2011年9月16日 18:14
    版主