none
如何自定义TabControl的Header样式 RRS feed

  • 问题

  • 我希望实现TabControl的Header显示在ComboBox或ListBox中,选中某项后,显示对应的TabItem内容。在TabItem中我放了普通的TabControl。
    见图例http://hi.csdn.net/attachment/201106/4/63407_1307183712ltsT.png

    其中NoHeaderTabControl继承了TabControl,现在就是无法将外围的TabControl的Headers显示到列表中。

    <Window x:Class="WpfApplication1.Window3"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    		xmlns:loc="clr-namespace:WpfApplication1"
        Title="Window3" Height="300" Width="300">
    	<Window.Resources>
    		<ControlTemplate x:Key="tc" TargetType="loc:NoHeaderTabControl">
    			<Border BorderBrush="Black" BorderThickness="1" CornerRadius="5" Padding="5">
    			<Grid>
    				<Grid.RowDefinitions>
    					<RowDefinition Height="Auto" />
    					<RowDefinition />
    				</Grid.RowDefinitions>
    					<Border BorderBrush="Black" BorderThickness="1" CornerRadius="5" Padding="5"
    							Grid.Row="0">
    
    						<!--希望将Header显示在ComboBox中,并选择ComboBoxItem,显示对应的TabItem-->
    						<ComboBox 
    							DisplayMemberPath="Header" Width="70"
    							HorizontalAlignment="Left" ItemsSource="????" >
    						</ComboBox>
    					</Border>
    					<ContentPresenter 
    						Content="{TemplateBinding SelectedContent}" 
    						Grid.Row="1"
    						Margin="0,10,0,0" />
    
    			</Grid>
    			</Border>
    		</ControlTemplate>		
    	</Window.Resources>	
    	<Grid>
    		<loc:NoHeaderTabControl Template="{StaticResource tc}" SelectedIndex="0">
    			<TabItem Header="TC1">
    				<TabControl>
    					<TabItem Header="TC1 Tab1">
    						This is Tab 1 in TC1
    					</TabItem>
    					<TabItem Header="TC1 Tab2">
    						This is Tab 1 in TC2
    					</TabItem>
    				</TabControl>
    			</TabItem>
    			<TabItem Header="TC2">
    				<TabControl>
    					<TabItem Header="TC2 Tab1">
    						This is Tab 2 in TC1
    					</TabItem>
    					<TabItem Header="TC2 Tab2">
    						This is Tab 2 in TC2
    					</TabItem>
    				</TabControl>
    			</TabItem>
    		</loc:NoHeaderTabControl>
    	</Grid>
    </Window>
    
    

    Sonny.Lin
    2011年6月4日 10:43

答案

  • Template这么写:

        <ControlTemplate x:Key="tc" TargetType="TabControl">
          <Border BorderBrush="Black" BorderThickness="1" CornerRadius="5" Padding="5">
            <Grid>
              <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition />
              </Grid.RowDefinitions>
              <Border BorderBrush="Black" BorderThickness="1" CornerRadius="5" Padding="5"
    							Grid.Row="0">
     
                <!--希望将Header显示在ComboBox中,并选择ComboBoxItem,显示对应的TabItem-->
                <ComboBox Width="100" DisplayMemberPath="Header" IsEditable="True" IsReadOnly="True"
    							HorizontalAlignment="Left" ItemsSource="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Items}" 
                  SelectedItem="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=SelectedItem}" IsSynchronizedWithCurrentItem="True">
                </ComboBox>
              </Border>
              <Grid x:Name="ContentPanel" Grid.Row="1" KeyboardNavigation.DirectionalNavigation="Contained" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
                <ContentPresenter Content="{TemplateBinding SelectedContent}"  ContentSource="SelectedContent" Margin="2,2,2,2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
              </Grid>
            </Grid>
          </Border>
        </ControlTemplate>

    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年6月6日 9:51
    版主