C00225155-02/C00225155/MegaRobo.C00225155/MegaRobo.C00225155App/res/TabControlStyle.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">


    <LinearGradientBrush x:Key="TabItemSelectedBgBrush" StartPoint="0,0" EndPoint="0,1">
        <GradientStop Color="#348EF6" Offset="0"/>
        <!-- 浅蓝 -->
        <GradientStop Color="#4AA2FF" Offset="1"/>
        <!-- 深蓝 -->
    </LinearGradientBrush>

    <!-- 悬浮态背景 -->
    <SolidColorBrush x:Key="TabItemHoverBgBrush" Color="#EFF6FF"/>

    <!-- 默认态背景 -->
    <SolidColorBrush x:Key="TabItemNormalBgBrush" Color="Transparent"/>

    <!-- 选中态文字色 -->
    <SolidColorBrush x:Key="TabItemSelectedForegroundBrush" Color="White"/>

    <!-- 悬浮态文字色 -->
    <SolidColorBrush x:Key="TabItemHoverForegroundBrush" Color="#348EF6"/>

    <!-- 默认态文字色 -->
    <SolidColorBrush x:Key="TabItemNormalForegroundBrush" Color="#666666"/>

    <!-- 下划线/边框色 -->
    <SolidColorBrush x:Key="TabItemUnderlineBrush" Color="#1A70B6"/>


    <!-- ====================== 2. TabItem 样式：自定义外观 + 状态反馈 ====================== -->
    <Style x:Key="FancyTabItemStyle" TargetType="TabItem">
        <Setter Property="BorderThickness" Value="0"/>
        <!-- TabItem 之间的间距 -->
        <Setter Property="Padding" Value="10,5"/>
        <!-- TabItem 内边距（控制文字与边框距离） -->
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Width" Value="120"/>
        <Setter Property="FontSize" Value="18"/>
        
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TabItem">
                    <Grid SnapsToDevicePixels="True">
                        <!-- 步骤1：TabItem 背景（带顶部圆角） -->
                        <!-- 仅顶部圆角，与内容区域的底部圆角呼应 -->
                        <Border 
                            x:Name="tabBackground"
                            CornerRadius="5,5,0,0"  
                            Background="{TemplateBinding Background}"
                            BorderThickness="0"
                            Margin="{TemplateBinding Margin}"/>

                        <!-- 步骤2：选中时的底部下划线（默认隐藏） -->
                        <Border 
                            x:Name="tabUnderline"
                            Height="3"
                            VerticalAlignment="Bottom"
                            Background="{StaticResource TabItemUnderlineBrush}"
                            Visibility="Collapsed"/>

                        <!-- 步骤3：Tab 标题的内容呈现器 -->
                        <ContentPresenter 
                            x:Name="tabHeader"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            Margin="{TemplateBinding Padding}"
                            ContentSource="Header"
                            Focusable="False"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Grid>

                    <!-- 触发器：处理不同状态的样式变化 -->
                    <ControlTemplate.Triggers>
                        <!-- 状态1：鼠标悬浮 -->
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="tabBackground" Property="Background" Value="{StaticResource TabItemHoverBgBrush}"/>
                            <Setter Property="Foreground" Value="{StaticResource TabItemHoverForegroundBrush}"/>
                        </Trigger>
                        <!-- 状态2：选中 -->
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="tabBackground" Property="Background" Value="{StaticResource TabItemSelectedBgBrush}"/>
                            <Setter Property="Foreground" Value="{StaticResource TabItemSelectedForegroundBrush}"/>
                            <Setter TargetName="tabUnderline" Property="Visibility" Value="Visible"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


    <Style x:Key="FancyTabItemStyle1" TargetType="TabItem">
        <Setter Property="BorderThickness" Value="0"/>
        <!-- TabItem 之间的间距 -->
        <Setter Property="Padding" Value="10,5"/>
        <!-- TabItem 内边距（控制文字与边框距离） -->
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Width" Value="120"/>
        <Setter Property="FontSize" Value="16"/>

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TabItem">
                    <Grid SnapsToDevicePixels="True">
                        <!-- 步骤1：TabItem 背景（带顶部圆角） -->
                        <!-- 仅顶部圆角，与内容区域的底部圆角呼应 -->
                        <Border 
                         x:Name="tabBackground"
                         CornerRadius="5"  
                         Background="{TemplateBinding Background}"
                         BorderThickness="0"
                         Margin="{TemplateBinding Margin}"/>

                        <!-- 步骤2：选中时的底部下划线（默认隐藏） --><!--
                        <Border 
                         x:Name="tabUnderline"
                         Height="3"
                         VerticalAlignment="Bottom"
                         Background="{StaticResource TabItemUnderlineBrush}"
                         Visibility="Collapsed"/>-->

                        <!-- 步骤3：Tab 标题的内容呈现器 -->
                        <ContentPresenter 
                         x:Name="tabHeader"
                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                         Margin="{TemplateBinding Padding}"
                         ContentSource="Header"
                         Focusable="False"
                         SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Grid>

                    <!-- 触发器：处理不同状态的样式变化 -->
                    <ControlTemplate.Triggers>
                        <!-- 状态1：鼠标悬浮 -->
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="tabBackground" Property="Background" Value="{StaticResource TabItemHoverBgBrush}"/>
                            <Setter Property="Foreground" Value="{StaticResource TabItemHoverForegroundBrush}"/>
                        </Trigger>
                        <!-- 状态2：选中 -->
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="tabBackground" Property="Background" Value="{StaticResource TabItemSelectedBgBrush}"/>
                            <Setter Property="Foreground" Value="{StaticResource TabItemSelectedForegroundBrush}"/>
                            <!--<Setter TargetName="tabUnderline" Property="Visibility" Value="Visible"/>-->
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


    <!-- ====================== 3. TabControl 样式：整体布局 + 背景分层 ====================== -->
    <Style x:Key="FancyTabControlStyle" TargetType="TabControl">
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TabControl">
                    <Grid SnapsToDevicePixels="True">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <!-- TabItem 行 -->
                            <RowDefinition Height="*"/>
                            <!-- 内容行 -->
                        </Grid.RowDefinitions>

                        <!-- 步骤1：承载所有 TabItem 的面板 -->
                        <TabPanel 
                            x:Name="HeaderPanel"
                            Grid.Row="0"
                            Panel.ZIndex="1"
                            Margin="0"
                            IsItemsHost="True"
                            Background="Transparent"
                            HorizontalAlignment="Left"/>

                        <!-- 步骤2：内容区域的边框（带底部圆角，与 TabItem 顶部圆角呼应） -->
                        <Border 
                            Grid.Row="1"
                            BorderThickness="1"
                            BorderBrush="#E0E0E0"
                            Background="{TemplateBinding Background}"
                            Margin="0"
                            CornerRadius="0,0,5,5"/>

                        <!-- 步骤3：内容呈现器 -->
                        <ContentPresenter 
                            Grid.Row="1"
                            Margin="1"
                            ContentSource="SelectedContent"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="FancyTabControlStyle2" TargetType="TabControl">
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TabControl">
                    <Grid SnapsToDevicePixels="True">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <!-- TabItem 行 -->
                            <RowDefinition Height="*"/>
                            <!-- 内容行 -->
                        </Grid.RowDefinitions>

                        <!-- 步骤1：承载所有 TabItem 的面板 -->
                        <TabPanel 
                        x:Name="HeaderPanel"
                        Grid.Row="0"
                        Panel.ZIndex="1"
                        Margin="0"
                        IsItemsHost="True"
                        Background="Transparent"
                        HorizontalAlignment="Left"/>

                        <!-- 步骤2：内容区域的边框（带底部圆角，与 TabItem 顶部圆角呼应） -->
                        <Border 
                        Grid.Row="1"
                        BorderThickness="1"
                        BorderBrush="#E0E0E0"
                        Background="{TemplateBinding Background}"
                        Margin="0"
                        CornerRadius="0,0,0,0"/>

                        <!-- 步骤3：内容呈现器 -->
                        <ContentPresenter 
                        Grid.Row="1"
                        Margin="1"
                        ContentSource="SelectedContent"
                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>