<UserControl x:Class="PixiEditor.Views.TogglableFlyout"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:PixiEditor.Views"
             xmlns:converters="clr-namespace:PixiEditor.Helpers.Converters"
             xmlns:userControls="clr-namespace:PixiEditor.Views.UserControls"
             mc:Ignorable="d"
             d:DesignHeight="380" d:DesignWidth="200" Name="togglableFlyout">
    <Border Background="Transparent">
        <StackPanel Orientation="Vertical">
            <Border HorizontalAlignment="Right" Background="#C8202020" CornerRadius="5" Padding="5" x:Name="btnBorder">
                <ToggleButton Padding="0" Margin="0" ToolTip="{Binding ElementName=togglableFlyout, Path=ToolTip}"
                              x:Name="toggleButton" BorderThickness="0" Width="24" Height="24" Background="Transparent">
                    <ToggleButton.Template>
                        <ControlTemplate TargetType="{x:Type ToggleButton}">
                            <Grid>
                                <Image Focusable="False" Width="24" Cursor="Hand" x:Name="btnBg" 
                                       Source="{Binding ElementName=togglableFlyout, Path=IconPath}">
                                    <Image.RenderTransform>
                                        <RotateTransform Angle="0" CenterX="12" CenterY="12"/>
                                    </Image.RenderTransform>
                                </Image>
                                <ContentPresenter/>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsChecked" Value="True">
                                    <Trigger.EnterActions>
                                        <BeginStoryboard x:Name="Rotate90Animation">
                                            <Storyboard>
                                                <DoubleAnimation From="0" To="180"
                                                                 Storyboard.TargetName="btnBg"
                                                                 Storyboard.TargetProperty="(ToggleButton.RenderTransform).(RotateTransform.Angle)"
                                                                 Duration="0:0:0.15"/>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </Trigger.EnterActions>
                                    <Trigger.ExitActions>
                                        <BeginStoryboard x:Name="RotateReverse90Animation">
                                            <Storyboard>
                                                <DoubleAnimation From="180" To="0"
                                                                 Storyboard.TargetName="btnBg"
                                                                 Storyboard.TargetProperty="(ToggleButton.RenderTransform).(RotateTransform.Angle)"
                                                                 Duration="0:0:0.15"/>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </Trigger.ExitActions>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </ToggleButton.Template>
                </ToggleButton>
            </Border>
            <ContentControl x:Name="popup" DataContext="{Binding ElementName=togglableFlyout}"
                              Visibility="{Binding Path=IsChecked, ElementName=toggleButton, Converter={converters:BoolToVisibilityConverter}}" 
                   Content="{Binding ElementName=togglableFlyout, Path=Child}" />
        </StackPanel>
    </Border>
</UserControl>
