WPF tabcontrol样式

Question

我有一个具有相当标准外观和感觉的UI.它左侧有一列图标,单击时会在右侧打开另一个用户控件.目前我正在为选择图标和用户控件包含使用单独的控件.我有一些奇怪的焦点问题,我厌倦了试图缓解,我想知道我是否可以将tabcontrol设置为看起来像我的UI(假设tabcontrol在导航选项卡时没有焦点问题).

这是基本UI的屏幕截图.样式主要是关于如何使tabcontrols页面选择看起来像我的图标列.任何人都想把他们的帽子放在戒指中,以便我如何通过tabcontrol实现这一目标？我的xaml在这一点上非常弱.

alt text http://img413.imageshack.us/img413/8399/directoru.png

Answer 1

<TabControl TabStripPlacement="Left">
    ...
</TabControl>

然后将图标放在TabItems的Header属性中,将UserControls放在Content属性中.这将使你在那里一半.如果您想要完全相同的外观,则需要通过复制当前模板(使用Blend或ShowMeTheTemplate复制当前模板)并根据需要进行修改来重新模板TabControl和TabItem .但只是更改这些属性将让您测试TabControl是否摆脱了您的焦点问题.

编辑:这是一个示例模板,应该非常接近您的屏幕截图

<Style TargetType="{x:Type TabItem}">
    <Setter Property="Background" Value="Transparent" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">

                <Border x:Name="PART_Border" Background="{TemplateBinding Background}" BorderThickness="1" BorderBrush="LightGray" Margin="2">
                    <ContentPresenter ContentSource="Header" Margin="2" />
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter TargetName="PART_Border" Property="BorderBrush" Value="Black" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="{x:Type TabControl}">
    <Setter Property="TabStripPlacement" Value="Left" />
    <Setter Property="Margin" Value="2" />
    <Setter Property="Padding" Value="2"    />
    <Setter Property="Background" Value="White" />


    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabControl}">
                <Grid ClipToBounds="True" SnapsToDevicePixels="True" KeyboardNavigation.TabNavigation="Local">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Name="ColumnDefinition0" />
                        <ColumnDefinition Width="0" Name="ColumnDefinition1" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" Name="RowDefinition0" />
                        <RowDefinition Height="*" Name="RowDefinition1" />
                    </Grid.RowDefinitions>

                    <Border x:Name="HeaderBorder" 
                            BorderBrush="Black" 
                            BorderThickness="1" 
                            CornerRadius="5" 
                            Background="#FAFAFA"
                            Margin="0,0,0,5">
                        <TabPanel IsItemsHost="True"
                                  Name="HeaderPanel" 
                                  Panel.ZIndex="1" 
                                  KeyboardNavigation.TabIndex="1"
                                  Grid.Column="0" 
                                  Grid.Row="0" 
                         />
                    </Border>

                    <Grid Name="ContentPanel" 
                          KeyboardNavigation.TabIndex="2" 
                          KeyboardNavigation.TabNavigation="Local" 
                          KeyboardNavigation.DirectionalNavigation="Contained" 
                          Grid.Column="0" 
                          Grid.Row="1">
                        <Border Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}" 
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="5">
                            <ContentPresenter Content="{TemplateBinding SelectedContent}" 
                                              ContentTemplate="{TemplateBinding SelectedContentTemplate}" 
                                              ContentStringFormat="{TemplateBinding SelectedContentStringFormat}" 
                                              ContentSource="SelectedContent" 
                                              Name="PART_SelectedContentHost" 
                                              Margin="2" 
                                              SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" 
                            />
                        </Border>
                    </Grid>
                </Grid>

                <ControlTemplate.Triggers>
                    <Trigger Property="TabControl.TabStripPlacement" Value="Bottom">
                        <Setter TargetName="HeaderPanel" Property="Grid.Row" Value="1" />
                        <Setter TargetName="ContentPanel" Property="Grid.Row" Value="0" />
                        <Setter TargetName="RowDefinition0" Property="RowDefinition.Height" Value="*" />
                        <Setter TargetName="RowDefinition1" Property="RowDefinition.Height" Value="Auto" />
                        <Setter TargetName="HeaderBorder" Property="FrameworkElement.Margin" Value="0,5,0,0" />
                    </Trigger>
                    <Trigger Property="TabControl.TabStripPlacement" Value="Left">
                        <Setter TargetName="HeaderPanel" Property="Grid.Row" Value="0" />
                        <Setter TargetName="ContentPanel" Property="Grid.Row" Value="0" />
                        <Setter TargetName="HeaderPanel" Property="Grid.Column" Value="0" />
                        <Setter TargetName="ContentPanel" Property="Grid.Column" Value="1" />
                        <Setter TargetName="ColumnDefinition0" Property="ColumnDefinition.Width" Value="Auto" />
                        <Setter TargetName="ColumnDefinition1" Property="ColumnDefinition.Width" Value="*" />
                        <Setter TargetName="RowDefinition0" Property="RowDefinition.Height" Value="*" />
                        <Setter TargetName="RowDefinition1" Property="RowDefinition.Height" Value="0" />
                        <Setter TargetName="HeaderBorder" Property="FrameworkElement.Margin" Value="0,0,5,0" />
                    </Trigger>
                    <Trigger Property="TabControl.TabStripPlacement" Value="Right">
                        <Setter TargetName="HeaderPanel" Property="Grid.Row" Value="0" />
                        <Setter TargetName="ContentPanel" Property="Grid.Row" Value="0" />
                        <Setter TargetName="HeaderPanel" Property="Grid.Column" Value="1" />
                        <Setter TargetName="ContentPanel" Property="Grid.Column" Value="0" />
                        <Setter TargetName="ColumnDefinition0" Property="ColumnDefinition.Width" Value="*" />
                        <Setter TargetName="ColumnDefinition1" Property="ColumnDefinition.Width" Value="Auto" />
                        <Setter TargetName="RowDefinition0" Property="RowDefinition.Height" Value="*" />
                        <Setter TargetName="RowDefinition1" Property="RowDefinition.Height" Value="0" />
                        <Setter TargetName="HeaderBorder" Property="FrameworkElement.Margin" Value="5,0,0,0" />
                    </Trigger>
                    <Trigger Property="UIElement.IsEnabled" Value="False">
                        <Setter Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

它基本上是普通TabControl的副本,添加和删除了一些边框.希望有所帮助.