Question

我正在创建一个WPF标签控件，其中包含旋转270°的标签。当我将鼠标放在标签之间时，它们似乎是“跳跃”。我正在寻找一种方法来防止这种情况发生。标签应该与Microsoft Office功能区UI中的标签具有相同的行为（保持在固定位置）。是否可以修改下面的XAML来实现这一目标？

XAML：

<Window x:Class="WpfApplication2.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="350" Width="300" TextOptions.TextFormattingMode="Display" TextOptions.TextRenderingMode="ClearType" UseLayoutRounding="true">
    <TabControl TabStripPlacement="Left" BorderThickness="1,0,0,0">
        <TabControl.ItemContainerStyle>
            <Style TargetType="{x:Type TabItem}">
                <Setter Property="LayoutTransform">
                    <Setter.Value>
                        <RotateTransform Angle="270"/>
                    </Setter.Value>
                </Setter>
                <Setter Property="Foreground" Value="#330033" />
                <Setter Property="FontSize" Value="9pt"/>
                <Setter Property="Height" Value="22" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TabItem}">
                            <Grid>
                                <Border Background="White" Name="Border" BorderBrush="#A9A9A9" BorderThickness="0" CornerRadius="2,2,0,0">
                                    <Border Padding="2" BorderBrush="Transparent">
                                        <ContentPresenter x:Name="ContentSite"
                                        VerticalAlignment="Center"
                                        HorizontalAlignment="Center" 
                                        ContentSource="Header" 
                                        Margin="12,0,12,2"/>
                                    </Border>
                                </Border>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter Property="Panel.ZIndex" Value="100" />
                                    <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
                                </Trigger>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Panel.ZIndex" Value="100" />
                                    <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
                                    <Setter TargetName="Border" Property="Background" Value="White" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </TabControl.ItemContainerStyle>
        <TabItem Header="Tab item 1" />
        <TabItem Header="Tab item 2" />
        <TabItem Header="Tab item 3" />
    </TabControl>
</Window>

Answer 1

我认为通过将Border的{{1}}设置为Border而不是将其设置为BorderBrush，当鼠标悬停在标签上时隐藏Transparent会更好BorderThickness为零。

换句话说，改变

<Border Background="White" Name="Border" BorderBrush="#A9A9A9" BorderThickness="0" CornerRadius="2,2,0,0">

到

<Border Background="White" Name="Border" BorderBrush="Transparent" BorderThickness="1,1,1,0" CornerRadius="2,2,0,0">

并在IsMouseOver触发器中，使用

    <Setter TargetName="Border" Property="BorderBrush" Value="#A9A9A9" />

取代BorderThickness上的二传手。

在您的情况下，当您更改BorderThickness时，边框元素本身会改变大小，因为BorderThickness会导致Border的'尺寸'，并且其中的控件不会'改变大小。

Answer 2

如果从IsMouseOver触发器中删除下面的行（边框），它会停止跳跃，并且在视觉上它不会产生巨大的影响（在我看来）。

<Setter TargetName="Border" Property="BorderThickness" Value="0,0,0,0" />

WPF TabControl选项卡“跳跃”

2 个答案: