【问题标题】:C# WPF making tabitem border slightly thickerC# WPF 使 tabitem 边框略粗
【发布时间】:2015-09-09 16:53:30
【问题描述】:

我想在不改变默认行为的情况下为我的 tabitems 设置更粗的边框。

我做了一些研究,似乎我需要使用 ControlTemplate,但这会覆盖默认行为(即背景颜色消失,无论是否选择背景颜色都保持不变。选项卡标题是当我将鼠标光标悬停在选项卡标题等上时,未以蓝色突出显示。)

我怎样才能只调整边框,而不会弄乱当前的行为?

谢谢!

【问题讨论】:

    标签: c# wpf tabs controltemplate


    【解决方案1】:

    首先要说的是,tabItem 不负责 tabcontrol 内容的外观。

    您有 2 个选项。 第一个是下载 Blend。复制 TabItem 和 TabControl 的默认样式并在那里进行更改。这比听起来容易得多

    第二个是做到以下几点:

            private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            var tabControlContentPanel = tb.Template.FindName("ContentPanel", tb) as Border;
            tabControlContentPanel.BorderThickness = new Thickness(10);
    
            foreach (TabItem tabItem in tb.Items)
            {
                var tabItemHeader = tabItem.Template.FindName("Bd", tabItem) as Border;
                tabItemHeader.BorderThickness = new Thickness(10);
            }
        }
    

    请确保已加载 TabControl 和 TabItems,否则“FindName”将返回 null

    更新:

    我将与您分享 TabControl 和 TabItem 的默认样式,但我强烈建议您看看 Blend。像这样使用它们:

     <TabControl HorizontalAlignment="Left" MouseDown="tb_MouseDown" Name="tb" Height="300" VerticalAlignment="Top" Style="{DynamicResource TabControlStyle1}">
                <TabItem Header="TabItem" Style="{DynamicResource TabItemStyle1}" >
                    <Grid Background="#FFE5E5E5"/>
                </TabItem>
    </TabControl>
    

    样式:

     <Window.Resources>
            <SolidColorBrush x:Key="TabControlNormalBorderBrush" Color="#8C8E94"/>
            <Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}">
                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                <Setter Property="Padding" Value="4,4,4,4"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/>
                <Setter Property="Background" Value="#F9F9F9"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TabControl}">
                            <Grid ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition x:Name="ColumnDefinition0"/>
                                    <ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition x:Name="RowDefinition0" Height="Auto"/>
                                    <RowDefinition x:Name="RowDefinition1" Height="*"/>
                                </Grid.RowDefinitions>
                                <TabPanel x:Name="HeaderPanel" Grid.Column="0" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
                                <Border x:Name="ContentPanel" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
                                    <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                </Border>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="TabStripPlacement" Value="Bottom">
                                    <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="1"/>
                                    <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
                                    <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                                    <Setter Property="Height" TargetName="RowDefinition1" Value="Auto"/>
                                    <Setter Property="Margin" TargetName="HeaderPanel" Value="2,0,2,2"/>
                                </Trigger>
                                <Trigger Property="TabStripPlacement" Value="Left">
                                    <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0"/>
                                    <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
                                    <Setter Property="Grid.Column" TargetName="HeaderPanel" Value="0"/>
                                    <Setter Property="Grid.Column" TargetName="ContentPanel" Value="1"/>
                                    <Setter Property="Width" TargetName="ColumnDefinition0" Value="Auto"/>
                                    <Setter Property="Width" TargetName="ColumnDefinition1" Value="*"/>
                                    <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                                    <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
                                    <Setter Property="Margin" TargetName="HeaderPanel" Value="2,2,0,2"/>
                                </Trigger>
                                <Trigger Property="TabStripPlacement" Value="Right">
                                    <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0"/>
                                    <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
                                    <Setter Property="Grid.Column" TargetName="HeaderPanel" Value="1"/>
                                    <Setter Property="Grid.Column" TargetName="ContentPanel" Value="0"/>
                                    <Setter Property="Width" TargetName="ColumnDefinition0" Value="*"/>
                                    <Setter Property="Width" TargetName="ColumnDefinition1" Value="Auto"/>
                                    <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                                    <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
                                    <Setter Property="Margin" TargetName="HeaderPanel" Value="0,2,2,2"/>
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="false">
                                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="TabItemFocusVisual">
                <Setter Property="Control.Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Rectangle Margin="3,3,3,1" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="#F3F3F3" Offset="0"/>
                <GradientStop Color="#EBEBEB" Offset="0.5"/>
                <GradientStop Color="#DDDDDD" Offset="0.5"/>
                <GradientStop Color="#CDCDCD" Offset="1"/>
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="TabItemHotBackground" EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="#EAF6FD" Offset="0.15"/>
                <GradientStop Color="#D9F0FC" Offset=".5"/>
                <GradientStop Color="#BEE6FD" Offset=".5"/>
                <GradientStop Color="#A7D9F5" Offset="1"/>
            </LinearGradientBrush>
            <SolidColorBrush x:Key="TabItemSelectedBackground" Color="#F9F9F9"/>
            <SolidColorBrush x:Key="TabItemHotBorderBrush" Color="#3C7FB1"/>
            <SolidColorBrush x:Key="TabItemDisabledBackground" Color="#F4F4F4"/>
            <SolidColorBrush x:Key="TabItemDisabledBorderBrush" Color="#FFC9C7BA"/>
            <Style x:Key="TabItemStyle1" TargetType="{x:Type TabItem}">
                <Setter Property="FocusVisualStyle" Value="{StaticResource TabItemFocusVisual}"/>
                <Setter Property="Foreground" Value="Black"/>
                <Setter Property="Padding" Value="6,1,6,1"/>
                <Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/>
                <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TabItem}">
                            <Grid SnapsToDevicePixels="true">
                                <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
                                    <ContentPresenter x:Name="Content" ContentSource="Header" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
                                </Border>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="true">
                                    <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemHotBackground}"/>
                                </Trigger>
                                <Trigger Property="IsSelected" Value="true">
                                    <Setter Property="Panel.ZIndex" Value="1"/>
                                    <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemSelectedBackground}"/>
                                </Trigger>
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="IsSelected" Value="false"/>
                                        <Condition Property="IsMouseOver" Value="true"/>
                                    </MultiTrigger.Conditions>
                                    <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemHotBorderBrush}"/>
                                </MultiTrigger>
                                <Trigger Property="TabStripPlacement" Value="Bottom">
                                    <Setter Property="BorderThickness" TargetName="Bd" Value="1,0,1,1"/>
                                </Trigger>
                                <Trigger Property="TabStripPlacement" Value="Left">
                                    <Setter Property="BorderThickness" TargetName="Bd" Value="1,1,0,1"/>
                                </Trigger>
                                <Trigger Property="TabStripPlacement" Value="Right">
                                    <Setter Property="BorderThickness" TargetName="Bd" Value="0,1,1,1"/>
                                </Trigger>
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="IsSelected" Value="true"/>
                                        <Condition Property="TabStripPlacement" Value="Top"/>
                                    </MultiTrigger.Conditions>
                                    <Setter Property="Margin" Value="-2,-2,-2,-1"/>
                                    <Setter Property="Margin" TargetName="Content" Value="0,0,0,1"/>
                                </MultiTrigger>
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="IsSelected" Value="true"/>
                                        <Condition Property="TabStripPlacement" Value="Bottom"/>
                                    </MultiTrigger.Conditions>
                                    <Setter Property="Margin" Value="-2,-1,-2,-2"/>
                                    <Setter Property="Margin" TargetName="Content" Value="0,1,0,0"/>
                                </MultiTrigger>
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="IsSelected" Value="true"/>
                                        <Condition Property="TabStripPlacement" Value="Left"/>
                                    </MultiTrigger.Conditions>
                                    <Setter Property="Margin" Value="-2,-2,-1,-2"/>
                                    <Setter Property="Margin" TargetName="Content" Value="0,0,1,0"/>
                                </MultiTrigger>
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="IsSelected" Value="true"/>
                                        <Condition Property="TabStripPlacement" Value="Right"/>
                                    </MultiTrigger.Conditions>
                                    <Setter Property="Margin" Value="-1,-2,-2,-2"/>
                                    <Setter Property="Margin" TargetName="Content" Value="1,0,0,0"/>
                                </MultiTrigger>
                                <Trigger Property="IsEnabled" Value="false">
                                    <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemDisabledBackground}"/>
                                    <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemDisabledBorderBrush}"/>
                                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Window.Resources>
    

    【讨论】:

    • 您是否使用 Blend 或 XAML 文件获得了样式(右键单击控件并单击编辑模板选项)?我问这个是因为作为这个问题的解决方案,我尝试通过从 XAML 获取模板来编辑模板,但是我从来没有得到 TabItem 模板的 Setter。
    • 我不完全理解你的问题。我通过混合获得了这些样式,方法是“编辑模板”->“编辑副本”,然后从 xaml 复制结果
    • 我通过 XAML 尝试了同样的方法,但我无法获取 TabItem 的样式。上下文菜单中的编辑模板已灰显/禁用。有什么想法吗?
    • 老实说,没有想法。当我在 Blend 中查看 xaml 代码时,单击 TabControl 定义或任何其他内容时,我什至没有包含复制、粘贴等选项的上下文菜单。
    猜你喜欢
    • 1970-01-01
    • 2022-01-21
    • 1970-01-01
    • 2015-10-10
    • 1970-01-01
    • 2022-10-25
    • 2014-01-21
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多