WPF 选项卡控件样式
Posted
技术标签:
【中文标题】WPF 选项卡控件样式【英文标题】：WPF tabcontrol styling 【发布时间】：2011-01-31 20:45:54 【问题描述】：我的 UI 具有相当标准的外观和感觉。它在左侧有一列图标，单击时在右侧打开不同的用户控件。目前我正在为选择图标和用户控件容器使用单独的控件。我有奇怪的焦点问题，我厌倦了试图缓解，我想知道我是否可以设置一个 tabcontrol 的样式，让它看起来像我的 UI（假设 tabcontrol 在导航选项卡时不会有焦点问题）。
这是基本 UI 的屏幕截图。样式主要是关于如何让 tabcontrols 页面选择看起来像我的图标列。任何人都想把他们的帽子扔在戒指上，我如何用 tabcontrol 完成这个？在这一点上，我的 xaml 很弱。
alt text http://img413.imageshack.us/img413/8399/directoru.png
【问题讨论】：
或者我可能需要将近一周的时间才能找到时间添加示例。我希望它有所帮助。 @CJBS 是 BrentRobi 制作了原始帖子并拥有图像。我正在谈论的示例在下面接受的答案的编辑中。 @BryanAnderson - 对不起 - 你是对的。我输入了“@B”并没有检查就接受了第一个条目。 @BrettRobi Imageshack 图像不再有效。有没有可能嵌入？ @CJBS 对不起，我早就忘记了那张图片，甚至是它来自的应用程序。很高兴看到这在 7 年后仍然有意义...... 【参考方案1】：如何使用DockPanel 模板化TabControl，并将TabPanel 的DockPanel.Dock 属性绑定到原始TabStripPlacement 属性，如图所示？
<Style TargetType="x:Type TabControl" >
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="x:Type TabControl">
<DockPanel KeyboardNavigation.TabNavigation="Local" LastChildFill="True">
<TabPanel DockPanel.Dock="TemplateBinding TabStripPlacement"
Name="HeaderPanel"
Grid.Row="0"
Panel.ZIndex="1"
Margin="0,0,4,1"
IsItemsHost="True"
KeyboardNavigation.TabIndex="1"
Background="Transparent" />
<Border
Name="Border"
Background="Transparent"
BorderBrush="Black"
BorderThickness="1"
CornerRadius="2" >
<ContentPresenter
ContentSource="SelectedContent" />
</Border>
</DockPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="Black" />
<Setter TargetName="Border" Property="BorderBrush" Value="DarkGray" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
【讨论】：
【参考方案2】：<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 的副本，添加和删除了一些边框。希望对您有所帮助。
【讨论】：
感谢您的回复。这确实是我正在寻找建议的重新模板。这是我真正认为可能会阻止它成为可行解决方案的部分。 我可以在几个小时后回家后发布一个示例。 Brett，我希望您会发现重新模板不会那么糟糕。这听起来很可怕，但一旦你进入它就很有趣。另外，恢复到旧模板意味着如果最坏的情况发生，您可以随时重新开始。 感谢 Bryan 的示例。我会在接下来的几天里仔细研究一下。以上是关于WPF 选项卡控件样式的主要内容，如果未能解决你的问题，请参考以下文章