WPF 控件 (十四、选项卡)

最新推荐文章于 2024-05-22 10:30:00 发布

LyRics1996

最新推荐文章于 2024-05-22 10:30:00 发布

阅读量295

点赞数 1

文章标签： wpf ui c#

本文链接：https://blog.csdn.net/lyrics1996/article/details/130162648

版权

WPF自定义样式控件专栏收录该内容

20 篇文章 1 订阅

订阅专栏

这段代码展示了如何使用XAML来定义和应用不同状态下的TabItem样式，包括静态、鼠标悬停、选中和禁用时的背景和边框颜色。同时，给出了一个自定义TabItem模板，改变其外观，例如添加内边框和角radius，以及调整选中时的ZIndex和透明度。

摘要由CSDN通过智能技术生成

一、Style

  <Style x:Key="FocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Margin="2" StrokeDashArray="1 2" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" SnapsToDevicePixels="true" StrokeThickness="1"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <LinearGradientBrush x:Key="TabItem.Static.Background" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#F0F0F0" Offset="0.0"/>
        <GradientStop Color="#E5E5E5" Offset="1.0"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="TabItem.Static.Border" Color="#ACACAC"/>
    <LinearGradientBrush x:Key="TabItem.MouseOver.Background" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#ECF4FC" Offset="0.0"/>
        <GradientStop Color="#DCECFC" Offset="1.0"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="TabItem.MouseOver.Border" Color="#7EB4EA"/>
    <SolidColorBrush x:Key="TabItem.Selected.Background" Color="#FFFFFF"/>
    <SolidColorBrush x:Key="TabItem.Selected.Border" Color="#ACACAC"/>
    <SolidColorBrush x:Key="TabItem.Disabled.Background" Color="#F0F0F0"/>
    <SolidColorBrush x:Key="TabItem.Disabled.Border" Color="#D9D9D9"/>
    <Style x:Key="TabItemStyle1" TargetType="{x:Type TabItem}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="Background" Value="{StaticResource TabItem.Static.Background}"/>
        <Setter Property="BorderBrush" Value="{StaticResource TabItem.Static.Border}"/>
        <Setter Property="Margin" Value="0"/>
        <Setter Property="Padding" Value="6,2,6,2"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid x:Name="templateRoot" SnapsToDevicePixels="true">
                        <Border x:Name="mainBorder" Background="Transparent" Margin="2,0">
                            <Border x:Name="innerBorder" Background="CornflowerBlue" BorderBrush="White" CornerRadius="5,5,0,0" BorderThickness="0" Margin="0" Opacity="1"/>
                        </Border>
                        <ContentPresenter x:Name="contentPresenter" ContentSource="Header" Focusable="False" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter Property="Panel.ZIndex" Value="1"/>
                            <Setter Property="Margin" Value="-2,-2,-2,0"/>
                            <Setter Property="Opacity" TargetName="innerBorder" Value="1"/>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="0,0,0,1"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

二、Demo

<WrapPanel>
            <StackPanel Margin="10" Width="300" Height="250">
                <TextBlock Text="默认:"/>
                <TabControl Height="200">
                    <TabItem Header="页面1">
                        <Image Source="../bird1.png"/>
                    </TabItem>
                    <TabItem Header="页面2">
                        <TextBlock Text="page2"/>
                    </TabItem>
                    <TabItem Header="页面3">
                        <Border Background="Yellow"/>
                    </TabItem>
                </TabControl>
            </StackPanel>
            <StackPanel Margin="10" Width="300" Height="250">
                <TextBlock Text="tab在下:"/>
                <TabControl Height="200" TabStripPlacement="Bottom">
                    <TabItem Header="页面1">
                        <Image Source="../bird1.png"/>
                    </TabItem>
                    <TabItem Header="页面2">
                        <TextBlock Text="page2"/>
                    </TabItem>
                    <TabItem Header="页面3">
                        <Border Background="Yellow"/>
                    </TabItem>
                </TabControl>
            </StackPanel>
            <StackPanel Margin="10" Width="300" Height="250">
                <TextBlock Text="tab在左:"/>
                <TabControl Height="200" TabStripPlacement="Left">
                    <TabItem Header="页面1">
                        <Image Source="../bird1.png"/>
                    </TabItem>
                    <TabItem Header="页面2">
                        <TextBlock Text="page2"/>
                    </TabItem>
                    <TabItem Header="页面3">
                        <Border Background="Yellow"/>
                    </TabItem>
                </TabControl>
            </StackPanel>
            <StackPanel Margin="10" Width="300" Height="250">
                <TextBlock Text="修改Tab:"/>
                <TabControl Height="200">
                    <TabControl.Resources>
                        <Style TargetType="{x:Type TabPanel}">
                            <Setter Property="HorizontalAlignment" Value="Center" />
                        </Style>
                    </TabControl.Resources>
                    <TabItem Style="{DynamicResource TabItemStyle1}" Header="页面1" >
                        <Image Source="../bird1.png"/>
                    </TabItem>
                    <TabItem Style="{DynamicResource TabItemStyle1}" Header="页面2">
                        <TextBlock Text="page2"/>
                    </TabItem>
                    <TabItem Style="{DynamicResource TabItemStyle1}" Header="页面3">
                        <Border Background="Yellow"/>
                    </TabItem>
                </TabControl>
            </StackPanel>
        </WrapPanel>