Profiles - Added enter, main and exit timelines

Display conditions - Fleshed out most of the UI

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/Timeline/TimelineKeyframeViewModel.cs

@@ -27,6 +27,7 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
             var newKeyframe = new LayerPropertyKeyframe<T>(
                 LayerPropertyKeyframe.Value,
                 LayerPropertyKeyframe.Position,
+                LayerPropertyKeyframe.Timeline,
                 LayerPropertyKeyframe.EasingFunction,
                 LayerPropertyKeyframe.LayerProperty
             );

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

@@ -23,7 +23,7 @@
                       Visibility="{Binding LayerPropertyGroupViewModel.IsExpanded, Converter={x:Static s:BoolToVisibilityConverter.InverseInstance}, Mode=OneWay}"
                       ItemsSource="{Binding TimelineKeyframeViewModels}"
                       Background="{DynamicResource MaterialDesignToolBarBackground}"
-                      HorizontalAlignment="Left">
+                      HorizontalAlignment="Stretch">
             <ItemsControl.ItemsPanel>
                 <ItemsPanelTemplate>
                     <Canvas />
@@ -49,20 +49,22 @@
         <Rectangle Grid.Row="1" HorizontalAlignment="Stretch" Fill="{DynamicResource MaterialDesignDivider}" Height="1" />
 
         <ItemsControl Grid.Row="2"
+                      ItemsSource="{Binding LayerPropertyGroupViewModel.Children}"
                       Visibility="{Binding LayerPropertyGroupViewModel.IsExpanded, Converter={x:Static s:BoolToVisibilityConverter.Instance}, Mode=OneWay}"
-                      ItemsSource="{Binding LayerPropertyGroupViewModel.Children}">
+                      HorizontalAlignment="Stretch"
+                      HorizontalContentAlignment="Stretch">
+            <ItemsControl.ItemContainerStyle>
+                <Style TargetType="ContentPresenter">
+                    <Setter Property="VerticalAlignment" Value="Stretch" />
+                    <Setter Property="HorizontalAlignment" Value="Stretch" />
+                </Style >
+            </ItemsControl.ItemContainerStyle>
             <ItemsControl.Resources>
                 <DataTemplate DataType="{x:Type layerProperties:LayerPropertyGroupViewModel}">
-                    <ContentControl s:View.Model="{Binding TimelinePropertyGroupViewModel}"
-                                    VerticalContentAlignment="Stretch"
-                                    HorizontalContentAlignment="Stretch"
-                                    IsTabStop="False" />
+                    <ContentControl s:View.Model="{Binding TimelinePropertyGroupViewModel}" IsTabStop="False" HorizontalAlignment="Stretch"/>
                 </DataTemplate>
                 <DataTemplate DataType="{x:Type layerProperties:LayerPropertyViewModel}">
-                    <ContentControl s:View.Model="{Binding TimelinePropertyBaseViewModel}"
-                                    VerticalContentAlignment="Stretch"
-                                    HorizontalContentAlignment="Stretch"
-                                    IsTabStop="False" />
+                    <ContentControl s:View.Model="{Binding TimelinePropertyBaseViewModel}" IsTabStop="False" HorizontalAlignment="Stretch" />
                 </DataTemplate>
             </ItemsControl.Resources>
         </ItemsControl>

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/Timeline/TimelinePropertyGroupViewModel.cs

@@ -2,16 +2,19 @@
 using System.ComponentModel;
 using System.Linq;
 using Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Abstract;
+using Artemis.UI.Shared.Services.Interfaces;
 using Stylet;
 
 namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
 {
     public class TimelinePropertyGroupViewModel : PropertyChangedBase
     {
+        private readonly IProfileEditorService _profileEditorService;
         private BindableCollection<double> _timelineKeyframeViewModels;
 
-        public TimelinePropertyGroupViewModel(LayerPropertyBaseViewModel layerPropertyBaseViewModel)
+        public TimelinePropertyGroupViewModel(LayerPropertyBaseViewModel layerPropertyBaseViewModel, IProfileEditorService profileEditorService)
         {
+            _profileEditorService = profileEditorService;
             LayerPropertyGroupViewModel = (LayerPropertyGroupViewModel) layerPropertyBaseViewModel;
             TimelineKeyframeViewModels = new BindableCollection<double>();
 
@@ -32,6 +35,7 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
         {
             TimelineKeyframeViewModels.Clear();
             TimelineKeyframeViewModels.AddRange(LayerPropertyGroupViewModel.GetKeyframes(false)
+                .Where(k => k.Timeline == _profileEditorService.CurrentTimeline)
                 .Select(k => LayerPropertyGroupViewModel.ProfileEditorService.PixelsPerSecond * k.Position.TotalSeconds));
         }
 

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

@@ -9,7 +9,9 @@
              mc:Ignorable="d"
              d:DesignHeight="450" d:DesignWidth="800"
              d:DataContext="{d:DesignInstance local:TimelinePropertyViewModel}"
-             Visibility="{Binding LayerPropertyBaseViewModel.IsVisible, Converter={x:Static s:BoolToVisibilityConverter.Instance}, Mode=OneWay}">
+             Visibility="{Binding LayerPropertyBaseViewModel.IsVisible, Converter={x:Static s:BoolToVisibilityConverter.Instance}, Mode=OneWay}"
+             MinWidth="{Binding Width}"
+             HorizontalAlignment="Stretch">
     <Border Height="25" BorderThickness="0,0,0,1" BorderBrush="{DynamicResource MaterialDesignDivider}">
         <ItemsControl ItemsSource="{Binding TimelineKeyframeViewModels}"
                       Background="{DynamicResource MaterialDesignToolBarBackground}"

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/Timeline/TimelinePropertyViewModel.cs

@@ -28,7 +28,9 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
             // Only show keyframes if they are enabled
             if (LayerPropertyViewModel.LayerProperty.KeyframesEnabled)
             {
-                var keyframes = LayerPropertyViewModel.LayerProperty.Keyframes.ToList();
+                var keyframes = LayerPropertyViewModel.LayerProperty.Keyframes
+                    .Where(k => k.Timeline == _profileEditorService.CurrentTimeline)
+                    .ToList();
                 var toRemove = TimelineKeyframeViewModels.Where(t => !keyframes.Contains(t.BaseLayerPropertyKeyframe)).ToList();
                 TimelineKeyframeViewModels.RemoveRange(toRemove);
                 TimelineKeyframeViewModels.AddRange(
@@ -60,12 +62,15 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
         {
             foreach (var timelineKeyframeViewModel in TimelineKeyframeViewModels)
                 timelineKeyframeViewModel.Update(_profileEditorService.PixelsPerSecond);
+
+            Width = TimelineKeyframeViewModels.Any() ? TimelineKeyframeViewModels.Max(t => t.X) + 25 : 0;
         }
     }
 
     public abstract class TimelinePropertyViewModel : PropertyChangedBase, IDisposable
     {
         private BindableCollection<TimelineKeyframeViewModel> _timelineKeyframeViewModels;
+        private double _width;
 
         protected TimelinePropertyViewModel(LayerPropertyBaseViewModel layerPropertyBaseViewModel)
         {
@@ -81,6 +86,12 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
             set => SetAndNotify(ref _timelineKeyframeViewModels, value);
         }
 
+        public double Width
+        {
+            get => _width;
+            set => SetAndNotify(ref _width, value);
+        }
+
         public abstract void Dispose();
 
         public abstract void UpdateKeyframes();

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

@@ -12,7 +12,8 @@
     <Grid Background="{DynamicResource MaterialDesignToolBarBackground}"
           MouseDown="{s:Action TimelineCanvasMouseDown}"
           MouseUp="{s:Action TimelineCanvasMouseUp}"
-          MouseMove="{s:Action TimelineCanvasMouseMove}">
+          MouseMove="{s:Action TimelineCanvasMouseMove}"
+          HorizontalAlignment="Stretch">
         <Grid.Triggers>
             <EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown">
                 <BeginStoryboard>
@@ -31,12 +32,11 @@
         </Grid.Triggers>
 
         <ItemsControl ItemsSource="{Binding LayerPropertyGroups}"
-                      Width="{Binding Width}"
                       MinWidth="{Binding ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ScrollViewer}}"
                       HorizontalAlignment="Left">
             <ItemsControl.ItemTemplate>
                 <DataTemplate>
-                    <ContentControl s:View.Model="{Binding TimelinePropertyGroupViewModel}" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" />
+                    <ContentControl s:View.Model="{Binding TimelinePropertyGroupViewModel}" HorizontalContentAlignment="Left" />
                 </DataTemplate>
             </ItemsControl.ItemTemplate>
         </ItemsControl>

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/Timeline/TimelineViewModel.cs

@@ -18,7 +18,6 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
         private readonly LayerPropertiesViewModel _layerPropertiesViewModel;
         private readonly IProfileEditorService _profileEditorService;
         private RectangleGeometry _selectionRectangle;
-        private double _width;
 
         public TimelineViewModel(LayerPropertiesViewModel layerPropertiesViewModel, BindableCollection<LayerPropertyGroupViewModel> layerPropertyGroups,
             IProfileEditorService profileEditorService)
@@ -33,12 +32,6 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
 
         public BindableCollection<LayerPropertyGroupViewModel> LayerPropertyGroups { get; }
 
-        public double Width
-        {
-            get => _width;
-            set => SetAndNotify(ref _width, value);
-        }
-
         public RectangleGeometry SelectionRectangle
         {
             get => _selectionRectangle;