1

次のように、4 つの TabItems を持つ WPF TabControl があり、TabControl と TabItems の両方にカスタム スタイルを適用しました。

<Style TargetType="TabControl" x:Key="TabControlStyle">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="TabStripPlacement" Value="Left" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TabControl">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <!-- The container for tab item headers -->
                    <TabPanel 
                         Grid.Column="0"
                         Panel.ZIndex="1" 
                         Margin="0,0,4,-1" 
                         IsItemsHost="True"
                         Background="Transparent" />

                    <!-- Shadow to the left of the tab pages -->
                    <Border Grid.Column="0" Width="5" HorizontalAlignment="Right">
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                <GradientStop Offset="0" Color="Transparent" />
                                <GradientStop Offset="1" Color="{StaticResource ShadowGray}" /> 
                            </LinearGradientBrush>
                        </Border.Background>
                    </Border>

                    <!-- Tab page -->
                    <Border Grid.Column="1" 
                            Background="White" 
                            SnapsToDevicePixels="true"
                            BorderThickness="1" 
                            BorderBrush="{StaticResource HeaderBlueBrush}">
                        <ContentPresenter ContentSource="SelectedContent" />    
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="{x:Type TabItem}" x:Key="TabItemStyle">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">

                <!-- Tab item header -->
                <Border Name="border" 
                        SnapsToDevicePixels="True" 
                        BorderThickness="0" 
                        Padding="5,8,40,8"
                        Margin="0,0,-4,0">
                    <TextBlock Name="buttonText" 
                                Margin="0" 
                                FontSize="14" 
                                Foreground="{StaticResource FontDarkGrayBrush}" 
                                Text="{TemplateBinding Header}" 
                                VerticalAlignment="Center" />
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Trigger.Setters>
                            <Setter TargetName="border" Property="Background" Value="{StaticResource HoverBlueBrush}" />
                       </Trigger.Setters>
                    </Trigger>
                    <Trigger Property="IsSelected" Value="True">
                        <Trigger.Setters>
                            <Setter TargetName="border" Property="Background" Value="{StaticResource SelectionBlueBrush}" />
                            <Setter TargetName="buttonText" Property="Foreground" Value="White"/>
                        </Trigger.Setters>
                    </Trigger>

                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

ご覧のとおり、タブ項目のヘッダーは Border で構成され (マウスがその上に置かれているとき、または選択されているときに別の色になります)、その Border にはヘッダー タイトルを表示する TextBlock があります。十分に単純だと思います。

問題は、ヘッダーがマウス入力に適切に反応しないことです。基本的に：反応する前に、実際のテキスト（私が推測しているTextBlock）をホバー/クリックする必要があります。テキストの右側をクリックしても何も起こりません。ホバリングも同じ。ただし、既に 1 つのヘッダーのテキストにカーソルを合わせている場合 (「ホバリング カラー」が表示されます)、マウスをテキストの右側 (通常は反応しない場所) に移動すると、ホバリング カラーが残ります。私が実際に国境を離れるまで、立ち去らないでください。

これを明確にするための画像を次に示します。

スクリーンショットの例

この動作の原因は何ですか? 私はそれが正常ではないと仮定しています.TabControlが人々が期待するように反応しないので、それは非常に迷惑です.

Border/TextBlock コンボの Margin/Padding を「反転」してみました (Border に Padding を与えるのではなく、TextBlock に Margin を与えることでスペースを作ります) が、何も変わりません。

ヘルプ？

4

1 に答える 1

4

タブ項目テンプレートの境界線の背景は空であってはなりません。それ以外の場合、境界線はマウス操作では見えません。透明でもOK。

<Border Name="border" Background="Transparent" ...
于 2012-11-21T21:08:05.370 に答える