WPF 选项卡控件样式 [英] WPF tabcontrol styling

问题描述

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

I've got a UI with a fairly standard look and feel. It has a column of icons on the left side which when clicked open a different user control on the right side. Currently I'm using separate controls for the selection icons and the usercontrol containment. I'm having strange focus issues that I am tired of trying to mitigate and am wondering if I could style a tabcontrol to look like my UI (under the assumption a tabcontrol would not have focus issues when navigating tabs).

这是基本用户界面的屏幕截图.样式主要是关于如何让 tabcontrols 页面选择看起来像我的图标列.任何人都想对我如何使用 tabcontrol 实现这一点表示怀疑?在这一点上，我的 xaml 非常弱.

Here is a screenshot of the basic UI. The styling is mostly about how to get the tabcontrols page selection to look like my column of icons. Anyone want to throw their hat in the ring as to how I might accomplish this with a tabcontrol? My xaml is pretty weak at this point.

替代文字 http://img413.imageshack.us/img413/8399/directoru.png

推荐答案

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

然后将图标放在 TabItems 的 Header 属性中，将 UserControls 放在 Content 属性中.这样你就完成了一半.如果您想要完全相同的外观，则需要通过复制当前模板来重新模板化 TabControl 和 TabItem(使用 Blend 或 ShowMeTheTemplate 复制当前模板)并根据需要修改它.但只要更改这些属性，您就可以测试 TabControl 是否能解决您的焦点问题.

Then you put the icons in the Header property of the TabItems and the UserControls in the Content property. That will get you about halfway there. If you want the exact same look you'll need to retemplate the TabControl and TabItem by copying the current template (use Blend or ShowMeTheTemplate to copy the current template) and modifying it as needed. But just changing those properties will let you test whether a TabControl gets rid of your focus issues.

这是一个与您的屏幕截图非常接近的示例模板

<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 的副本，添加和删除了一些边框.希望有所帮助.

It's basically a copy of the normal TabControl with some Borders added and removed. Hope that helps.

这篇关于WPF 选项卡控件样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！