<Border x:Class="SparkClient.Views.Configuration.SettingPageBase"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:hc="https://handyorg.github.io/handycontrol"
xmlns:local="clr-namespace:SparkClient.Views.Configuration"
mc:Ignorable="d" CornerRadius="15"
Background="#ffffff"
d:DesignHeight="300" d:DesignWidth="500">
<Border.Resources>
<!-- 渐变背景色，用于选项卡的不同状态 -->
<LinearGradientBrush x:Key="PrimaryBlueColor" StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#40b1ff" Offset="0"/>
<GradientStop Color="#3c9ce6" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="PrimaryButtonColor" StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#38c8bf" Offset="0"/>
<GradientStop Color="#1fb5ac" Offset="1"/>
</LinearGradientBrush>
<!-- PrimaryBlueColor省略，因为这里用TabItemSelectedBrush替代，或可自行定义 -->
<!-- TabItem样式 -->
<Style x:Key="TabItemStyle" TargetType="TabItem">
<Setter Property="Background" >
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#babfd2" Offset="0"/>
<GradientStop Color="#babfd2" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#ffffff"/>
<Setter Property="FontSize" Value="16" />
<Setter Property="Height" Value="40" />
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Margin" Value="0 0 5 0"/>
<Setter Property="Width" Value="100"/>
<Setter Property="Padding" Value="10 10"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Grid SnapsToDevicePixels="True">
<Border x:Name="TabItemBorder"
CornerRadius="20"
Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
Margin="{TemplateBinding Margin}" />
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
SnapsToDevicePixels="True"
RecognizesAccessKey="True"
Margin="{TemplateBinding Padding}"
ContentSource="Header"
Focusable="True"/>
</Grid>
<ControlTemplate.Triggers>
<!-- 鼠标移入时，背景颜色渐变 -->
<Trigger Property="IsMouseOver" Value="True">
</Trigger>
<!-- 选中时背景渐变到选中色 -->
<Trigger Property="IsSelected" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="TabItemBorder"
Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"
To="#40b1ff" Duration="0:0:0.3"/>
<ColorAnimation
Storyboard.TargetName="TabItemBorder"
Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"
To="#3c9ce6" Duration="0:0:0.3"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="TabItemBorder"
Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"
To="#babfd2" Duration="0:0:0.3"/>
<ColorAnimation
Storyboard.TargetName="TabItemBorder"
Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"
To="#babfd2" Duration="0:0:0.3"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<!-- 未选中状态恢复默认背景 -->
<Trigger Property="IsSelected" Value="False">
<Setter Property="Background" >
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#babfd2" Offset="0"/>
<GradientStop Color="#babfd2" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- TabControl样式 -->
<Style x:Key="TabControlStyle" TargetType="TabControl">
<Setter Property="Background" Value="#ffffff"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="10"/>
<Setter Property="Margin" Value="10"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabControl">
<Grid SnapsToDevicePixels="True">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<!--TabPanel-->
<TabPanel Grid.Row="0"
Background="Transparent"
IsItemsHost="True"/>
<!-- 保存按钮在右侧 -->
<Button x:Name="SaveButton" Grid.Column="1" Padding="0" Margin="0" Height="40"
BorderThickness="0" Background="Transparent" FocusVisualStyle="{x:Null}" Command="{Binding SaveCommand}">
<Border
HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="0,0,0,0"
Padding="10, 10"
Width="100"
BorderThickness="0"
Background="{StaticResource PrimaryButtonColor}"
CornerRadius="20">
<TextBlock FontSize="16" Text="{StaticResource SystemSettingSave}" TextAlignment="Center" Foreground="#ffffff"></TextBlock>
</Border>
</Button>
</Grid>
<!-- 内容区域，添加淡入淡出动画 -->
<Border x:Name="ContentBorder"
Grid.Row="1"
CornerRadius="5"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}">
<ContentPresenter x:Name="PART_SelectedContentHost"
ContentSource="SelectedContent"
SnapsToDevicePixels="True"
Margin="{TemplateBinding Padding}"
Opacity="0"/>
</Border>
</Grid>
<!-- 当选项卡内容切换时触发动画 -->
<ControlTemplate.Triggers>
<!-- 使用EventTrigger监听TabControl的SelectionChanged事件 -->
<EventTrigger RoutedEvent="TabControl.SelectionChanged">
<BeginStoryboard>
<Storyboard>
<!-- 先瞬间变为透明，再渐入 -->
<!-- <DoubleAnimation Storyboard.TargetName="PART_SelectedContentHost" -->
<!-- Storyboard.TargetProperty="Opacity" -->
<!-- To="0" Duration="0:0:0"/> -->
<DoubleAnimation Storyboard.TargetName="PART_SelectedContentHost"
Storyboard.TargetProperty="Opacity"
To="1" Duration="0:0:0.5" BeginTime="0:0:0.1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Border.Resources>
<Grid>
<TabControl Style="{StaticResource TabControlStyle}" >
<TabItem Header="{StaticResource SystemSettingCustomSet}" Style="{DynamicResource TabItemStyle}">
<ContentControl ClipToBounds="True" Content="{Binding CustomSetContent}"/>
</TabItem>
<TabItem Header="{StaticResource SystemSettingModelSet}" Style="{DynamicResource TabItemStyle}">
<ContentControl ClipToBounds="True" Content="{Binding ModelColorSetContent}"/>
</TabItem>
</TabControl>
</Grid>
</Border>