You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
210 lines
12 KiB
210 lines
12 KiB
<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>
|
|
|