从焦点TabItem中删除边框底部

时间:2016-11-29 12:57:20

标签: c# wpf styles tabcontrol

点击一个tabitem后,我想删除底部的边框。 目前我有这个:

enter image description here

现在我要删除标记的边框。

我搜索了很多,发现了这个:

Tab Item and Tab Control Border Style

Get rid of the line under that tab of the tab control

我尝试了两种方法很长时间但没有成功。

我的代码:

<Style x:Key="MainMenu" TargetType="{x:Type TabControl}">
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Padding" Value="0"/>

        <Setter Property="Template">
            <Setter.Value>

                <ControlTemplate TargetType="{x:Type TabControl}">
                    <Grid KeyboardNavigation.TabNavigation="Local">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <TabPanel x:Name="HeaderPanel" 
                                  Grid.Row="0" 
                                  Panel.ZIndex="1" 
                                  IsItemsHost="True" 
                                  KeyboardNavigation.TabIndex="1" 
                                  Background="Transparent" />

                        <Border x:Name="Border"
                                Grid.Row="1"
                                BorderThickness="0 1 0 0"
                                BorderBrush="Red"
                                Background="LightGray"
                                KeyboardNavigation.TabNavigation="Local"
                                KeyboardNavigation.DirectionalNavigation="Contained"
                                KeyboardNavigation.TabIndex="2">

                            <ContentPresenter x:Name="PART_SelectedContentHost"
                                          ContentSource="SelectedContent" />
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="MainMenuItem" TargetType="{x:Type TabItem}">
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="FontSize" Value="13px"/>
        <Setter Property="Cursor" Value="Hand"/>

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid>
                        <Border 
                            Name="Border"
                            Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"
                            BorderBrush="Black" 
                            Padding="10px"
                            Margin="10 10 10 0"
                            BorderThickness="1,1,1,0">
                            
                            <ContentPresenter x:Name="ContentSite"
                                        VerticalAlignment="Center"
                                        HorizontalAlignment="Center"
                                        ContentSource="Header"/>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsFocused" Value="True" >
                            <Setter Property="Background" TargetName="Border" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True" >
                            <Setter Property="Background" TargetName="Border" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" />
                        </Trigger>
                        <Trigger Property="IsSelected" Value="True" >
                            <Setter Property="Background" TargetName="Border" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

1 个答案:

答案 0 :(得分:0)

要从仅选定的TabItem中删除红线,请将样式更新为:

    <Style x:Key="MainMenuItem" TargetType="{x:Type TabItem}">
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="FontSize" Value="13px"/>
        <Setter Property="Cursor" Value="Hand"/>

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid>
                        <Border 
                    Name="Border"
                    Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"
                    BorderBrush="Black" 
                    Padding="10px"
                    Margin="10 10 10 0"
                    BorderThickness="1,1,1,0">

                            <ContentPresenter x:Name="ContentSite"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Center"
                                ContentSource="Header"/>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsFocused" Value="True" >
                            <Setter Property="Background" TargetName="Border" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True" >
                            <Setter Property="Background" TargetName="Border" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" />
                        </Trigger>
                        <Trigger Property="IsSelected" Value="True" >
                            <Setter Property="Background" TargetName="Border" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" />
                            <Setter Property="Margin" TargetName="Border" Value="10,10,10,-1" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

我所做的是在选择标签时添加一个setter,并仅修改该标签项的边距