优化更新代码，添加界面功能并整合
This commit is contained in:
GG Z
253
WPFluent/Controls/CardExpander/CardExpander.xaml
Normal file
253
WPFluent/Controls/CardExpander/CardExpander.xaml
Normal file
@@ -0,0 +1,253 @@
|
||||
<!--
|
||||
This Source Code Form is subject to the terms of the MIT License.
|
||||
If a copy of the MIT was not distributed with this file, You can obtain one at https://opensource.org/licenses/MIT.
|
||||
Copyright (C) Leszek Pomianowski and WPF UI Contributors.
|
||||
All Rights Reserved.
|
||||
|
||||
Based on Microsoft XAML for Win UI
|
||||
Copyright (c) Microsoft Corporation. All Rights Reserved.
|
||||
-->
|
||||
|
||||
<ResourceDictionary
|
||||
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:controls="clr-namespace:WPFluent.Controls"
|
||||
xmlns:converters="clr-namespace:WPFluent.Converters"
|
||||
xmlns:system="clr-namespace:System;assembly=System.Runtime">
|
||||
|
||||
<Thickness x:Key="CardExpanderPadding">14,16,14,16</Thickness>
|
||||
<Thickness x:Key="CardExpanderBorderThemeThickness">1</Thickness>
|
||||
<Thickness x:Key="CardExpanderIconMargin">0,0,14,0</Thickness>
|
||||
<Thickness x:Key="CardExpanderContentMargin">14,0,0,0</Thickness>
|
||||
<Thickness x:Key="CardExpanderChevronMargin">4,0,0,0</Thickness>
|
||||
<system:Double x:Key="CardExpanderIconSize">24.0</system:Double>
|
||||
<system:Double x:Key="CardExpanderChevronSize">16.0</system:Double>
|
||||
|
||||
<ControlTemplate x:Key="DefaultUiCardExpanderToggleButtonStyle" TargetType="{x:Type ToggleButton}">
|
||||
<Grid Margin="{TemplateBinding Padding}" Background="Transparent">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="Auto" />
|
||||
</Grid.ColumnDefinitions>
|
||||
<ContentPresenter
|
||||
x:Name="ContentPresenter"
|
||||
Grid.Column="0"
|
||||
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
|
||||
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
|
||||
Content="{TemplateBinding Content}" />
|
||||
<Grid
|
||||
x:Name="ChevronGrid"
|
||||
Grid.Column="1"
|
||||
Margin="0"
|
||||
VerticalAlignment="Center"
|
||||
Background="Transparent"
|
||||
RenderTransformOrigin="0.5, 0.5">
|
||||
<Grid.RenderTransform>
|
||||
<RotateTransform Angle="0" />
|
||||
</Grid.RenderTransform>
|
||||
<controls:SymbolIcon
|
||||
x:Name="ControlChevronIcon"
|
||||
FontSize="{StaticResource CardExpanderChevronSize}"
|
||||
Foreground="{TemplateBinding Foreground}"
|
||||
Symbol="ChevronDown24" />
|
||||
</Grid>
|
||||
</Grid>
|
||||
<ControlTemplate.Triggers>
|
||||
<Trigger Property="IsChecked" Value="True">
|
||||
<Trigger.EnterActions>
|
||||
<BeginStoryboard>
|
||||
<Storyboard>
|
||||
<DoubleAnimation
|
||||
Storyboard.TargetName="ChevronGrid"
|
||||
Storyboard.TargetProperty="(Grid.RenderTransform).(RotateTransform.Angle)"
|
||||
To="180"
|
||||
Duration="00:00:00.167" />
|
||||
</Storyboard>
|
||||
</BeginStoryboard>
|
||||
</Trigger.EnterActions>
|
||||
<Trigger.ExitActions>
|
||||
<BeginStoryboard>
|
||||
<Storyboard>
|
||||
<DoubleAnimation
|
||||
Storyboard.TargetName="ChevronGrid"
|
||||
Storyboard.TargetProperty="(Grid.RenderTransform).(RotateTransform.Angle)"
|
||||
To="0"
|
||||
Duration="00:00:00.167" />
|
||||
</Storyboard>
|
||||
</BeginStoryboard>
|
||||
</Trigger.ExitActions>
|
||||
</Trigger>
|
||||
</ControlTemplate.Triggers>
|
||||
</ControlTemplate>
|
||||
|
||||
<Style x:Key="DefaultUiCardExpanderStyle" TargetType="{x:Type controls:CardExpander}">
|
||||
<!-- Universal WPF UI focus -->
|
||||
<Setter Property="FocusVisualStyle" Value="{DynamicResource DefaultControlFocusVisualStyle}" />
|
||||
<!-- Universal WPF UI focus -->
|
||||
<Setter Property="Background" Value="{DynamicResource CardBackground}" />
|
||||
<Setter Property="Foreground" Value="{DynamicResource CardForeground}" />
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource CardBorderBrush}" />
|
||||
<Setter Property="BorderThickness" Value="{StaticResource CardExpanderBorderThemeThickness}" />
|
||||
<Setter Property="Padding" Value="{StaticResource CardExpanderPadding}" />
|
||||
<Setter Property="ContentPadding" Value="{StaticResource CardExpanderPadding}" />
|
||||
<Setter Property="HorizontalAlignment" Value="Stretch" />
|
||||
<Setter Property="VerticalAlignment" Value="Center" />
|
||||
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
|
||||
<Setter Property="VerticalContentAlignment" Value="Center" />
|
||||
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
|
||||
<Setter Property="FontWeight" Value="Normal" />
|
||||
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
|
||||
<Setter Property="IsExpanded" Value="False" />
|
||||
<Setter Property="SnapsToDevicePixels" Value="True" />
|
||||
<Setter Property="OverridesDefaultStyle" Value="True" />
|
||||
<Setter Property="Template">
|
||||
<Setter.Value>
|
||||
<ControlTemplate TargetType="{x:Type controls:CardExpander}">
|
||||
<ControlTemplate.Resources>
|
||||
<converters:AnimationFactorToValueConverter x:Key="AnimationFactorToValueConverter" />
|
||||
</ControlTemplate.Resources>
|
||||
|
||||
<Grid>
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="Auto" />
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<!-- Top level controls always visible -->
|
||||
<Border
|
||||
x:Name="ToggleButtonBorder"
|
||||
Grid.Row="0"
|
||||
Background="{TemplateBinding Background}"
|
||||
BorderBrush="{TemplateBinding BorderBrush}"
|
||||
BorderThickness="1"
|
||||
CornerRadius="{TemplateBinding CornerRadius}">
|
||||
<ToggleButton
|
||||
x:Name="ExpanderToggleButton"
|
||||
Margin="0"
|
||||
Padding="{TemplateBinding Padding}"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
|
||||
HorizontalContentAlignment="Stretch"
|
||||
VerticalContentAlignment="Center"
|
||||
FontSize="{TemplateBinding FontSize}"
|
||||
Foreground="{TemplateBinding Foreground}"
|
||||
IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
|
||||
IsEnabled="{TemplateBinding IsEnabled}"
|
||||
OverridesDefaultStyle="True"
|
||||
Template="{StaticResource DefaultUiCardExpanderToggleButtonStyle}">
|
||||
<ToggleButton.Content>
|
||||
<Grid>
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="Auto" />
|
||||
<ColumnDefinition Width="*" />
|
||||
</Grid.ColumnDefinitions>
|
||||
|
||||
<ContentControl
|
||||
x:Name="ControlIcon"
|
||||
Grid.Column="0"
|
||||
Margin="{StaticResource CardExpanderIconMargin}"
|
||||
VerticalAlignment="Center"
|
||||
Content="{TemplateBinding Icon}"
|
||||
Focusable="False"
|
||||
FontSize="{StaticResource CardExpanderIconSize}"
|
||||
Foreground="{TemplateBinding Foreground}"
|
||||
KeyboardNavigation.IsTabStop="False" />
|
||||
|
||||
<ContentPresenter
|
||||
x:Name="HeaderContentPresenter"
|
||||
Grid.Column="1"
|
||||
Content="{TemplateBinding Header}"
|
||||
TextElement.Foreground="{TemplateBinding Foreground}" />
|
||||
</Grid>
|
||||
</ToggleButton.Content>
|
||||
</ToggleButton>
|
||||
</Border>
|
||||
|
||||
<!-- Collapsed content to expand -->
|
||||
<Grid Grid.Row="1" ClipToBounds="True">
|
||||
<Border
|
||||
x:Name="ContentPresenterBorder"
|
||||
Background="{DynamicResource CardBackground}"
|
||||
BorderBrush="{TemplateBinding BorderBrush}"
|
||||
BorderThickness="1,0,1,1"
|
||||
CornerRadius="0,0,4,4"
|
||||
Visibility="Collapsed">
|
||||
<ContentPresenter
|
||||
x:Name="ContentPresenter"
|
||||
Margin="{TemplateBinding ContentPadding}"
|
||||
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
|
||||
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
|
||||
Content="{TemplateBinding Content}" />
|
||||
<Border.Tag>
|
||||
<system:Double>0.0</system:Double>
|
||||
</Border.Tag>
|
||||
<Border.RenderTransform>
|
||||
<TranslateTransform>
|
||||
<TranslateTransform.Y>
|
||||
<MultiBinding Converter="{StaticResource AnimationFactorToValueConverter}" ConverterParameter="negative">
|
||||
<Binding ElementName="ContentPresenterBorder" Path="ActualHeight" />
|
||||
<Binding ElementName="ContentPresenterBorder" Path="Tag" />
|
||||
</MultiBinding>
|
||||
</TranslateTransform.Y>
|
||||
</TranslateTransform>
|
||||
</Border.RenderTransform>
|
||||
</Border>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<ControlTemplate.Triggers>
|
||||
<Trigger Property="IsExpanded" Value="True">
|
||||
<!-- TODO: Update -->
|
||||
<Setter TargetName="ToggleButtonBorder" Property="CornerRadius" Value="4,4,0,0" />
|
||||
<Trigger.EnterActions>
|
||||
<BeginStoryboard>
|
||||
<Storyboard>
|
||||
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenterBorder" Storyboard.TargetProperty="(Border.Visibility)">
|
||||
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
|
||||
</ObjectAnimationUsingKeyFrames>
|
||||
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenterBorder" Storyboard.TargetProperty="Tag">
|
||||
<DiscreteDoubleKeyFrame KeyTime="0" Value="1.0" />
|
||||
<SplineDoubleKeyFrame
|
||||
KeySpline="0.0, 0.0, 0.0, 1.0"
|
||||
KeyTime="0:0:0.333"
|
||||
Value="0.0" />
|
||||
</DoubleAnimationUsingKeyFrames>
|
||||
</Storyboard>
|
||||
</BeginStoryboard>
|
||||
</Trigger.EnterActions>
|
||||
<Trigger.ExitActions>
|
||||
<BeginStoryboard>
|
||||
<Storyboard>
|
||||
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenterBorder" Storyboard.TargetProperty="(Border.Visibility)">
|
||||
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
|
||||
<DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{x:Static Visibility.Collapsed}" />
|
||||
</ObjectAnimationUsingKeyFrames>
|
||||
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenterBorder" Storyboard.TargetProperty="Tag">
|
||||
<DiscreteDoubleKeyFrame KeyTime="0" Value="0.0" />
|
||||
<SplineDoubleKeyFrame
|
||||
KeySpline="1.0, 1.0, 0.0, 1.0"
|
||||
KeyTime="0:0:0.167"
|
||||
Value="1.0" />
|
||||
</DoubleAnimationUsingKeyFrames>
|
||||
</Storyboard>
|
||||
</BeginStoryboard>
|
||||
</Trigger.ExitActions>
|
||||
</Trigger>
|
||||
<Trigger Property="IsEnabled" Value="False">
|
||||
<Setter Property="Background" Value="{DynamicResource CardBackgroundDisabled}" />
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource CardBorderBrushDisabled}" />
|
||||
<Setter TargetName="ContentPresenter" Property="TextElement.Foreground" Value="{DynamicResource CardForegroundDisabled}" />
|
||||
<Setter TargetName="ExpanderToggleButton" Property="Foreground" Value="{DynamicResource CardForegroundDisabled}" />
|
||||
</Trigger>
|
||||
<Trigger Property="Icon" Value="{x:Null}">
|
||||
<Setter TargetName="ControlIcon" Property="Margin" Value="0" />
|
||||
<Setter TargetName="ControlIcon" Property="Visibility" Value="Collapsed" />
|
||||
</Trigger>
|
||||
</ControlTemplate.Triggers>
|
||||
</ControlTemplate>
|
||||
</Setter.Value>
|
||||
</Setter>
|
||||
</Style>
|
||||
|
||||
<Style BasedOn="{StaticResource DefaultUiCardExpanderStyle}" TargetType="{x:Type controls:CardExpander}" />
|
||||
|
||||
</ResourceDictionary>
|
||||
Reference in New Issue
Block a user