Artemis/src/Artemis.UI/Screens/ProfileEditor/LayerProperties/Timeline/TimelineSegmentView.xaml

<UserControl x:Class="Artemis.UI.Screens.ProfileEditor.LayerProperties.Timeline.TimelineSegmentView"
             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:s="https://github.com/canton7/Stylet"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             xmlns:utilities="clr-namespace:Artemis.UI.Utilities"
             xmlns:timeline="clr-namespace:Artemis.UI.Screens.ProfileEditor.LayerProperties.Timeline"
             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800"
             d:DataContext="{d:DesignInstance {x:Type timeline:TimelineSegmentViewModel}}">
    <UserControl.Resources>
        <utilities:BindingProxy x:Key="DataContextProxy" Data="{Binding}" />
    </UserControl.Resources>
    <StackPanel Orientation="Horizontal" Visibility="{Binding SegmentEnabled, Converter={x:Static s:BoolToVisibilityConverter.Instance}}">
        <StackPanel.ContextMenu>
            <ContextMenu>
                <MenuItem Header="Repeat main segment"
                          IsCheckable="True"
                          IsChecked="{Binding Data.RepeatSegment, Source={StaticResource DataContextProxy}}"
                          Visibility="{Binding Data.IsMainSegment, Converter={x:Static s:BoolToVisibilityConverter.Instance}, Source={StaticResource DataContextProxy}}" />
                <MenuItem Header="Disable segment" Command="{s:Action DisableSegment}" />
            </ContextMenu>
        </StackPanel.ContextMenu>

        <!-- Segment content -->
        <Grid VerticalAlignment="Top" Background="{StaticResource MaterialDesignPaper}" Width="{Binding SegmentWidth}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <TextBlock TextAlignment="Center"
                       Padding="0 3"
                       Margin="5 0 0 0"
                       FontSize="12"
                       ToolTip="{Binding ToolTip}"
                       Text="{Binding Segment}"
                       ClipToBounds="False">
                <TextBlock.Style>
                    <Style TargetType="TextBlock">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding ShowSegmentName}" Value="False">
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:0.25">
                                                <DoubleAnimation.EasingFunction>
                                                    <QuadraticEase EasingMode="EaseInOut" />
                                                </DoubleAnimation.EasingFunction>
                                            </DoubleAnimation>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.EnterActions>
                                <DataTrigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.0" To="1.0" Duration="0:0:0.25" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.ExitActions>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </TextBlock.Style>
            </TextBlock>

            <ToggleButton Grid.Column="1"
                          ToolTip="Toggle main segment repeat"
                          Width="16"
                          Height="16"
                          IsChecked="{Binding RepeatSegment}"
                          VerticalAlignment="Center"
                          Visibility="{Binding IsMainSegment, Converter={x:Static s:BoolToVisibilityConverter.Instance}}">
                <ToggleButton.Style>
                    <Style TargetType="ToggleButton" BasedOn="{StaticResource MaterialDesignFlatToggleButton}">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding ShowRepeatButton}" Value="False">
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:0.25">
                                                <DoubleAnimation.EasingFunction>
                                                    <QuadraticEase EasingMode="EaseInOut" />
                                                </DoubleAnimation.EasingFunction>
                                            </DoubleAnimation>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:0.25" Value="{x:Static Visibility.Collapsed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.EnterActions>
                                <DataTrigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.0" To="1.0" Duration="0:0:0.25" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.ExitActions>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </ToggleButton.Style>
                <materialDesign:PackIcon Kind="Repeat" Height="12" Width="12" />
            </ToggleButton>

            <Button Grid.Column="2" ToolTip="Disable segment" Width="20" Height="20" Margin="0 0 5 0" Command="{s:Action DisableSegment}">
                <Button.Style>
                    <Style TargetType="Button" BasedOn="{StaticResource MaterialDesignIconButton}">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding ShowDisableButton}" Value="False">
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:0.25">
                                                <DoubleAnimation.EasingFunction>
                                                    <QuadraticEase EasingMode="EaseInOut" />
                                                </DoubleAnimation.EasingFunction>
                                            </DoubleAnimation>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.EnterActions>
                                <DataTrigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.0" To="1.0" Duration="0:0:0.25" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.ExitActions>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Button.Style>
                <materialDesign:PackIcon Kind="Close" Height="18" Width="18" />
            </Button>
        </Grid>

        <!-- Segment movement display -->
        <Rectangle RadiusX="2" RadiusY="2" Fill="{DynamicResource PrimaryHueDarkBrush}" Margin="-2 -2 0 0" Width="5" Height="24" VerticalAlignment="Top" HorizontalAlignment="Right" />

        <!-- Segment movement handles -->
        <Rectangle RadiusX="2"
                   RadiusY="2"
                   Fill="Transparent"
                   Margin="-9 -2 0 0"
                   Width="12"
                   Height="25"
                   VerticalAlignment="Top"
                   HorizontalAlignment="Right"
                   Cursor="SizeWE"
                   MouseDown="{s:Action SegmentMouseDown}"
                   MouseUp="{s:Action SegmentMouseUp}"
                   MouseMove="{s:Action SegmentMouseMove}" />
    </StackPanel>
</UserControl>