ShrlAlgoToolkit/WPFluent/Controls/CardExpander/CardExpander.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:controls="clr-namespace:WPFluent.Controls"
    xmlns:converters="clr-namespace:WPFluent.Converters"
    xmlns:system="clr-namespace:System;assembly=mscorlib"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <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 TargetType="{x:Type ToggleButton}" x:Key="DefaultUiCardExpanderToggleButtonStyle">
        <Grid Background="Transparent" Margin="{TemplateBinding Padding}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <ContentPresenter
                Content="{TemplateBinding Content}"
                Grid.Column="0"
                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                x:Name="ContentPresenter" />
            <Grid
                Background="Transparent"
                Grid.Column="1"
                Margin="0"
                RenderTransformOrigin="0.5, 0.5"
                VerticalAlignment="Center"
                x:Name="ChevronGrid">
                <Grid.RenderTransform>
                    <RotateTransform Angle="0" />
                </Grid.RenderTransform>
                <controls:SymbolIcon
                    FontSize="{StaticResource CardExpanderChevronSize}"
                    Foreground="{TemplateBinding Foreground}"
                    Symbol="ChevronDown24"
                    x:Name="ControlChevronIcon" />
            </Grid>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsChecked" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Duration="00:00:00.167"
                                Storyboard.TargetName="ChevronGrid"
                                Storyboard.TargetProperty="(Grid.RenderTransform).(RotateTransform.Angle)"
                                To="180" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Duration="00:00:00.167"
                                Storyboard.TargetName="ChevronGrid"
                                Storyboard.TargetProperty="(Grid.RenderTransform).(RotateTransform.Angle)"
                                To="0" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.ExitActions>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <Style TargetType="{x:Type controls:CardExpander}" x:Key="DefaultUiCardExpanderStyle">
        <!--  Universal WPF UI focus  -->
        <Setter Property="FocusVisualStyle" Value="{DynamicResource DefaultControlFocusVisualStyle}" />
        <!--  Universal WPF UI focus  -->
        <Setter Property="Background" Value="{DynamicResource CardBackgroundFillColorDefaultBrush}" />
        <Setter Property="Foreground" Value="{DynamicResource TextFillColorPrimaryBrush}" />
        <Setter Property="BorderBrush" Value="{DynamicResource CardStrokeColorDefaultBrush}" />
        <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
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="1"
                            CornerRadius="{TemplateBinding CornerRadius}"
                            Grid.Row="0"
                            x:Name="ToggleButtonBorder">
                            <ToggleButton
                                FontSize="{TemplateBinding FontSize}"
                                Foreground="{TemplateBinding Foreground}"
                                HorizontalAlignment="Stretch"
                                HorizontalContentAlignment="Stretch"
                                IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                IsEnabled="{TemplateBinding IsEnabled}"
                                Margin="0"
                                OverridesDefaultStyle="True"
                                Padding="{TemplateBinding Padding}"
                                Template="{StaticResource DefaultUiCardExpanderToggleButtonStyle}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                VerticalContentAlignment="Center"
                                x:Name="ExpanderToggleButton">
                                <ToggleButton.Content>
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>

                                        <ContentControl
                                            Content="{TemplateBinding Icon}"
                                            Focusable="False"
                                            FontSize="{StaticResource CardExpanderIconSize}"
                                            Foreground="{TemplateBinding Foreground}"
                                            Grid.Column="0"
                                            KeyboardNavigation.IsTabStop="False"
                                            Margin="{StaticResource CardExpanderIconMargin}"
                                            VerticalAlignment="Center"
                                            x:Name="ControlIcon" />

                                        <ContentPresenter
                                            Content="{TemplateBinding Header}"
                                            Grid.Column="1"
                                            TextElement.Foreground="{TemplateBinding Foreground}"
                                            x:Name="HeaderContentPresenter" />
                                    </Grid>
                                </ToggleButton.Content>
                            </ToggleButton>
                        </Border>

                        <!--  Collapsed content to expand  -->
                        <Grid ClipToBounds="True" Grid.Row="1">
                            <Border
                                Background="{DynamicResource CardBackgroundFillColorDefaultBrush}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="1,0,1,1"
                                CornerRadius="0,0,4,4"
                                Visibility="Collapsed"
                                x:Name="ContentPresenterBorder">
                                <ContentPresenter
                                    Content="{TemplateBinding Content}"
                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    Margin="{TemplateBinding ContentPadding}"
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                    x:Name="ContentPresenter" />
                                <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 Property="CornerRadius" TargetName="ToggleButtonBorder" 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 ControlFillColorDisabledBrush}" />
                            <Setter Property="BorderBrush" Value="{DynamicResource ControlStrokeColorDefaultBrush}" />
                            <Setter Property="TextElement.Foreground" TargetName="ContentPresenter" Value="{DynamicResource TextFillColorDisabledBrush}" />
                            <Setter Property="Foreground" TargetName="ExpanderToggleButton" Value="{DynamicResource TextFillColorDisabledBrush}" />
                        </Trigger>
                        <Trigger Property="Icon" Value="{x:Null}">
                            <Setter Property="Margin" TargetName="ControlIcon" Value="0" />
                            <Setter Property="Visibility" TargetName="ControlIcon" Value="Collapsed" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style BasedOn="{StaticResource DefaultUiCardExpanderStyle}" TargetType="{x:Type controls:CardExpander}" />

</ResourceDictionary>