1

270° 回転したタブを含む WPF タブ コントロールを作成しています。マウスをタブ間に置くと、タブが「ジャンプ」しているように見えます。これが起こらないようにする方法を探しています。タブは、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

をゼロに設定するのではなく、 をに設定Borderして、マウスがタブ上にないときにa を非表示にする方がよいと思います。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ないため、変更するとボーダー要素自体のサイズが変更されます。BorderThicknessBorder

于 2012-10-05T10:30:48.787 に答える
0

IsMouseOver トリガーから下の線 (境界線) を削除すると、ジャンプが停止し、視覚的には大きな影響はありません (私の意見では)。

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