1

我正在创建一个 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>
4

2 回答 2

1

我认为通过将's设置为而不是将其设置为零来隐藏 aBorder当鼠标不在选项卡上时会更好。BorderBorderBrushTransparentBorderThickness

换句话说，改变

<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，而其中的控件不会改变大小。

于 2012-10-05T10:30:48.787 回答
0

如果您从 IsMouseOver 触发器中删除下面的线（边框），它将停止跳跃，并且在视觉上它并没有真正产生巨大的影响（在我看来）。

<Setter TargetName="Border" Property="BorderThickness" Value="0,0,0,0" />
于 2012-10-05T09:58:52.370 回答