带有单行 TabPanel 和溢出面板的 TabControl [英] TabControl with single line TabPanel and Overflow Panel
问题描述
我想将 WPF TabControl 的功能更改为仅生成一行,并为每个其他项目(如 ToolBar/ToolBarOverflowPanel)创建一个溢出弹出窗口.目前在 VisualStudio 中显示选项卡的方式相同.
I want to alter the functionality of the WPF TabControl to only spawn one line, and create a Overflow Popup for each further item (Like the ToolBar / ToolBarOverflowPanel). The same way tabs are shown in VisualStudio at the moment.
这是我得到的:
<Style TargetType="TabControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabControl">
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<controls:OneLineTabPanel x:Name="HeaderPanel"
Grid.Row="0"
Panel.ZIndex="1"
Margin="0"
KeyboardNavigation.TabIndex="1"
Background="Transparent">
</controls:OneLineTabPanel>
......
我现在确实尝试更改 TabPanel(用于显示标题),但我无法更改其模板(因为它源自 TabPanel).所以我尝试从其他控件派生,但后来我根本看不到任何项目.
I did now try to alter the TabPanel (which is used to display the headers), but i can't change its template (as it derives from TabPanel). So I try to derive from some other control instead, but then i can not see any items at all.
如何让我自己的 ItemsControl 与 TabControl 一起工作?
How can i get my own ItemsControl to work with the TabControl?
推荐答案
您需要覆盖整个 TabControl 模板.
幸运的是,使用 Visual Studio 很容易提取模板的副本(在 TabControl 元素上的文档大纲窗口中右键单击 -> 编辑模板 -> 编辑副本).
在默认的 TabControl 模板 HeaderPanel 中定义如下:
You need to override the whole template of TabControl.
Fortunately, it's easy to extract the copy of template using Visual Studio (right click in Document Outline window on TabControl element -> Edit Template -> Edit Copy).
In default TabControl template HeaderPanel is defined in the following way:
<TabPanel x:Name="HeaderPanel" Grid.Column="0" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
主要思想是通过设置 IsItemsHost="true" 将 TabControl.Items 绑定到完全另一种控件类型,而不是绑定到 Panel 控件.例如,绑定到具有开箱即用溢出按钮功能的 ToolBar:
The main idea is to bind TabControl.Items not to the Panel control by setting IsItemsHost="true", but to completely another control type. For example, to bind to the ToolBar, which has out of the box overflow button feature:
<ToolBar x:Name="HeaderPanel" ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Items}"/>
以下是一个完整的 TabControl 模板示例,其中 ToolBar 作为标题面板:
Here is a full example of TabControl template with ToolBar as a header panel:
<TabControl>
<TabControl.Template>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ColumnDefinition0"/>
<ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="RowDefinition0" Height="Auto"/>
<RowDefinition x:Name="RowDefinition1" Height="*"/>
</Grid.RowDefinitions>
<!--this will do the trick!!!-->
<ToolBar x:Name="HeaderPanel" ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Items}"/>
<Border x:Name="ContentPanel" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
<ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TabStripPlacement" Value="Bottom">
<Setter Property="Grid.Row" TargetName="HeaderPanel" Value="1"/>
<Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
<Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
<Setter Property="Height" TargetName="RowDefinition1" Value="Auto"/>
<Setter Property="Margin" TargetName="HeaderPanel" Value="2,0,2,2"/>
</Trigger>
<Trigger Property="TabStripPlacement" Value="Left">
<Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0"/>
<Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
<Setter Property="Grid.Column" TargetName="HeaderPanel" Value="0"/>
<Setter Property="Grid.Column" TargetName="ContentPanel" Value="1"/>
<Setter Property="Width" TargetName="ColumnDefinition0" Value="Auto"/>
<Setter Property="Width" TargetName="ColumnDefinition1" Value="*"/>
<Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
<Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
<Setter Property="Margin" TargetName="HeaderPanel" Value="2,2,0,2"/>
</Trigger>
<Trigger Property="TabStripPlacement" Value="Right">
<Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0"/>
<Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
<Setter Property="Grid.Column" TargetName="HeaderPanel" Value="1"/>
<Setter Property="Grid.Column" TargetName="ContentPanel" Value="0"/>
<Setter Property="Width" TargetName="ColumnDefinition0" Value="*"/>
<Setter Property="Width" TargetName="ColumnDefinition1" Value="Auto"/>
<Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
<Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
<Setter Property="Margin" TargetName="HeaderPanel" Value="0,2,2,2"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</TabControl.Template>
</TabControl>
这篇关于带有单行 TabPanel 和溢出面板的 TabControl的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!