361 lines
23 KiB
XML
361 lines
23 KiB
XML
<ResourceDictionary
|
|
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
|
xmlns:assists="clr-namespace:Melskin.Assists"
|
|
xmlns:controls="clr-namespace:Melskin.Controls"
|
|
xmlns:decorations="clr-namespace:Melskin.Controls.Decorations">
|
|
<ResourceDictionary.MergedDictionaries>
|
|
<ResourceDictionary Source="/Melskin;component/Themes/Animations.xaml" />
|
|
</ResourceDictionary.MergedDictionaries>
|
|
|
|
<Style x:Key="EmbossAccordionItemStyle" TargetType="{x:Type controls:AccordionItem}">
|
|
<Setter Property="VerticalAlignment" Value="Top" />
|
|
<Setter Property="Background" Value="{DynamicResource ControlBackgroundNormalBrush}" />
|
|
<Setter Property="BorderBrush" Value="{DynamicResource BorderNormalBrush}" />
|
|
<Setter Property="Template">
|
|
<Setter.Value>
|
|
<ControlTemplate TargetType="{x:Type controls:AccordionItem}">
|
|
<Border
|
|
Padding="{TemplateBinding Padding}"
|
|
Background="{TemplateBinding Background}"
|
|
BorderBrush="{TemplateBinding BorderBrush}"
|
|
BorderThickness="{TemplateBinding BorderThickness}"
|
|
SnapsToDevicePixels="true">
|
|
<StackPanel>
|
|
<!--<ToggleButton Style="{DynamicResource ExpanderDownHeaderStyle}" />-->
|
|
<ToggleButton
|
|
x:Name="HeaderButton"
|
|
Padding="6"
|
|
Background="{TemplateBinding Background}"
|
|
Content="{TemplateBinding Header}"
|
|
ContentTemplate="{TemplateBinding HeaderTemplate}"
|
|
Cursor="Hand"
|
|
FontWeight="Bold"
|
|
IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
|
|
<ToggleButton.Template>
|
|
<ControlTemplate TargetType="ToggleButton">
|
|
<Border
|
|
Padding="{TemplateBinding Padding}"
|
|
Background="{TemplateBinding Background}"
|
|
BorderBrush="{TemplateBinding BorderBrush}"
|
|
BorderThickness="{TemplateBinding BorderThickness}">
|
|
<Grid>
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition Width="*" />
|
|
<ColumnDefinition Width="20" />
|
|
</Grid.ColumnDefinitions>
|
|
<ContentPresenter HorizontalAlignment="Left" VerticalAlignment="Center" />
|
|
<controls:IconElement
|
|
x:Name="arrow"
|
|
Grid.Column="1"
|
|
Padding="-6"
|
|
FontSize="24"
|
|
FontWeight="Regular"
|
|
Foreground="{DynamicResource TextPrimaryBrush}"
|
|
RenderTransformOrigin="0.5,0.5"
|
|
Symbol="KeyboardArrowDown">
|
|
<controls:IconElement.RenderTransform>
|
|
<RotateTransform Angle="0" />
|
|
</controls:IconElement.RenderTransform>
|
|
</controls:IconElement>
|
|
</Grid>
|
|
</Border>
|
|
<ControlTemplate.Triggers>
|
|
<!--<Trigger Property="IsChecked" Value="True">
|
|
<Setter TargetName="Arrow" Property="RenderTransform">
|
|
<Setter.Value>
|
|
<RotateTransform Angle="180" />
|
|
</Setter.Value>
|
|
</Setter>
|
|
</Trigger>-->
|
|
<Trigger Property="IsChecked" Value="true">
|
|
<Trigger.EnterActions>
|
|
<BeginStoryboard Storyboard="{StaticResource ExpandRotateStoryboard}" />
|
|
</Trigger.EnterActions>
|
|
<Trigger.ExitActions>
|
|
<BeginStoryboard Storyboard="{StaticResource CollapseRotateStoryboard}" />
|
|
</Trigger.ExitActions>
|
|
</Trigger>
|
|
</ControlTemplate.Triggers>
|
|
</ControlTemplate>
|
|
</ToggleButton.Template>
|
|
</ToggleButton>
|
|
<Rectangle
|
|
x:Name="Divider"
|
|
Height="1"
|
|
Margin="-4,0"
|
|
Fill="{DynamicResource BorderNormalBrush}" />
|
|
<Border
|
|
x:Name="ContentSiteWrapper"
|
|
ClipToBounds="True"
|
|
RenderTransformOrigin="0.5,0"
|
|
Visibility="Collapsed">
|
|
<Border.RenderTransform>
|
|
<ScaleTransform ScaleY="0" />
|
|
</Border.RenderTransform>
|
|
<ContentPresenter
|
|
x:Name="ContentSite"
|
|
Content="{TemplateBinding Content}"
|
|
ContentTemplate="{TemplateBinding ContentTemplate}"
|
|
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" />
|
|
</Border>
|
|
</StackPanel>
|
|
</Border>
|
|
<ControlTemplate.Triggers>
|
|
<Trigger Property="IsExpanded" Value="True">
|
|
<Trigger.EnterActions>
|
|
<BeginStoryboard>
|
|
<Storyboard>
|
|
<!-- 步骤1: 立即设为可见，以便布局系统分配空间 -->
|
|
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentSiteWrapper" Storyboard.TargetProperty="Visibility">
|
|
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
|
|
</ObjectAnimationUsingKeyFrames>
|
|
<!-- 步骤2: 播放展开动画 -->
|
|
<DoubleAnimation
|
|
Storyboard.TargetName="ContentSiteWrapper"
|
|
Storyboard.TargetProperty="RenderTransform.ScaleY"
|
|
From="0"
|
|
To="1"
|
|
Duration="0:0:0.3">
|
|
<DoubleAnimation.EasingFunction>
|
|
<CubicEase EasingMode="EaseOut" />
|
|
</DoubleAnimation.EasingFunction>
|
|
</DoubleAnimation>
|
|
</Storyboard>
|
|
</BeginStoryboard>
|
|
</Trigger.EnterActions>
|
|
<Trigger.ExitActions>
|
|
<BeginStoryboard>
|
|
<Storyboard>
|
|
<!-- 步骤1: 播放折叠动画 -->
|
|
<DoubleAnimation
|
|
Storyboard.TargetName="ContentSiteWrapper"
|
|
Storyboard.TargetProperty="RenderTransform.ScaleY"
|
|
From="1"
|
|
To="0"
|
|
Duration="0:0:0.3">
|
|
<DoubleAnimation.EasingFunction>
|
|
<CubicEase EasingMode="EaseIn" />
|
|
</DoubleAnimation.EasingFunction>
|
|
</DoubleAnimation>
|
|
<!-- 步骤2: 动画结束后，立即设为折叠，回收布局空间 -->
|
|
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentSiteWrapper" Storyboard.TargetProperty="Visibility">
|
|
<DiscreteObjectKeyFrame KeyTime="0:0:0.3" Value="{x:Static Visibility.Collapsed}" />
|
|
</ObjectAnimationUsingKeyFrames>
|
|
</Storyboard>
|
|
</BeginStoryboard>
|
|
</Trigger.ExitActions>
|
|
</Trigger>
|
|
</ControlTemplate.Triggers>
|
|
</ControlTemplate>
|
|
</Setter.Value>
|
|
</Setter>
|
|
</Style>
|
|
|
|
<Style x:Key="EmbossAccordionStyle" TargetType="{x:Type controls:Accordion}">
|
|
<Setter Property="ItemContainerStyle" Value="{StaticResource EmbossAccordionItemStyle}" />
|
|
<Setter Property="ItemsPanel">
|
|
<Setter.Value>
|
|
<ItemsPanelTemplate>
|
|
<StackPanel />
|
|
</ItemsPanelTemplate>
|
|
</Setter.Value>
|
|
</Setter>
|
|
<Setter Property="Template">
|
|
<Setter.Value>
|
|
<ControlTemplate TargetType="{x:Type controls:Accordion}">
|
|
<decorations:EmbossBorder
|
|
Background="{DynamicResource ControlBackgroundNormalBrush}"
|
|
BorderBrush="{DynamicResource BorderNormalBrush}"
|
|
BorderThickness="{TemplateBinding BorderThickness}"
|
|
SnapsToDevicePixels="true">
|
|
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
|
|
</decorations:EmbossBorder>
|
|
</ControlTemplate>
|
|
</Setter.Value>
|
|
</Setter>
|
|
</Style>
|
|
<Style x:Key="AccordionItemStyle" TargetType="{x:Type controls:AccordionItem}">
|
|
<Setter Property="VerticalAlignment" Value="Top" />
|
|
<Setter Property="Background" Value="{DynamicResource ControlBackgroundNormalBrush}" />
|
|
<Setter Property="BorderBrush" Value="{DynamicResource BorderNormalBrush}" />
|
|
<Setter Property="Template">
|
|
<Setter.Value>
|
|
<ControlTemplate TargetType="{x:Type controls:AccordionItem}">
|
|
<Border
|
|
Padding="{TemplateBinding Padding}"
|
|
Background="{TemplateBinding Background}"
|
|
BorderBrush="{TemplateBinding BorderBrush}"
|
|
BorderThickness="{TemplateBinding BorderThickness}"
|
|
SnapsToDevicePixels="true">
|
|
<StackPanel>
|
|
<ToggleButton
|
|
x:Name="HeaderButton"
|
|
Padding="6"
|
|
Background="{TemplateBinding Background}"
|
|
Content="{TemplateBinding Header}"
|
|
ContentTemplate="{TemplateBinding HeaderTemplate}"
|
|
Cursor="Hand"
|
|
FontWeight="Bold"
|
|
IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
|
|
<ToggleButton.Template>
|
|
<ControlTemplate TargetType="ToggleButton">
|
|
<Border
|
|
Padding="{TemplateBinding Padding}"
|
|
Background="{TemplateBinding Background}"
|
|
BorderBrush="{TemplateBinding BorderBrush}"
|
|
BorderThickness="{TemplateBinding BorderThickness}">
|
|
<Grid>
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition Width="*" />
|
|
<ColumnDefinition Width="20" />
|
|
</Grid.ColumnDefinitions>
|
|
<ContentPresenter HorizontalAlignment="Left" VerticalAlignment="Center" />
|
|
<controls:IconElement
|
|
x:Name="arrow"
|
|
Grid.Column="1"
|
|
Padding="-6"
|
|
FontSize="24"
|
|
FontWeight="Regular"
|
|
Foreground="{DynamicResource TextPrimaryBrush}"
|
|
RenderTransformOrigin="0.5,0.5"
|
|
Symbol="KeyboardArrowDown">
|
|
<controls:IconElement.RenderTransform>
|
|
<RotateTransform Angle="0" />
|
|
</controls:IconElement.RenderTransform>
|
|
</controls:IconElement>
|
|
</Grid>
|
|
</Border>
|
|
<ControlTemplate.Triggers>
|
|
<Trigger Property="IsChecked" Value="true">
|
|
<Trigger.EnterActions>
|
|
<BeginStoryboard Storyboard="{StaticResource ExpandRotateStoryboard}" />
|
|
</Trigger.EnterActions>
|
|
<Trigger.ExitActions>
|
|
<BeginStoryboard Storyboard="{StaticResource CollapseRotateStoryboard}" />
|
|
</Trigger.ExitActions>
|
|
</Trigger>
|
|
</ControlTemplate.Triggers>
|
|
</ControlTemplate>
|
|
</ToggleButton.Template>
|
|
</ToggleButton>
|
|
<Rectangle
|
|
x:Name="Divider"
|
|
Height="1"
|
|
Fill="{DynamicResource BorderNormalBrush}" />
|
|
<Border
|
|
x:Name="ContentSiteWrapper"
|
|
ClipToBounds="True"
|
|
RenderTransformOrigin="0.5,0"
|
|
Visibility="Collapsed">
|
|
<Border.RenderTransform>
|
|
<ScaleTransform ScaleY="0" />
|
|
</Border.RenderTransform>
|
|
<ContentPresenter
|
|
x:Name="ContentSite"
|
|
Content="{TemplateBinding Content}"
|
|
ContentTemplate="{TemplateBinding ContentTemplate}"
|
|
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" />
|
|
</Border>
|
|
</StackPanel>
|
|
</Border>
|
|
<ControlTemplate.Triggers>
|
|
<Trigger Property="IsExpanded" Value="True">
|
|
<Trigger.EnterActions>
|
|
<BeginStoryboard>
|
|
<Storyboard>
|
|
<!-- 步骤1: 立即设为可见，以便布局系统分配空间 -->
|
|
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentSiteWrapper" Storyboard.TargetProperty="Visibility">
|
|
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
|
|
</ObjectAnimationUsingKeyFrames>
|
|
<!-- 步骤2: 播放展开动画 -->
|
|
<DoubleAnimation
|
|
Storyboard.TargetName="ContentSiteWrapper"
|
|
Storyboard.TargetProperty="RenderTransform.ScaleY"
|
|
From="0"
|
|
To="1"
|
|
Duration="0:0:0.3">
|
|
<DoubleAnimation.EasingFunction>
|
|
<CubicEase EasingMode="EaseOut" />
|
|
</DoubleAnimation.EasingFunction>
|
|
</DoubleAnimation>
|
|
</Storyboard>
|
|
</BeginStoryboard>
|
|
</Trigger.EnterActions>
|
|
<Trigger.ExitActions>
|
|
<BeginStoryboard>
|
|
<Storyboard>
|
|
<!-- 步骤1: 播放折叠动画 -->
|
|
<DoubleAnimation
|
|
Storyboard.TargetName="ContentSiteWrapper"
|
|
Storyboard.TargetProperty="RenderTransform.ScaleY"
|
|
From="1"
|
|
To="0"
|
|
Duration="0:0:0.3">
|
|
<DoubleAnimation.EasingFunction>
|
|
<CubicEase EasingMode="EaseIn" />
|
|
</DoubleAnimation.EasingFunction>
|
|
</DoubleAnimation>
|
|
<!-- 步骤2: 动画结束后，立即设为折叠，回收布局空间 -->
|
|
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentSiteWrapper" Storyboard.TargetProperty="Visibility">
|
|
<DiscreteObjectKeyFrame KeyTime="0:0:0.3" Value="{x:Static Visibility.Collapsed}" />
|
|
</ObjectAnimationUsingKeyFrames>
|
|
</Storyboard>
|
|
</BeginStoryboard>
|
|
</Trigger.ExitActions>
|
|
</Trigger>
|
|
</ControlTemplate.Triggers>
|
|
</ControlTemplate>
|
|
</Setter.Value>
|
|
</Setter>
|
|
</Style>
|
|
<Style TargetType="{x:Type controls:Accordion}">
|
|
<Setter Property="BorderBrush" Value="{StaticResource BorderNormalBrush}" />
|
|
<Setter Property="BorderThickness" Value="1" />
|
|
<Setter Property="SnapsToDevicePixels" Value="True" />
|
|
<Setter Property="UseLayoutRounding" Value="True" />
|
|
<Setter Property="ItemContainerStyle" Value="{StaticResource AccordionItemStyle}" />
|
|
<Setter Property="ItemsPanel">
|
|
<Setter.Value>
|
|
<ItemsPanelTemplate>
|
|
<StackPanel />
|
|
</ItemsPanelTemplate>
|
|
</Setter.Value>
|
|
</Setter>
|
|
<Setter Property="Template">
|
|
<Setter.Value>
|
|
<ControlTemplate TargetType="{x:Type controls:Accordion}">
|
|
<Grid SnapsToDevicePixels="true">
|
|
|
|
<!-- 1. 内容层：使用 OpacityMask 进行内部裁剪 -->
|
|
<Border Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding assists:ControlAssist.CornerRadius}">
|
|
<Border.OpacityMask>
|
|
<VisualBrush>
|
|
<VisualBrush.Visual>
|
|
<!-- 定义遮罩形状：黑色代表可见区域，圆角与外部一致 -->
|
|
<Border
|
|
Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Border}}"
|
|
Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType=Border}}"
|
|
Background="Black"
|
|
CornerRadius="{Binding CornerRadius, RelativeSource={RelativeSource AncestorType=Border}}"
|
|
SnapsToDevicePixels="True" />
|
|
</VisualBrush.Visual>
|
|
</VisualBrush>
|
|
</Border.OpacityMask>
|
|
|
|
<!-- AccordionItem 列表在这里显示 -->
|
|
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
|
|
</Border>
|
|
|
|
<!-- 2. 边框层：覆盖在最上面，遮挡裁剪产生的锯齿，并显示边框颜色 -->
|
|
<Border
|
|
BorderBrush="{TemplateBinding BorderBrush}"
|
|
BorderThickness="{TemplateBinding BorderThickness}"
|
|
CornerRadius="{TemplateBinding assists:ControlAssist.CornerRadius}"
|
|
IsHitTestVisible="False" />
|
|
</Grid>
|
|
</ControlTemplate>
|
|
</Setter.Value>
|
|
</Setter>
|
|
</Style>
|
|
</ResourceDictionary> |