<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>