我正在定制一个包含选项卡控件子元素的用户控件。用户控件停靠在主窗口的一侧。我希望标签项根据停靠位置定向,例如。左侧停靠的选项卡项目旋转 90 度以沿侧面放置。我通过绑定到附加属性 DockPanel.Dock 使选项卡正确对齐。问题在于,当呈现选项卡时,它们会被选项卡控件中的一行断开。我可以为外部用户控件对象手动设置 (DockPanel.Dock) 属性,并且沿该方向停靠的选项卡正确绘制,但其他选项卡由一条线分隔。
这是 TabDockControl XML:
<UserControl x:Class="AnimationMotionCaptureStudio.TabDockControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300" x:Name="Root" DockPanel.Dock="Left">
<Grid>
<TabControl Height="Auto" HorizontalAlignment="Stretch" Name="tabControl1" VerticalAlignment="Stretch" Width="Auto" TabStripPlacement="{Binding Path=(DockPanel.Dock),ElementName=Root}">
<TabControl.Resources>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Padding" Value="2" />
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<ContentPresenter Content="{TemplateBinding Content}" />
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=(DockPanel.Dock), ElementName=Root}" Value="Left">
<Setter Property="Padding" Value="2" />
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<ContentPresenter Content="{TemplateBinding Content}">
<ContentPresenter.LayoutTransform>
<RotateTransform Angle="90" />
</ContentPresenter.LayoutTransform>
</ContentPresenter>
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Path=(DockPanel.Dock), ElementName=Root}" Value="Right">
<Setter Property="Padding" Value="5" />
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<ContentPresenter Content="{TemplateBinding Content}">
<ContentPresenter.LayoutTransform>
<RotateTransform Angle="-90" />
</ContentPresenter.LayoutTransform>
</ContentPresenter>
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</TabControl.Resources>
<TabItem Header="{Binding Path=(DockPanel.Dock), ElementName=Root}" Name="tabItem1">
<Grid>
<Border BorderBrush="Silver" BorderThickness="1" Height="Auto" HorizontalAlignment="Stretch" Name="border1" VerticalAlignment="Stretch" Width="Auto" />
</Grid>
</TabItem>
</TabControl>
</Grid>
除了 VS2010 生成的构造函数之外,文件后面的代码没有添加任何额外的代码。
以及控件的 MainWindow XML 用法:
<DockPanel Grid.Row="1" Height="Auto" HorizontalAlignment="Stretch" Name="MainDockPanel" VerticalAlignment="Stretch" Width="Auto" >
<DockPanel.Children>
<StatusBar Height="23" Name="statusBar1" Width="Auto" DockPanel.Dock="Bottom" Background="#FF00476D" />
<AMCS:TabDockControl DockPanel.Dock="Left">
</AMCS:TabDockControl>
<AMCS:TabDockControl DockPanel.Dock="Right">
</AMCS:TabDockControl>
<AMCS:TabDockControl DockPanel.Dock="Bottom">
</AMCS:TabDockControl>
<Border BorderBrush="Silver" BorderThickness="2" Height="Auto" Name="border1" Width="Auto" DockPanel.Dock="Top" Background="#FF898888">
<Image Height="Auto" HorizontalAlignment="Stretch" Name="D3DImage" Stretch="Fill" VerticalAlignment="Stretch" Width="Auto" MouseLeftButtonDown="D3DImage_MouseLeftButtonDown" MouseLeftButtonUp="D3DImage_MouseLeftButtonUp" MouseMove="D3DImage_MouseMove" Grid.RowSpan="1" Grid.Row="1" MouseWheel="D3DImage_MouseWheel">
<Image.Source>
<i:D3DImage x:Name="D3DImageSource"/>
</Image.Source>
</Image>
</Border>
</DockPanel.Children>
</DockPanel>
任何有关如何设置它以正确呈现选项卡的建议将不胜感激。