功能更新
This commit is contained in:
GG Z
361
Melskin/Controls/Accordion.xaml
Normal file
361
Melskin/Controls/Accordion.xaml
Normal file
@@ -0,0 +1,361 @@
|
||||
<ResourceDictionary
|
||||
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
||||
xmlns:assists="clr-namespace:Melskin.Assists"
|
||||
xmlns:controls="clr-namespace:Melskin.Controls"
|
||||
xmlns:decorations="clr-namespace:Melskin.Controls.Decorations"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||||
<ResourceDictionary.MergedDictionaries>
|
||||
<ResourceDictionary Source="/Melskin;component/Themes/Animations.xaml" />
|
||||
</ResourceDictionary.MergedDictionaries>
|
||||
|
||||
<Style TargetType="{x:Type controls:AccordionItem}" x:Key="EmbossAccordionItemStyle">
|
||||
<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
|
||||
Background="{TemplateBinding Background}"
|
||||
BorderBrush="{TemplateBinding BorderBrush}"
|
||||
BorderThickness="{TemplateBinding BorderThickness}"
|
||||
Padding="{TemplateBinding Padding}"
|
||||
SnapsToDevicePixels="true">
|
||||
<StackPanel>
|
||||
<!--<ToggleButton Style="{DynamicResource ExpanderDownHeaderStyle}" />-->
|
||||
<ToggleButton
|
||||
Background="{TemplateBinding Background}"
|
||||
Content="{TemplateBinding Header}"
|
||||
ContentTemplate="{TemplateBinding HeaderTemplate}"
|
||||
Cursor="Hand"
|
||||
FontWeight="Bold"
|
||||
IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
|
||||
Padding="6"
|
||||
x:Name="HeaderButton">
|
||||
<ToggleButton.Template>
|
||||
<ControlTemplate TargetType="ToggleButton">
|
||||
<Border
|
||||
Background="{TemplateBinding Background}"
|
||||
BorderBrush="{TemplateBinding BorderBrush}"
|
||||
BorderThickness="{TemplateBinding BorderThickness}"
|
||||
Padding="{TemplateBinding Padding}">
|
||||
<Grid>
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="20" />
|
||||
</Grid.ColumnDefinitions>
|
||||
<ContentPresenter HorizontalAlignment="Left" VerticalAlignment="Center" />
|
||||
<controls:IconElement
|
||||
FontSize="24"
|
||||
FontWeight="Regular"
|
||||
Foreground="{DynamicResource TextPrimaryBrush}"
|
||||
Grid.Column="1"
|
||||
Padding="-6"
|
||||
RenderTransformOrigin="0.5,0.5"
|
||||
Symbol="KeyboardArrowDown"
|
||||
x:Name="arrow">
|
||||
<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
|
||||
Fill="{DynamicResource BorderNormalBrush}"
|
||||
Height="1"
|
||||
Margin="-4,0"
|
||||
x:Name="Divider" />
|
||||
<Border
|
||||
ClipToBounds="True"
|
||||
RenderTransformOrigin="0.5,0"
|
||||
Visibility="Collapsed"
|
||||
x:Name="ContentSiteWrapper">
|
||||
<Border.RenderTransform>
|
||||
<ScaleTransform ScaleY="0" />
|
||||
</Border.RenderTransform>
|
||||
<ContentPresenter
|
||||
Content="{TemplateBinding Content}"
|
||||
ContentTemplate="{TemplateBinding ContentTemplate}"
|
||||
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
|
||||
x:Name="ContentSite" />
|
||||
</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
|
||||
Duration="0:0:0.3"
|
||||
From="0"
|
||||
Storyboard.TargetName="ContentSiteWrapper"
|
||||
Storyboard.TargetProperty="RenderTransform.ScaleY"
|
||||
To="1">
|
||||
<DoubleAnimation.EasingFunction>
|
||||
<CubicEase EasingMode="EaseOut" />
|
||||
</DoubleAnimation.EasingFunction>
|
||||
</DoubleAnimation>
|
||||
</Storyboard>
|
||||
</BeginStoryboard>
|
||||
</Trigger.EnterActions>
|
||||
<Trigger.ExitActions>
|
||||
<BeginStoryboard>
|
||||
<Storyboard>
|
||||
<!-- 步骤1: 播放折叠动画 -->
|
||||
<DoubleAnimation
|
||||
Duration="0:0:0.3"
|
||||
From="1"
|
||||
Storyboard.TargetName="ContentSiteWrapper"
|
||||
Storyboard.TargetProperty="RenderTransform.ScaleY"
|
||||
To="0">
|
||||
<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}" x:Key="EmbossAccordionStyle">
|
||||
<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 TargetType="{x:Type controls:AccordionItem}" x:Key="AccordionItemStyle">
|
||||
<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
|
||||
Background="{TemplateBinding Background}"
|
||||
BorderBrush="{TemplateBinding BorderBrush}"
|
||||
BorderThickness="{TemplateBinding BorderThickness}"
|
||||
Padding="{TemplateBinding Padding}"
|
||||
SnapsToDevicePixels="true">
|
||||
<StackPanel>
|
||||
<ToggleButton
|
||||
Background="{TemplateBinding Background}"
|
||||
Content="{TemplateBinding Header}"
|
||||
ContentTemplate="{TemplateBinding HeaderTemplate}"
|
||||
Cursor="Hand"
|
||||
FontWeight="Bold"
|
||||
IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
|
||||
Padding="6"
|
||||
x:Name="HeaderButton">
|
||||
<ToggleButton.Template>
|
||||
<ControlTemplate TargetType="ToggleButton">
|
||||
<Border
|
||||
Background="{TemplateBinding Background}"
|
||||
BorderBrush="{TemplateBinding BorderBrush}"
|
||||
BorderThickness="{TemplateBinding BorderThickness}"
|
||||
Padding="{TemplateBinding Padding}">
|
||||
<Grid>
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="20" />
|
||||
</Grid.ColumnDefinitions>
|
||||
<ContentPresenter HorizontalAlignment="Left" VerticalAlignment="Center" />
|
||||
<controls:IconElement
|
||||
FontSize="24"
|
||||
FontWeight="Regular"
|
||||
Foreground="{DynamicResource TextPrimaryBrush}"
|
||||
Grid.Column="1"
|
||||
Padding="-6"
|
||||
RenderTransformOrigin="0.5,0.5"
|
||||
Symbol="KeyboardArrowDown"
|
||||
x:Name="arrow">
|
||||
<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
|
||||
Fill="{DynamicResource BorderNormalBrush}"
|
||||
Height="1"
|
||||
x:Name="Divider" />
|
||||
<Border
|
||||
ClipToBounds="True"
|
||||
RenderTransformOrigin="0.5,0"
|
||||
Visibility="Collapsed"
|
||||
x:Name="ContentSiteWrapper">
|
||||
<Border.RenderTransform>
|
||||
<ScaleTransform ScaleY="0" />
|
||||
</Border.RenderTransform>
|
||||
<ContentPresenter
|
||||
Content="{TemplateBinding Content}"
|
||||
ContentTemplate="{TemplateBinding ContentTemplate}"
|
||||
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
|
||||
x:Name="ContentSite" />
|
||||
</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
|
||||
Duration="0:0:0.3"
|
||||
From="0"
|
||||
Storyboard.TargetName="ContentSiteWrapper"
|
||||
Storyboard.TargetProperty="RenderTransform.ScaleY"
|
||||
To="1">
|
||||
<DoubleAnimation.EasingFunction>
|
||||
<CubicEase EasingMode="EaseOut" />
|
||||
</DoubleAnimation.EasingFunction>
|
||||
</DoubleAnimation>
|
||||
</Storyboard>
|
||||
</BeginStoryboard>
|
||||
</Trigger.EnterActions>
|
||||
<Trigger.ExitActions>
|
||||
<BeginStoryboard>
|
||||
<Storyboard>
|
||||
<!-- 步骤1: 播放折叠动画 -->
|
||||
<DoubleAnimation
|
||||
Duration="0:0:0.3"
|
||||
From="1"
|
||||
Storyboard.TargetName="ContentSiteWrapper"
|
||||
Storyboard.TargetProperty="RenderTransform.ScaleY"
|
||||
To="0">
|
||||
<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
|
||||
Background="Black"
|
||||
CornerRadius="{Binding CornerRadius, RelativeSource={RelativeSource AncestorType=Border}}"
|
||||
Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType=Border}}"
|
||||
SnapsToDevicePixels="True"
|
||||
Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Border}}" />
|
||||
</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>
|
||||
Reference in New Issue
Block a user