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

<UserControl x:Class="Artemis.UI.Screens.ProfileEditor.LayerProperties.Timeline.TimelinePropertyView"
             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:Artemis.UI.Screens.ProfileEditor.LayerProperties.Timeline"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             xmlns:s="https://github.com/canton7/Stylet"
             xmlns:timeline="clr-namespace:Artemis.UI.Screens.ProfileEditor.LayerProperties.Timeline"
             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800"
             MinWidth="{Binding Width}"
             HorizontalAlignment="Stretch">
    <Border Height="25" BorderThickness="0,0,0,1" BorderBrush="{DynamicResource MaterialDesignDivider}">
        <ItemsControl ItemsSource="{Binding Items}"
                      Background="{DynamicResource MaterialDesignToolBarBackground}"
                      HorizontalAlignment="Left">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemContainerStyle>
                <Style TargetType="{x:Type ContentPresenter}">
                    <Setter Property="Canvas.Left" Value="{Binding X}" />
                </Style>
            </ItemsControl.ItemContainerStyle>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Ellipse Fill="{StaticResource PrimaryHueMidBrush}"
                             Stroke="White"
                             StrokeThickness="0"
                             Width="10"
                             Height="10"
                             Margin="-5,6,0,0"
                             ToolTip="{Binding Timestamp}"
                             s:View.ActionTarget="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type timeline:TimelineView}}, Path=DataContext}"
                             MouseDown="{s:Action KeyframeMouseDown}"
                             MouseUp="{s:Action KeyframeMouseUp}"
                             MouseMove="{s:Action KeyframeMouseMove}"
                             ContextMenuOpening="{s:Action ContextMenuOpening}" 
                             ContextMenuClosing="{s:Action ContextMenuClosing}">
                        <Ellipse.Style>
                            <Style TargetType="{x:Type Ellipse}">
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding IsSelected}" Value="True">
                                        <DataTrigger.EnterActions>
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <DoubleAnimation Storyboard.TargetProperty="StrokeThickness" To="1" Duration="0:0:0.25" />
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </DataTrigger.EnterActions>
                                        <DataTrigger.ExitActions>
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <DoubleAnimation Storyboard.TargetProperty="StrokeThickness" To="0" Duration="0:0:0.25" />
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </DataTrigger.ExitActions>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Ellipse.Style>
                        <Ellipse.ContextMenu>
                            <ContextMenu>
                                <MenuItem Header="Copy" Command="{s:Action Copy}" CommandParameter="{Binding}">
                                    <MenuItem.Icon>
                                        <materialDesign:PackIcon Kind="ContentCopy" />
                                    </MenuItem.Icon>
                                </MenuItem>
                                <MenuItem Header="Delete" Command="{s:Action Delete}" CommandParameter="{Binding}">
                                    <MenuItem.Icon>
                                        <materialDesign:PackIcon Kind="Delete" />
                                    </MenuItem.Icon>
                                </MenuItem>
                                <Separator />
                                <MenuItem Header="Easing" ItemsSource="{Binding EasingViewModels}">
                                    <MenuItem.Icon>
                                        <materialDesign:PackIcon Kind="Creation" />
                                    </MenuItem.Icon>
                                    <MenuItem.ItemContainerStyle>
                                        <Style TargetType="{x:Type MenuItem}" BasedOn="{StaticResource MaterialDesignMenuItem}">
                                            <Setter Property="IsCheckable" Value="True" />
                                            <Setter Property="IsChecked" Value="{Binding Path=IsEasingModeSelected, Mode=TwoWay}" />
                                        </Style>
                                    </MenuItem.ItemContainerStyle>
                                    <MenuItem.ItemTemplate>
                                        <DataTemplate>
                                            <StackPanel Orientation="Horizontal">
                                                <Polyline Stroke="{DynamicResource MaterialDesignBody}"
                                                          StrokeThickness="1"
                                                          Points="{Binding EasingPoints}"
                                                          Stretch="Uniform"
                                                          Width="20"
                                                          Height="20"
                                                          Margin="0 0 10 0" />
                                                <TextBlock Text="{Binding Description}" />
                                            </StackPanel>
                                        </DataTemplate>
                                    </MenuItem.ItemTemplate>
                                </MenuItem>
                            </ContextMenu>
                        </Ellipse.ContextMenu>
                    </Ellipse>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Border>
</UserControl>