Artemis/src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/LayerPropertiesView.xaml

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

        <!-- Left side -->
        <Grid Grid.Column="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="56" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <!-- Misc controls & time display -->
            <StackPanel Grid.Row="0" VerticalAlignment="Center">
                <TextBlock Style="{StaticResource MaterialDesignHeadline6TextBlock}" Text="{Binding FormattedCurrentTime}" HorizontalAlignment="Right" Margin="0 0 20 0" />
            </StackPanel>

            <!-- Properties tree -->
            <ScrollViewer Grid.Row="1" x:Name="PropertyTreeScrollViewer" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden">
                <Border BorderThickness="0,0,1,0" BorderBrush="{DynamicResource MaterialDesignDivider}">
                    <ContentControl s:View.Model="{Binding PropertyTree}" />
                </Border>
            </ScrollViewer>
        </Grid>

        <!-- Right side -->
        <Grid Grid.Column="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="56" />
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <!-- Timeline header -->
            <ScrollViewer Grid.Row="0" x:Name="TimelineHeaderScrollViewer" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" ScrollChanged="TimelineScrollChanged">
                <Grid MouseDown="{s:Action TimelineMouseDown}"
                      MouseMove="{s:Action TimelineMouseMove}"
                      Background="{DynamicResource MaterialDesignCardBackground}">
                    <!-- Caret -->
                    <Canvas ZIndex="1"
                            Margin="{Binding TimeCaretPosition}"
                            Cursor="SizeWE"
                            MouseEnter="{s:Action CaretMouseEnter}"
                            MouseLeave="{s:Action CaretMouseLeave}">
                        <Polygon Points="-10,0 0,20, 10,00" Fill="{StaticResource SecondaryAccentBrush}" />
                        <Line X1="0" X2="0" Y1="0" Y2="{Binding ActualHeight, ElementName=ContainerGrid}" StrokeThickness="2" Stroke="{StaticResource SecondaryAccentBrush}" />
                    </Canvas>
                    <!-- Time -->
                    <timeline:PropertyTimelineHeader Margin="0 25 0 0"
                                                     Fill="{DynamicResource MaterialDesignBody}"
                                                     PixelsPerSecond="{Binding PixelsPerSecond}"
                                                     HorizontalOffset="{Binding ContentHorizontalOffset, ElementName=TimelineHeaderScrollViewer}"
                                                     VisibleWidth="{Binding ActualWidth, ElementName=TimelineHeaderScrollViewer}"
                                                     Width="{Binding ActualWidth, ElementName=PropertyTimeLine}" />
                </Grid>
            </ScrollViewer>

            <!-- Timeline rails -->
            <ScrollViewer Grid.Row="1" x:Name="TimelineRailsScrollViewer" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Hidden" ScrollChanged="TimelineScrollChanged">
                <Grid MouseDown="{s:Action TimelineMouseDown}"
                      MouseMove="{s:Action TimelineMouseMove}">
                    <Canvas ZIndex="1"
                            Margin="{Binding TimeCaretPosition}"
                            Cursor="SizeWE"
                            MouseEnter="{s:Action CaretMouseEnter}"
                            MouseLeave="{s:Action CaretMouseLeave}">
                        <Line X1="0" X2="0" Y1="0" Y2="{Binding ActualHeight, ElementName=ContainerGrid}" StrokeThickness="2" Stroke="{StaticResource SecondaryAccentBrush}" />
                    </Canvas>
                    <ContentControl x:Name="PropertyTimeLine" s:View.Model="{Binding PropertyTimeline}" />
                </Grid>

            </ScrollViewer>
        </Grid>

        <!-- Bottom row, a bit hacky but has a ZIndex of 2 to cut off the time caret that overlaps the entire timeline -->
        <StackPanel Grid.Row="1"
                    Grid.ColumnSpan="2"
                    Grid.Column="0"
                    HorizontalAlignment="Stretch"
                    ZIndex="2"
                    Background="{DynamicResource MaterialDesignCardBackground}">
            <!-- Zoom control -->
            <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
                <TextBlock Text="{Binding PixelsPerSecond}" VerticalAlignment="Center" />
                <Slider Orientation="Horizontal"
                        HorizontalAlignment="Right"
                        Margin="10"
                        TickFrequency="5"
                        Minimum="1"
                        Maximum="600"
                        Value="{Binding PixelsPerSecond}"
                        Width="600" />
            </StackPanel>
        </StackPanel>
    </Grid>
</UserControl>