Artemis/src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/Timeline/LayerPropertiesTimelineView.xaml

<UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline.LayerPropertiesTimelineView"
             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:timeline="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline"
             xmlns:s="https://github.com/canton7/Stylet"
             xmlns:controls="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline.Controls"
             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800"
             d:DataContext="{d:DesignInstance timeline:LayerPropertiesTimelineViewModel}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <ScrollViewer x:Name="Keyframes"
                      Grid.Row="0"
                      HorizontalScrollBarVisibility="Visible"
                      VerticalScrollBarVisibility="Hidden">
            <StackPanel x:Name="KeyframesContainer">
                <!-- Time caret -->
                <Canvas ZIndex="10" Height="25" Margin="{Binding TimeCaretPosition}">
                    <Polygon Points="-10,0 0,20, 10,00" Fill="{StaticResource SecondaryAccentBrush}" />
                    <Line X1="0" X2="0" Y1="0" Y2="10000" StrokeThickness="2" Stroke="{StaticResource SecondaryAccentBrush}" />
                </Canvas>
                <!-- Time -->
                <controls:TimelineTime Height="30"
                                       Fill="{DynamicResource MaterialDesignBody}"
                                       PixelsPerSecond="{Binding PixelsPerSecond}"
                                       HorizontalOffset="{Binding ContentHorizontalOffset, ElementName=Keyframes}"
                                       VisibleWidth="{Binding ActualWidth, ElementName=Keyframes}" />
                <!-- Keyframes -->
                <ItemsControl ItemsSource="{Binding TimelinePropertyRailViewModels}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <ContentControl s:View.Model="{Binding}" HorizontalAlignment="Stretch" />
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </StackPanel>
        </ScrollViewer>

        <StackPanel Grid.Row="1"
                    Orientation="Horizontal"
                    HorizontalAlignment="Right">
            <TextBlock Text="{Binding PixelsPerSecond}" />
            <Slider Grid.Row="2"
                    Orientation="Horizontal"
                    HorizontalAlignment="Right"
                    Margin="10"
                    TickFrequency="5"
                    Minimum="1"
                    Maximum="600"
                    Value="{Binding PixelsPerSecond}"
                    Width="600" />
        </StackPanel>


    </Grid>
</UserControl>