<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:noesis="clr-namespace:NoesisGUIExtensions;assembly=Noesis.GUI.Extensions"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    xmlns:system="clr-namespace:System;assembly=mscorlib">

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="../Theme/NoesisTheme.Styles.xaml"/>
    </ResourceDictionary.MergedDictionaries>

    <!-- EXPANDER TEMPLATE -->
    <!--////////////////////////////////////////////////////////////////////-->
    <ControlTemplate x:Key="Template.Expander" TargetType="Expander">
        <ControlTemplate.Resources>

            <!-- The Loaded storyboards set the view of the Expander control when it is initially loaded -->
            <Storyboard x:Key="Anim.Loaded">
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Tag" Storyboard.TargetName="Root">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>

            <Storyboard x:Key="Anim.Expand.Vertical.Loaded">
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                </ObjectAnimationUsingKeyFrames>

                <DoubleAnimation Storyboard.TargetName="ContentBg" Storyboard.TargetProperty="RenderTransform.ScaleX" To="1" Duration="0"/>

                <DoubleAnimation Storyboard.TargetName="ContentBg" Storyboard.TargetProperty="RenderTransform.ScaleY" To="1" Duration="0"/>
            </Storyboard>

            <Storyboard x:Key="Anim.Expand.Vertical.Up.Loaded">
                <DoubleAnimation Storyboard.TargetName="Arrow" Storyboard.TargetProperty="RenderTransform.Angle" To="-90" Duration="0"/>
                <StaticResource ResourceKey="Anim.Expand.Vertical.Loaded"/>
            </Storyboard>

            <Storyboard x:Key="Anim.Expand.Vertical.Down.Loaded">
                <DoubleAnimation Storyboard.TargetName="Arrow" Storyboard.TargetProperty="RenderTransform.Angle" To="0" Duration="0"/>
                <StaticResource ResourceKey="Anim.Expand.Vertical.Loaded"/>
            </Storyboard>

            <Storyboard x:Key="Anim.Expand.Horizontal.Loaded">
                <DoubleAnimation Storyboard.TargetName="Arrow" Storyboard.TargetProperty="RenderTransform.Angle" To="90" Duration="0"/>

                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                </ObjectAnimationUsingKeyFrames>

                <DoubleAnimation Storyboard.TargetName="ContentBg" Storyboard.TargetProperty="RenderTransform.ScaleX" To="1" Duration="0">
                    <DoubleAnimation.EasingFunction>
                    <BackEase EasingMode="EaseOut" Amplitude="0.2"/>
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>

                <DoubleAnimation Storyboard.TargetName="ContentBg" Storyboard.TargetProperty="RenderTransform.ScaleY" To="1" Duration="0"/>
            </Storyboard>

            <!-- The Expand storyboards control the behavior of the Expand control when it expands and we reveal its content -->
            <!-- The Collapse storyboards control the behavior of the Expand control when it collapses and we hide its content -->

            <!-- The Expander control supports 4 directions of expanding - Down, Up, Left, Right; -->
            <!-- Each of these have separate storyboards targeting them. They are defined with the following x:Key suffixes - Vertical, Vertical.Up, Vertical.Down and Horizontal -->

            <!-- The animations targeting the ContentBg object define how we animate and render the container in which we render the content -->
            <!-- The animations targeting the Arrow object define how we animate and rotate the arrow -->
            <Storyboard x:Key="Anim.Expand.Vertical">
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                </ObjectAnimationUsingKeyFrames>

                <DoubleAnimation Storyboard.TargetName="ContentBg" Storyboard.TargetProperty="RenderTransform.ScaleX" To="1" Duration="0"/>

                <DoubleAnimation Storyboard.TargetName="ContentBg" Storyboard.TargetProperty="RenderTransform.ScaleY" To="1" Duration="0:0:0.2">
                    <DoubleAnimation.EasingFunction>
                    <BackEase EasingMode="EaseOut" Amplitude="0.2"/>
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>
            </Storyboard>

            <Storyboard x:Key="Anim.Expand.Vertical.Up">
                <DoubleAnimation Storyboard.TargetName="Arrow" Storyboard.TargetProperty="RenderTransform.Angle" To="-90" Duration="0:0:0.15"/>
                <StaticResource ResourceKey="Anim.Expand.Vertical"/>
            </Storyboard>

            <Storyboard x:Key="Anim.Expand.Vertical.Down">
                <DoubleAnimation Storyboard.TargetName="Arrow" Storyboard.TargetProperty="RenderTransform.Angle" To="180" Duration="0:0:0.15"/>
                <StaticResource ResourceKey="Anim.Expand.Vertical"/>
            </Storyboard>

            <Storyboard x:Key="Anim.Collapse.Vertical">
                <DoubleAnimation Storyboard.TargetName="Arrow" Storyboard.TargetProperty="RenderTransform.Angle" To="0" Duration="0:0:0.2"/>

                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{x:Static Visibility.Collapsed}"/>
                </ObjectAnimationUsingKeyFrames>

                <DoubleAnimation Storyboard.TargetName="ContentBg" Storyboard.TargetProperty="RenderTransform.ScaleY" To="0" Duration="0:0:0.2" AccelerationRatio="0.5"/>
            </Storyboard>

            <Storyboard x:Key="Anim.Expand.Horizontal">
                <DoubleAnimation Storyboard.TargetName="Arrow" Storyboard.TargetProperty="RenderTransform.Angle" To="90" Duration="0:0:0.15"/>

                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                </ObjectAnimationUsingKeyFrames>

                <DoubleAnimation Storyboard.TargetName="ContentBg" Storyboard.TargetProperty="RenderTransform.ScaleX" To="1" Duration="0:0:0.2">
                    <DoubleAnimation.EasingFunction>
                    <BackEase EasingMode="EaseOut" Amplitude="0.2"/>
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>

                <DoubleAnimation Storyboard.TargetName="ContentBg" Storyboard.TargetProperty="RenderTransform.ScaleY" To="1" Duration="0"/>
            </Storyboard>

            <Storyboard x:Key="Anim.Collapse.Horizontal">
                <DoubleAnimation Storyboard.TargetName="Arrow" Storyboard.TargetProperty="RenderTransform.Angle" To="0" Duration="0:0:0.2"/>

                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{x:Static Visibility.Collapsed}"/>
                </ObjectAnimationUsingKeyFrames>

                <DoubleAnimation Storyboard.TargetName="ContentBg" Storyboard.TargetProperty="RenderTransform.ScaleX" To="0" Duration="0:0:0.2" AccelerationRatio="0.5"/>
            </Storyboard>
        </ControlTemplate.Resources>

        <!-- This is the parent Grid that holds all of the elements of the Expander control -->
        <Grid x:Name="Root" Tag="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <!-- The ExpanderButton defines the interactive header which players can press to expand/collapse the Expander -->
            <ToggleButton
                x:Name="ExpanderButton"
                Style="{StaticResource Style.Expander.Toggle}"
                IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                Foreground="{DynamicResource Color.Text}">

                <!-- The ExpanderHeader.Layout defines the layout of the header -->
                <Grid x:Name="ExpanderHeader.Layout">

                    <!-- The ExpanderHeaver.Hover displays an external border around the header on MouseOver -->
                    <Border
                        x:Name="ExpanderHeader.Hover"
                        BorderBrush="{DynamicResource Color.BorderExpanderHover}"
                        BorderThickness="2"
                        Border.Effect="{DynamicResource Glow.ExpanderHover}"
                        Opacity="0">
                    </Border>

                    <!-- The ExpanderHeader.Wrapper adds a padding on all sides which we need to create space to render the ExpanderHeader.Hover border -->
                    <Border
                        x:Name="ExpanderHeader.Wrapper"
                        Padding="2">

                        <!-- The ExpanderHeader.Base defines the container in which we render the background of the header -->
                        <Border
                            x:Name="ExpanderHeader.Base"
                            Height="44"
                            Background="{DynamicResource Color.BackgroundExpander}"
                            Padding="2,0,0,0">

                            <!-- This border renders a semi-transparent rune pattern over the background -->
                            <Border Background="{DynamicResource RunePattern10L}">

                                <!-- The ExpanderHeader.Content defines the area in which we render the header's content -->
                                <Grid
                                    x:Name="ExpanderHeader.Content"
                                    Background="{DynamicResource Decor02.30}">

                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>

                                    <!-- The ContentPresenter renders content inside of the header -->
                                    <!-- The content is bound to Header property of the Expander control -->
                                    <ContentPresenter
                                        x:Name="HeaderHost"
                                        Grid.Column="0"
                                        ContentSource="Header"
                                        VerticalAlignment="Center"
                                        Margin="16,0,0,0"
                                        TextElement.FontSize="{DynamicResource Font.Size.Tabs}"/>

                                    <!-- The Arrow renders an arrow texture which communicates whether the Expander is expanded or collapsed -->
                                    <Image
                                        x:Name="Arrow"
                                        Source="../Textures/Controls/Arrow.png"
                                        Width="16"
                                        Height="16"
                                        VerticalAlignment="Center"
                                        Grid.Column="1"
                                        Margin="0,0,16,0"
                                        RenderTransformOrigin="0.5,0.5">

                                        <Image.RenderTransform>
                                            <RotateTransform Angle="0"/>
                                        </Image.RenderTransform>
                                    </Image>
                                </Grid>
                            </Border>
                        </Border>
                    </Border>
                </Grid>
            </ToggleButton>

            <!-- The ContentBorder controls the visibility of the Expander's content -->
            <Decorator
                x:Name="ContentBorder"
                Grid.Row="1"
                Grid.Column="1"
                Visibility="Collapsed">

                <!-- The ContentBg defines the background and border of the container in which we render the Expander's content -->
                <!-- All of its properties are bounded to the template, so they can be set when the control is used -->
                <Border
                    x:Name="ContentBg"
                    Background="Transparent"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Padding="{TemplateBinding Padding}">

                    <Border.RenderTransform>
                        <ScaleTransform ScaleX="0" ScaleY="0"/>
                    </Border.RenderTransform>

                    <!-- The ContentPresenter renders the content placed in the Expander -->
                    <ContentPresenter
                        x:Name="ContentHost"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
            </Decorator>
        </Grid>

        <!-- These triggers define the states of the Expander's Header and which storyboards we trigger based on what the ExpandedDirection is -->
        <ControlTemplate.Triggers>
            <EventTrigger RoutedEvent="FrameworkElement.Loaded" SourceName="Root">
                <BeginStoryboard Storyboard="{StaticResource Anim.Loaded}"/>
            </EventTrigger>

            <Trigger Property="IsMouseOver" Value="True" SourceName="ExpanderButton">
                <Setter Property="Opacity" Value="1" TargetName="ExpanderHeader.Hover"/>
            </Trigger>

            <Trigger Property="IsPressed" Value="True" SourceName="ExpanderButton">
                <Setter Property="Opacity" Value="1" TargetName="ExpanderHeader.Hover"/>
            </Trigger>

            <Trigger Property="IsExpanded" Value="True">
                <Setter Property="Background" Value="{DynamicResource Color.BackgroundExpanderSelected}" TargetName="ExpanderHeader.Base"/>
            </Trigger>

            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsExpanded" Value="True"/>
                    <Condition Property="IsMouseOver" Value="True" SourceName="ExpanderButton"/>
                </MultiTrigger.Conditions>

                <Setter Property="Opacity" Value="1" TargetName="ExpanderHeader.Hover"/>
            </MultiTrigger>

            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsExpanded" Value="True"/>
                    <Condition Property="IsPressed" Value="True" SourceName="ExpanderButton"/>
                </MultiTrigger.Conditions>

                <Setter Property="Opacity" Value="1" TargetName="ExpanderHeader.Hover"/>
            </MultiTrigger>

            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding Tag, ElementName=Root}" Value="0"/>
                    <Condition Binding="{Binding IsExpanded, RelativeSource={RelativeSource Self}}" Value="True"/>
                    <Condition Binding="{Binding ExpandDirection, RelativeSource={RelativeSource Self}}" Value="Up"/>
                </MultiDataTrigger.Conditions>

                <MultiDataTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource Anim.Expand.Vertical.Up.Loaded}"/>
                </MultiDataTrigger.EnterActions>
            </MultiDataTrigger>

            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding Tag, ElementName=Root}" Value="0"/>
                    <Condition Binding="{Binding IsExpanded, RelativeSource={RelativeSource Self}}" Value="True"/>
                    <Condition Binding="{Binding ExpandDirection, RelativeSource={RelativeSource Self}}" Value="Down"/>
                </MultiDataTrigger.Conditions>

                <MultiDataTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource Anim.Expand.Vertical.Down.Loaded}"/>
                </MultiDataTrigger.EnterActions>
            </MultiDataTrigger>

            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding Tag, ElementName=Root}" Value="0"/>
                    <Condition Binding="{Binding IsExpanded, RelativeSource={RelativeSource Self}}" Value="True"/>
                    <Condition Binding="{Binding ExpandDirection, RelativeSource={RelativeSource Self}}" Value="Left"/>
                </MultiDataTrigger.Conditions>

                <MultiDataTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource Anim.Expand.Horizontal.Loaded}"/>
                </MultiDataTrigger.EnterActions>
            </MultiDataTrigger>

            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding Tag, ElementName=Root}" Value="0"/>
                    <Condition Binding="{Binding IsExpanded, RelativeSource={RelativeSource Self}}" Value="True"/>
                    <Condition Binding="{Binding ExpandDirection, RelativeSource={RelativeSource Self}}" Value="Right"/>
                </MultiDataTrigger.Conditions>

                <MultiDataTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource Anim.Expand.Horizontal.Loaded}"/>
                </MultiDataTrigger.EnterActions>
            </MultiDataTrigger>

            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding Tag, ElementName=Root}" Value="1"/>
                    <Condition Binding="{Binding IsExpanded, RelativeSource={RelativeSource Self}}" Value="True"/>
                    <Condition Binding="{Binding ExpandDirection, RelativeSource={RelativeSource Self}}" Value="Up"/>
                </MultiDataTrigger.Conditions>

                <MultiDataTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource Anim.Expand.Vertical.Up}"/>
                </MultiDataTrigger.EnterActions>

                <MultiDataTrigger.ExitActions>
                    <BeginStoryboard Storyboard="{StaticResource Anim.Collapse.Vertical}"/>
                </MultiDataTrigger.ExitActions>
            </MultiDataTrigger>

            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding Tag, ElementName=Root}" Value="1"/>
                    <Condition Binding="{Binding IsExpanded, RelativeSource={RelativeSource Self}}" Value="True"/>
                    <Condition Binding="{Binding ExpandDirection, RelativeSource={RelativeSource Self}}" Value="Down"/>
                </MultiDataTrigger.Conditions>

                <MultiDataTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource Anim.Expand.Vertical.Down}"/>
                </MultiDataTrigger.EnterActions>

                <MultiDataTrigger.ExitActions>
                    <BeginStoryboard Storyboard="{StaticResource Anim.Collapse.Vertical}"/>
                </MultiDataTrigger.ExitActions>
            </MultiDataTrigger>

            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding Tag, ElementName=Root}" Value="1"/>
                    <Condition Binding="{Binding IsExpanded, RelativeSource={RelativeSource Self}}" Value="True"/>
                    <Condition Binding="{Binding ExpandDirection, RelativeSource={RelativeSource Self}}" Value="Left"/>
                </MultiDataTrigger.Conditions>

                <MultiDataTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource Anim.Expand.Horizontal}"/>
                </MultiDataTrigger.EnterActions>

                <MultiDataTrigger.ExitActions>
                    <BeginStoryboard Storyboard="{StaticResource Anim.Collapse.Horizontal}"/>
                </MultiDataTrigger.ExitActions>
            </MultiDataTrigger>

            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding Tag, ElementName=Root}" Value="1"/>
                    <Condition Binding="{Binding IsExpanded, RelativeSource={RelativeSource Self}}" Value="True"/>
                    <Condition Binding="{Binding ExpandDirection, RelativeSource={RelativeSource Self}}" Value="Right"/>
                </MultiDataTrigger.Conditions>

                <MultiDataTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource Anim.Expand.Horizontal}"/>
                </MultiDataTrigger.EnterActions>

                <MultiDataTrigger.ExitActions>
                    <BeginStoryboard Storyboard="{StaticResource Anim.Collapse.Horizontal}"/>
                </MultiDataTrigger.ExitActions>
            </MultiDataTrigger>

            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Foreground" Value="{DynamicResource Color.TextDisable}"/>
            </Trigger>

            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsEnabled" Value="False"/>
                    <Condition Property="IsExpanded" Value="True"/>
                </MultiTrigger.Conditions>

                <Setter Property="Foreground" Value="{DynamicResource Color.TextDisable}"/>
            </MultiTrigger>

            <Trigger Property="ExpandDirection" Value="Down">
                <Setter Property="Grid.Row" Value="0" TargetName="ExpanderButton"/>
                <Setter Property="Grid.Column" Value="1" TargetName="ExpanderButton"/>
                <Setter Property="RenderTransformOrigin" Value="0.5,0" TargetName="ContentBg"/>
            </Trigger>

            <Trigger Property="ExpandDirection" Value="Up">
                <Setter Property="Grid.Row" Value="2" TargetName="ExpanderButton"/>
                <Setter Property="Grid.Column" Value="1" TargetName="ExpanderButton"/>
                <Setter Property="RenderTransformOrigin" Value="0.5,1" TargetName="ContentBg"/>
            </Trigger>

            <Trigger Property="ExpandDirection" Value="Right">
                <Setter Property="Grid.Row" Value="1" TargetName="ExpanderButton"/>
                <Setter Property="Grid.Column" Value="0" TargetName="ExpanderButton"/>
                <Setter Property="RenderTransformOrigin" Value="0,0.5" TargetName="ContentBg"/>
                <Setter Property="LayoutTransform" TargetName="ExpanderButton">
                    <Setter.Value>
                      <RotateTransform Angle="-90"/>
                    </Setter.Value>
                </Setter>
            </Trigger>

            <Trigger Property="ExpandDirection" Value="Left">
                <Setter Property="Grid.Row" Value="1" TargetName="ExpanderButton"/>
                <Setter Property="Grid.Column" Value="2" TargetName="ExpanderButton"/>
                <Setter Property="RenderTransformOrigin" Value="1,0.5" TargetName="ContentBg"/>
                <Setter Property="LayoutTransform" TargetName="ExpanderButton">
                    <Setter.Value>
                        <RotateTransform Angle="90"/>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <!-- EXPANDER STYLE TEMPLATE -->
    <!--////////////////////////////////////////////////////////////////////-->
    <Style x:Key="Style.Expander" TargetType="Expander" BasedOn="{StaticResource {x:Type HeaderedContentControl}}">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Template" Value="{StaticResource Template.Expander}"/>
    </Style>

    <!-- EXPANDER SMALL TEMPLATE -->
    <!--////////////////////////////////////////////////////////////////////-->
    <ControlTemplate x:Key="Template.Expander.Small" TargetType="Expander">
        <ControlTemplate.Resources>

            <!-- The Loaded storyboards set the view of the Expander control when it is initially loaded -->
            <Storyboard x:Key="Anim.Loaded">
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Tag" Storyboard.TargetName="Root">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>

            <Storyboard x:Key="Anim.Expand.Vertical.Loaded">
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                </ObjectAnimationUsingKeyFrames>

                <DoubleAnimation Storyboard.TargetName="ContentBg" Storyboard.TargetProperty="RenderTransform.ScaleX" To="1" Duration="0"/>

                <DoubleAnimation Storyboard.TargetName="ContentBg" Storyboard.TargetProperty="RenderTransform.ScaleY" To="1" Duration="0"/>
            </Storyboard>

            <Storyboard x:Key="Anim.Expand.Vertical.Up.Loaded">
                <DoubleAnimation Storyboard.TargetName="Arrow" Storyboard.TargetProperty="RenderTransform.Angle" To="-90" Duration="0"/>
                <StaticResource ResourceKey="Anim.Expand.Vertical.Loaded"/>
            </Storyboard>

            <Storyboard x:Key="Anim.Expand.Vertical.Down.Loaded">
                <DoubleAnimation Storyboard.TargetName="Arrow" Storyboard.TargetProperty="RenderTransform.Angle" To="0" Duration="0"/>
                <StaticResource ResourceKey="Anim.Expand.Vertical.Loaded"/>
            </Storyboard>

            <Storyboard x:Key="Anim.Expand.Horizontal.Loaded">
                <DoubleAnimation Storyboard.TargetName="Arrow" Storyboard.TargetProperty="RenderTransform.Angle" To="90" Duration="0"/>

                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                </ObjectAnimationUsingKeyFrames>

                <DoubleAnimation Storyboard.TargetName="ContentBg" Storyboard.TargetProperty="RenderTransform.ScaleX" To="1" Duration="0">
                    <DoubleAnimation.EasingFunction>
                    <BackEase EasingMode="EaseOut" Amplitude="0.2"/>
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>

                <DoubleAnimation Storyboard.TargetName="ContentBg" Storyboard.TargetProperty="RenderTransform.ScaleY" To="1" Duration="0"/>
            </Storyboard>

            <!-- The Expand storyboards control the behavior of the Expand control when it expands and we reveal its content -->
            <!-- The Collapse storyboards control the behavior of the Expand control when it collapses and we hide its content -->

            <!-- The Expander control supports 4 directions of expanding - Down, Up, Left, Right; -->
            <!-- Each of these have separate storyboards targeting them. They are defined with the following x:Key suffixes - Vertical, Vertical.Up, Vertical.Down and Horizontal -->

            <!-- The animations targeting the ContentBg object define how we animate and render the container in which we render the content -->
            <!-- The animations targeting the Arrow object define how we animate and rotate the arrow -->
            <Storyboard x:Key="Anim.Expand.Vertical">
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                </ObjectAnimationUsingKeyFrames>

                <DoubleAnimation Storyboard.TargetName="ContentBg" Storyboard.TargetProperty="RenderTransform.ScaleX" To="1" Duration="0"/>

                <DoubleAnimation Storyboard.TargetName="ContentBg" Storyboard.TargetProperty="RenderTransform.ScaleY" To="1" Duration="0:0:0.2">
                    <DoubleAnimation.EasingFunction>
                    <BackEase EasingMode="EaseOut" Amplitude="0.2"/>
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>
            </Storyboard>

            <Storyboard x:Key="Anim.Expand.Vertical.Up">
                <DoubleAnimation Storyboard.TargetName="Arrow" Storyboard.TargetProperty="RenderTransform.Angle" To="-90" Duration="0:0:0.15"/>
                <StaticResource ResourceKey="Anim.Expand.Vertical"/>
            </Storyboard>

            <Storyboard x:Key="Anim.Expand.Vertical.Down">
                <DoubleAnimation Storyboard.TargetName="Arrow" Storyboard.TargetProperty="RenderTransform.Angle" To="180" Duration="0:0:0.15"/>
                <StaticResource ResourceKey="Anim.Expand.Vertical"/>
            </Storyboard>

            <Storyboard x:Key="Anim.Collapse.Vertical">
                <DoubleAnimation Storyboard.TargetName="Arrow" Storyboard.TargetProperty="RenderTransform.Angle" To="0" Duration="0:0:0.2"/>

                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{x:Static Visibility.Collapsed}"/>
                </ObjectAnimationUsingKeyFrames>

                <DoubleAnimation Storyboard.TargetName="ContentBg" Storyboard.TargetProperty="RenderTransform.ScaleY" To="0" Duration="0:0:0.2" AccelerationRatio="0.5"/>
            </Storyboard>

            <Storyboard x:Key="Anim.Expand.Horizontal">
                <DoubleAnimation Storyboard.TargetName="Arrow" Storyboard.TargetProperty="RenderTransform.Angle" To="90" Duration="0:0:0.15"/>

                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                </ObjectAnimationUsingKeyFrames>

                <DoubleAnimation Storyboard.TargetName="ContentBg" Storyboard.TargetProperty="RenderTransform.ScaleX" To="1" Duration="0:0:0.2">
                    <DoubleAnimation.EasingFunction>
                    <BackEase EasingMode="EaseOut" Amplitude="0.2"/>
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>

                <DoubleAnimation Storyboard.TargetName="ContentBg" Storyboard.TargetProperty="RenderTransform.ScaleY" To="1" Duration="0"/>
            </Storyboard>

            <Storyboard x:Key="Anim.Collapse.Horizontal">
                <DoubleAnimation Storyboard.TargetName="Arrow" Storyboard.TargetProperty="RenderTransform.Angle" To="0" Duration="0:0:0.2"/>

                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{x:Static Visibility.Collapsed}"/>
                </ObjectAnimationUsingKeyFrames>

                <DoubleAnimation Storyboard.TargetName="ContentBg" Storyboard.TargetProperty="RenderTransform.ScaleX" To="0" Duration="0:0:0.2" AccelerationRatio="0.5"/>
            </Storyboard>
        </ControlTemplate.Resources>

        <!-- This is the parent Grid that holds all of the elements of the Expander control -->
        <Grid x:Name="Root" Tag="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <!-- The ExpanderButton defines the interactive header which players can press to expand/collapse the Expander -->
            <ToggleButton
                x:Name="ExpanderButton"
                Style="{StaticResource Style.Expander.Toggle}"
                IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                Foreground="{DynamicResource Color.TextPlaceholder}">

                <!-- The ExpanderHeader.Base defines the main visual properties of the header -->
                <Border
                    x:Name="ExpanderHeader.Base"
                    Height="32"
                    Background="Transparent"
                    BorderBrush="Transparent"
                    BorderThickness="2"
                    CornerRadius="4"
                    Padding="8,0,0,0">

                    <!-- The ExpanderHeader.Content defines layout of the header's content -->
                    <Grid x:Name="ExpanderHeader.Content">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="18"/>
                            <ColumnDefinition Width="12"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="16"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>

                        <!-- The Arrow renders an arrow texture which communicates whether the Expander is expanded or collapsed -->
                        <Image
                            x:Name="Arrow"
                            Source="../Textures/Controls/Arrow.png"
                            Width="16"
                            Height="16"
                            VerticalAlignment="Center"
                            Grid.Column="0"
                            RenderTransformOrigin="0.5,0.5">

                            <Image.RenderTransform>
                                <RotateTransform Angle="0"/>
                            </Image.RenderTransform>
                        </Image>

                        <!-- The ContentPresenter renders content inside of the header -->
                        <!-- The content is bound to Header property of the Expander control -->
                        <ContentPresenter
                            x:Name="HeaderHost"
                            Grid.Column="2"
                            ContentSource="Header"
                            VerticalAlignment="Center"
                            TextElement.FontFamily="{DynamicResource Font.CoreSansBold}"
                            TextElement.FontSize="{DynamicResource Font.Size.Body}"/>

                        <Rectangle
                            x:Name="Divider"
                            Grid.Column="4"
                            Fill="White"
                            Stretch="Fill"
                            Height="2"
                            Opacity="0.4"
                            VerticalAlignment="Center"/>
                    </Grid>
                </Border>
            </ToggleButton>

            <!-- The ContentBorder controls the visibility of the Expander's content -->
            <Decorator
                x:Name="ContentBorder"
                Grid.Row="1"
                Grid.Column="1"
                Visibility="Collapsed">

                <!-- The ContentBg defines the background and border of the container in which we render the Expander's content -->
                <!-- All of its properties are bounded to the template, so they can be set when the control is used -->
                <Border
                    x:Name="ContentBg"
                    Background="Transparent"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Padding="{TemplateBinding Padding}">

                    <Border.RenderTransform>
                        <ScaleTransform ScaleX="0" ScaleY="0"/>
                    </Border.RenderTransform>

                    <!-- The ContentPresenter renders the content placed in the Expander -->
                    <ContentPresenter
                        x:Name="ContentHost"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
            </Decorator>
        </Grid>

        <!-- These triggers define the states of the Expander's Header and which storyboards we trigger based on what the ExpandedDirection is -->
        <ControlTemplate.Triggers>
            <EventTrigger RoutedEvent="FrameworkElement.Loaded" SourceName="Root">
                <BeginStoryboard Storyboard="{StaticResource Anim.Loaded}"/>
            </EventTrigger>

            <Trigger Property="IsMouseOver" Value="True" SourceName="ExpanderButton">
                <Setter Property="BorderBrush" Value="{DynamicResource Color.BorderExpanderHover}" TargetName="ExpanderHeader.Base"/>
                <Setter Property="BorderThickness" Value="2" TargetName="ExpanderHeader.Base"/>
                <Setter Property="Border.Effect" Value="{DynamicResource Glow.ExpanderHover}" TargetName="ExpanderHeader.Base"/>
                <Setter Property="Padding" Value="8,0,8,0" TargetName="ExpanderHeader.Base"/>
            </Trigger>

            <Trigger Property="IsPressed" Value="True" SourceName="ExpanderButton">
                <Setter Property="Background" Value="{DynamicResource Color.BackgroundExpanderPressed}" TargetName="ExpanderHeader.Base"/>
                <Setter Property="BorderBrush" Value="{DynamicResource Color.BorderExpanderHover}" TargetName="ExpanderHeader.Base"/>
                <Setter Property="BorderThickness" Value="2" TargetName="ExpanderHeader.Base"/>
                <Setter Property="Border.Effect" Value="{DynamicResource Glow.ExpanderHover}" TargetName="ExpanderHeader.Base"/>
            </Trigger>

            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsExpanded" Value="True"/>
                    <Condition Property="IsMouseOver" Value="True" SourceName="ExpanderButton"/>
                </MultiTrigger.Conditions>

                <Setter Property="BorderBrush" Value="{DynamicResource Color.BorderExpanderHover}" TargetName="ExpanderHeader.Base"/>
                <Setter Property="BorderThickness" Value="2" TargetName="ExpanderHeader.Base"/>
                <Setter Property="Border.Effect" Value="{DynamicResource Glow.ExpanderHover}" TargetName="ExpanderHeader.Base"/>
            </MultiTrigger>

            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsExpanded" Value="True"/>
                    <Condition Property="IsPressed" Value="True" SourceName="ExpanderButton"/>
                </MultiTrigger.Conditions>

                <Setter Property="Background" Value="{DynamicResource Color.BackgroundExpanderPressed}" TargetName="ExpanderHeader.Base"/>
                <Setter Property="BorderBrush" Value="{DynamicResource Color.BorderExpanderHover}" TargetName="ExpanderHeader.Base"/>
                <Setter Property="BorderThickness" Value="2" TargetName="ExpanderHeader.Base"/>
                <Setter Property="Border.Effect" Value="{DynamicResource Glow.ExpanderHover}" TargetName="ExpanderHeader.Base"/>
            </MultiTrigger>

            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding Tag, ElementName=Root}" Value="0"/>
                    <Condition Binding="{Binding IsExpanded, RelativeSource={RelativeSource Self}}" Value="True"/>
                    <Condition Binding="{Binding ExpandDirection, RelativeSource={RelativeSource Self}}" Value="Up"/>
                </MultiDataTrigger.Conditions>

                <MultiDataTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource Anim.Expand.Vertical.Up.Loaded}"/>
                </MultiDataTrigger.EnterActions>
            </MultiDataTrigger>

            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding Tag, ElementName=Root}" Value="0"/>
                    <Condition Binding="{Binding IsExpanded, RelativeSource={RelativeSource Self}}" Value="True"/>
                    <Condition Binding="{Binding ExpandDirection, RelativeSource={RelativeSource Self}}" Value="Down"/>
                </MultiDataTrigger.Conditions>

                <MultiDataTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource Anim.Expand.Vertical.Down.Loaded}"/>
                </MultiDataTrigger.EnterActions>
            </MultiDataTrigger>

            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding Tag, ElementName=Root}" Value="0"/>
                    <Condition Binding="{Binding IsExpanded, RelativeSource={RelativeSource Self}}" Value="True"/>
                    <Condition Binding="{Binding ExpandDirection, RelativeSource={RelativeSource Self}}" Value="Left"/>
                </MultiDataTrigger.Conditions>

                <MultiDataTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource Anim.Expand.Horizontal.Loaded}"/>
                </MultiDataTrigger.EnterActions>
            </MultiDataTrigger>

            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding Tag, ElementName=Root}" Value="0"/>
                    <Condition Binding="{Binding IsExpanded, RelativeSource={RelativeSource Self}}" Value="True"/>
                    <Condition Binding="{Binding ExpandDirection, RelativeSource={RelativeSource Self}}" Value="Right"/>
                </MultiDataTrigger.Conditions>

                <MultiDataTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource Anim.Expand.Horizontal.Loaded}"/>
                </MultiDataTrigger.EnterActions>
            </MultiDataTrigger>

            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding Tag, ElementName=Root}" Value="1"/>
                    <Condition Binding="{Binding IsExpanded, RelativeSource={RelativeSource Self}}" Value="True"/>
                    <Condition Binding="{Binding ExpandDirection, RelativeSource={RelativeSource Self}}" Value="Up"/>
                </MultiDataTrigger.Conditions>

                <MultiDataTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource Anim.Expand.Vertical.Up}"/>
                </MultiDataTrigger.EnterActions>

                <MultiDataTrigger.ExitActions>
                    <BeginStoryboard Storyboard="{StaticResource Anim.Collapse.Vertical}"/>
                </MultiDataTrigger.ExitActions>
            </MultiDataTrigger>

            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding Tag, ElementName=Root}" Value="1"/>
                    <Condition Binding="{Binding IsExpanded, RelativeSource={RelativeSource Self}}" Value="True"/>
                    <Condition Binding="{Binding ExpandDirection, RelativeSource={RelativeSource Self}}" Value="Down"/>
                </MultiDataTrigger.Conditions>

                <MultiDataTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource Anim.Expand.Vertical.Down}"/>
                </MultiDataTrigger.EnterActions>

                <MultiDataTrigger.ExitActions>
                    <BeginStoryboard Storyboard="{StaticResource Anim.Collapse.Vertical}"/>
                </MultiDataTrigger.ExitActions>
            </MultiDataTrigger>

            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding Tag, ElementName=Root}" Value="1"/>
                    <Condition Binding="{Binding IsExpanded, RelativeSource={RelativeSource Self}}" Value="True"/>
                    <Condition Binding="{Binding ExpandDirection, RelativeSource={RelativeSource Self}}" Value="Left"/>
                </MultiDataTrigger.Conditions>

                <MultiDataTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource Anim.Expand.Horizontal}"/>
                </MultiDataTrigger.EnterActions>

                <MultiDataTrigger.ExitActions>
                    <BeginStoryboard Storyboard="{StaticResource Anim.Collapse.Horizontal}"/>
                </MultiDataTrigger.ExitActions>
            </MultiDataTrigger>

            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding Tag, ElementName=Root}" Value="1"/>
                    <Condition Binding="{Binding IsExpanded, RelativeSource={RelativeSource Self}}" Value="True"/>
                    <Condition Binding="{Binding ExpandDirection, RelativeSource={RelativeSource Self}}" Value="Right"/>
                </MultiDataTrigger.Conditions>

                <MultiDataTrigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource Anim.Expand.Horizontal}"/>
                </MultiDataTrigger.EnterActions>

                <MultiDataTrigger.ExitActions>
                    <BeginStoryboard Storyboard="{StaticResource Anim.Collapse.Horizontal}"/>
                </MultiDataTrigger.ExitActions>
            </MultiDataTrigger>

            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Foreground" Value="{DynamicResource Color.TextDisable}"/>
            </Trigger>

            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsEnabled" Value="False"/>
                    <Condition Property="IsExpanded" Value="True"/>
                </MultiTrigger.Conditions>

                <Setter Property="Foreground" Value="{DynamicResource Color.TextDisable}"/>
            </MultiTrigger>

            <Trigger Property="ExpandDirection" Value="Down">
                <Setter Property="Grid.Row" Value="0" TargetName="ExpanderButton"/>
                <Setter Property="Grid.Column" Value="1" TargetName="ExpanderButton"/>
                <Setter Property="RenderTransformOrigin" Value="0.5,0" TargetName="ContentBg"/>
            </Trigger>

            <Trigger Property="ExpandDirection" Value="Up">
                <Setter Property="Grid.Row" Value="2" TargetName="ExpanderButton"/>
                <Setter Property="Grid.Column" Value="1" TargetName="ExpanderButton"/>
                <Setter Property="RenderTransformOrigin" Value="0.5,1" TargetName="ContentBg"/>
            </Trigger>

            <Trigger Property="ExpandDirection" Value="Right">
                <Setter Property="Grid.Row" Value="1" TargetName="ExpanderButton"/>
                <Setter Property="Grid.Column" Value="0" TargetName="ExpanderButton"/>
                <Setter Property="RenderTransformOrigin" Value="0,0.5" TargetName="ContentBg"/>
                <Setter Property="LayoutTransform" TargetName="ExpanderButton">
                    <Setter.Value>
                      <RotateTransform Angle="-90"/>
                    </Setter.Value>
                </Setter>
            </Trigger>

            <Trigger Property="ExpandDirection" Value="Left">
                <Setter Property="Grid.Row" Value="1" TargetName="ExpanderButton"/>
                <Setter Property="Grid.Column" Value="2" TargetName="ExpanderButton"/>
                <Setter Property="RenderTransformOrigin" Value="1,0.5" TargetName="ContentBg"/>
                <Setter Property="LayoutTransform" TargetName="ExpanderButton">
                    <Setter.Value>
                        <RotateTransform Angle="90"/>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <!-- EXPANDER SMALL STYLE TEMPLATE -->
    <!--////////////////////////////////////////////////////////////////////-->
    <Style x:Key="Style.Expander.Small" TargetType="Expander" BasedOn="{StaticResource {x:Type HeaderedContentControl}}">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Padding" Value="0,8,0,0"/>
        <Setter Property="Template" Value="{StaticResource Template.Expander.Small}"/>
    </Style>
</ResourceDictionary>
