WPF垂直TabItem边框问题
我刚刚开始使用 WPF,在左侧显示 TabControl 并将 TabItem 文本标题旋转 90 度后,我遇到了视觉问题。
问题是 TabItem 标头的顶部边框未显示。 代码是这样的:
<Window x:Class="WPF_Exemplo1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="675" Width="900" ResizeMode="NoResize" WindowStyle="None" WindowState="Maximized">
<Grid>
<TabControl Margin="12,85.74,98.601,167.193" Name="tabControl1" TabStripPlacement="Left">
<TabItem Name="tabItem1" FlowDirection="LeftToRight" FontSize="22" Height="60">
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Height="40" Width="40" Margin="20,0,0,0" VerticalAlignment="Center"></Image>
<TextBlock Margin="25,0,25,0" VerticalAlignment="Center">Item 1</TextBlock>
</StackPanel>
</TabItem.Header>
<TabItem.LayoutTransform>
<TransformGroup>
<RotateTransform Angle="-90"/>
</TransformGroup>
</TabItem.LayoutTransform>
<Grid />
</TabItem>
</TabControl>
</Grid>
</Window>
I'm just starting with WPF and I'm facing a visual issue after displaying TabControl on the Left and Rotating TabItem text header 90 degrees.
The issue is that the top border of the TabItem header is not showing.
The code is this:
<Window x:Class="WPF_Exemplo1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="675" Width="900" ResizeMode="NoResize" WindowStyle="None" WindowState="Maximized">
<Grid>
<TabControl Margin="12,85.74,98.601,167.193" Name="tabControl1" TabStripPlacement="Left">
<TabItem Name="tabItem1" FlowDirection="LeftToRight" FontSize="22" Height="60">
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Height="40" Width="40" Margin="20,0,0,0" VerticalAlignment="Center"></Image>
<TextBlock Margin="25,0,25,0" VerticalAlignment="Center">Item 1</TextBlock>
</StackPanel>
</TabItem.Header>
<TabItem.LayoutTransform>
<TransformGroup>
<RotateTransform Angle="-90"/>
</TransformGroup>
</TabItem.LayoutTransform>
<Grid />
</TabItem>
</TabControl>
</Grid>
</Window>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
默认情况下,选项卡项目在选择时会隐藏其右边框。 这会创建一个与选项卡内容混合的视觉外观。 但是,由于您将选项卡项目旋转了 90 度,因此它不再用于此目的。 为了获得正确的视觉反应,您需要编辑 TabItem 的 ControlTemplate。 最简单的方法是从模板的副本开始(如果您有 Blend,则只需转到“编辑模板副本”)。 如果您没有 Blend,那么您可以使用我的 Blend 版本(如下)创建的默认资源。 然后编辑正确的边框属性以创建您想要的视觉效果。
By default tab items hide their right border when selected. This creates a visual appearance of it blending into the tab content. However, since you rotated the tab item 90 degrees it no longer serves this purpose. To get the correct visual reaction you will need to edit the TabItem's ControlTemplate. The easiest way to do this is to start with a copy of the template (if you have Blend you can simply go to Edit Template Copy). If you don't have Blend then you can use the default resources created by my version of Blend (below). Then edit the correct border properties to create the visual that you want.