Profile editor - Redesigned adding/removing timeline segments

General module - Added some basic window information to the data model Profiles - Don't render when opacity is 0 Profile editor - Render non-selected layers in their main segment Profile editor - Condition editor fixes
2026-11-12 11:56:30 +00:00 · 2020-07-24 23:04:21 +02:00
1 parent 527fef3dc6
commit 72d606f40d
@@ -10,9 +10,33 @@
             d:DesignHeight="450" d:DesignWidth="800"
             d:DataContext="{d:DesignInstance Type=local:DisplayConditionGroupViewModel, IsDesignTimeCreatable=False}">
    <UserControl.Resources>
-        <ResourceDictionary Source="pack://application:,,,/Artemis.UI;component/ResourceDictionaries/DisplayConditions.xaml" />
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="pack://application:,,,/Artemis.UI;component/ResourceDictionaries/DisplayConditions.xaml" />
+                <ResourceDictionary>
+                    <Style TargetType="Grid" x:Key="InitializingFade">
+                        <Style.Triggers>
+                            <DataTrigger Binding="{Binding IsInitialized}" Value="True">
+                                <DataTrigger.EnterActions>
+                                    <BeginStoryboard>
+                                        <Storyboard>
+                                            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.0" To="1.0" Duration="0:0:0.25" BeginTime="0:0:0.1">
+                                                <DoubleAnimation.EasingFunction>
+                                                    <QuadraticEase EasingMode="EaseInOut" />
+                                                </DoubleAnimation.EasingFunction>
+                                            </DoubleAnimation>
+                                        </Storyboard>
+                                    </BeginStoryboard>
+                                </DataTrigger.EnterActions>
+                            </DataTrigger>
+                        </Style.Triggers>
+                    </Style>
+                </ResourceDictionary>
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
    </UserControl.Resources>
-    <Grid>
+
+    <Grid Style="{StaticResource InitializingFade}" Opacity="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
@@ -1,9 +1,11 @@
 using System;
 using System.Linq;
+using System.Threading.Tasks;
 using Artemis.Core.Models.Profile.Conditions;
 using Artemis.UI.Ninject.Factories;
 using Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions.Abstract;
 using Humanizer;
+using Stylet;

 namespace Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions
 {
@@ -11,11 +13,17 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions
    {
        private readonly IDisplayConditionsVmFactory _displayConditionsVmFactory;
        private bool _isRootGroup;
+        private bool _isInitialized;

        public DisplayConditionGroupViewModel(DisplayConditionGroup displayConditionGroup, DisplayConditionViewModel parent, IDisplayConditionsVmFactory displayConditionsVmFactory) : base(
            displayConditionGroup, parent)
        {
            _displayConditionsVmFactory = displayConditionsVmFactory;
+            Execute.PostToUIThread(async () =>
+            {
+                await Task.Delay(50);
+                IsInitialized = true;
+            });
        }

        public DisplayConditionGroup DisplayConditionGroup => (DisplayConditionGroup) Model;
@@ -26,6 +34,12 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions
            set => SetAndNotify(ref _isRootGroup, value);
        }

+        public bool IsInitialized
+        {
+            get => _isInitialized;
+            set => SetAndNotify(ref _isInitialized, value);
+        }
+
        public string SelectedBooleanOperator => DisplayConditionGroup.BooleanOperator.Humanize();

        public void SelectBooleanOperator(string type)
@@ -20,11 +20,28 @@
                <ResourceDictionary>
                    <converters:NullToVisibilityConverter x:Key="NullToVisibilityConverter" />
                    <utilities:BindingProxy x:Key="DataContextProxy" Data="{Binding}" />
+                    <Style TargetType="Grid" x:Key="InitializingFade">
+                        <Style.Triggers>
+                            <DataTrigger Binding="{Binding IsInitialized}" Value="True">
+                                <DataTrigger.EnterActions>
+                                    <BeginStoryboard>
+                                        <Storyboard>
+                                            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.0" To="1.0" Duration="0:0:0.25" BeginTime="0:0:0.1">
+                                                <DoubleAnimation.EasingFunction>
+                                                    <QuadraticEase EasingMode="EaseInOut" />
+                                                </DoubleAnimation.EasingFunction>
+                                            </DoubleAnimation>
+                                        </Storyboard>
+                                    </BeginStoryboard>
+                                </DataTrigger.EnterActions>
+                            </DataTrigger>
+                        </Style.Triggers>
+                    </Style>
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
-    <Grid Margin="0 3">
+    <Grid Margin="0 3" Style="{StaticResource InitializingFade}" Opacity="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
@@ -61,6 +78,7 @@
                            <Setter Property="CommandParameter" Value="{Binding}" />
                            <Setter Property="CommandTarget" Value="{Binding}" />
                            <Setter Property="IsEnabled" Value="{Binding IsMatchingFilteredTypes}" />
+                            <Setter Property="IsSubmenuOpen" Value="{Binding IsVisualizationExpanded, Mode=TwoWay}" />
                        </Style>
                    </ContextMenu.ItemContainerStyle>
                </ContextMenu>
@@ -28,12 +28,13 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions
        private DataModelPropertiesViewModel _rightSideDataModel;
        private DataModelInputViewModel _rightSideInputViewModel;
        private int _rightSideTransitionIndex;
+        private object _rightStaticValue;
        private DataModelVisualizationViewModel _selectedLeftSideProperty;
        private DisplayConditionOperator _selectedOperator;
        private DataModelVisualizationViewModel _selectedRightSideProperty;

        private List<Type> _supportedInputTypes;
-        private object _rightStaticValue;
+        private bool _isInitialized;

        public DisplayConditionPredicateViewModel(DisplayConditionPredicate displayConditionPredicate, DisplayConditionViewModel parent, IProfileEditorService profileEditorService,
            IDataModelVisualizationService dataModelVisualizationService, IDataModelService dataModelService, IEventAggregator eventAggregator)
@@ -56,7 +57,11 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions
        public bool ShowRightSidePropertySelection => DisplayConditionPredicate.PredicateType == PredicateType.Dynamic;
        public bool CanActivateRightSideInputViewModel => SelectedLeftSideProperty?.PropertyInfo != null;

-        public bool IsInitialized { get; private set; }
+        public bool IsInitialized
+        {
+            get => _isInitialized;
+            private set => SetAndNotify(ref _isInitialized, value);
+        }

        public DataModelPropertiesViewModel LeftSideDataModel
        {
@@ -156,6 +161,10 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions
            _supportedInputTypes = editors.Select(e => e.SupportedType).ToList();
            _supportedInputTypes.AddRange(editors.Where(e => e.CompatibleConversionTypes != null).SelectMany(e => e.CompatibleConversionTypes));

+
+            LeftSideDataModel.UpdateRequested += LeftDataModelUpdateRequested;
+            RightSideDataModel.UpdateRequested += RightDataModelUpdateRequested;
+
            IsInitialized = true;
            Update();
        }
@@ -192,6 +201,8 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions
        public void ApplyLeftSide()
        {
            DisplayConditionPredicate.UpdateLeftSide(SelectedLeftSideProperty.DataModel, SelectedLeftSideProperty.PropertyPath);
+            _profileEditorService.UpdateSelectedProfileElement();
+
            SelectedOperator = DisplayConditionPredicate.Operator;
            Update();
        }
@@ -199,6 +210,8 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions
        public void ApplyRightSideDynamic()
        {
            DisplayConditionPredicate.UpdateRightSide(SelectedRightSideProperty.DataModel, SelectedRightSideProperty.PropertyPath);
+            _profileEditorService.UpdateSelectedProfileElement();
+
            Update();
        }

@@ -207,6 +220,8 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions
            if (isSubmitted)
            {
                DisplayConditionPredicate.UpdateRightSide(value);
+                _profileEditorService.UpdateSelectedProfileElement();
+
                Update();
            }

@@ -219,6 +234,8 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions
        public void ApplyOperator()
        {
            DisplayConditionPredicate.UpdateOperator(SelectedOperator);
+            _profileEditorService.UpdateSelectedProfileElement();
+
            Update();
        }

@@ -237,6 +254,18 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions
            _eventAggregator.Subscribe(this);
        }

+        private void RightDataModelUpdateRequested(object sender, EventArgs e)
+        {
+            if (DisplayConditionPredicate.PredicateType == PredicateType.Dynamic)
+                SelectedRightSideProperty = LeftSideDataModel.GetChildForCondition(DisplayConditionPredicate, DisplayConditionSide.Right);
+        }
+
+        private void LeftDataModelUpdateRequested(object sender, EventArgs e)
+        {
+            if (DisplayConditionPredicate.PredicateType == PredicateType.Static)
+                LeftSideDataModel.ApplyTypeFilter(false, _supportedInputTypes.ToArray());
+        }
+
        private void ExecuteSelectLeftProperty(object context)
        {
            if (!(context is DataModelVisualizationViewModel dataModelVisualizationViewModel))
@@ -1,73 +1,71 @@
 <UserControl
-             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.DisplayConditions"
-             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
-             xmlns:s="https://github.com/canton7/Stylet"
-             xmlns:Converters="clr-namespace:Artemis.UI.Converters" x:Class="Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions.DisplayConditionsView"
-             mc:Ignorable="d"
-             d:DesignHeight="450" d:DesignWidth="800"
-             d:DataContext="{d:DesignInstance {x:Type local:DisplayConditionsViewModel}}">
-    <UserControl.Resources>
-        <Converters:InverseBooleanConverter x:Key="InverseBooleanConverter"/>
-    </UserControl.Resources>
+    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.DisplayConditions"
+    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
+    xmlns:s="https://github.com/canton7/Stylet"
+    x:Class="Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions.DisplayConditionsView"
+    mc:Ignorable="d"
+    d:DesignHeight="450" d:DesignWidth="800"
+    d:DataContext="{d:DesignInstance {x:Type local:DisplayConditionsViewModel}}">
    <Grid>
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="Auto" />
-            <ColumnDefinition Width="*" />
-        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
-        <TextBlock Grid.ColumnSpan="2" Style="{StaticResource MaterialDesignSubtitle1TextBlock}" Margin="10 5 0 -4"><Run Text="Display conditions"/></TextBlock>
-        <Separator Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Style="{StaticResource MaterialDesignDarkSeparator}" Margin="8 0" />
+        <TextBlock Style="{StaticResource MaterialDesignSubtitle1TextBlock}" Margin="10 5 0 -4">
+            Display conditions
+        </TextBlock>
+        <Separator Grid.Row="1" Grid.Column="0" Style="{StaticResource MaterialDesignDarkSeparator}" Margin="8 0" />

-        <Grid Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">
+        <Grid Grid.Row="2" Grid.Column="0">
            <ScrollViewer Margin="8 0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
                <ContentControl s:View.Model="{Binding RootGroup}" />
            </ScrollViewer>
        </Grid>

-        <StackPanel Grid.Row="3" Grid.Column="0" Margin="13" Orientation="Horizontal" VerticalAlignment="Bottom" ToolTip="When conditions are met, only go through the entire timeline once.">
-            <CheckBox Style="{StaticResource MaterialDesignCheckBox}" Content="Play once" IsChecked="{Binding RenderProfileElement.RepeatMainSegment, Converter={StaticResource InverseBooleanConverter}, Mode=OneWay}"/>
-        </StackPanel>
-
-        <StackPanel Grid.Row="3" Grid.Column="1" Margin="10" HorizontalAlignment="Right">
-            <TextBlock><Run Text="When conditions no longer met"/></TextBlock>
-            <ListBox Style="{StaticResource MaterialDesignToolToggleListBox}" SelectedIndex="{Binding CurrentTimelineIndex}" Height="20" Margin="0 5 0 0">
+        <StackPanel Grid.Row="3" Margin="10" HorizontalAlignment="Right" Orientation="Horizontal">
+            <TextBlock VerticalAlignment="Center" Margin="0 0 10 0">When conditions no longer met</TextBlock>
+            <ListBox Style="{StaticResource MaterialDesignToolToggleListBox}" SelectedIndex="{Binding ConditionBehaviourIndex}" IsEnabled="{Binding ConditionBehaviourEnabled}" Height="22">
                <ListBoxItem Padding="10 0">
                    <ListBoxItem.ToolTip>
                        <ToolTip Placement="Top" VerticalOffset="-5">
                            <StackPanel>
-                                <TextBlock><Run Text="When conditions are no longer met, finish the timelines and then stop displaying."/></TextBlock>
+                                <TextBlock>
+                                    When conditions are no longer met, finish the timelines and then stop displaying.
+                                </TextBlock>
                            </StackPanel>
                        </ToolTip>
                    </ListBoxItem.ToolTip>
                    <StackPanel Orientation="Horizontal">
                        <materialDesign:PackIcon Kind="PlayArrow" Width="20" Height="20" Margin="0 -4" />
-                        <TextBlock Margin="5 0 0 0" FontSize="11"><Run Text="WAIT FOR FINISH"/></TextBlock>
+                        <TextBlock Margin="5 0 0 0" FontSize="11">
+                            WAIT FOR FINISH
+                        </TextBlock>
                    </StackPanel>
                </ListBoxItem>
                <ListBoxItem Padding="10 0">
                    <ListBoxItem.ToolTip>
                        <ToolTip Placement="Top" VerticalOffset="-5">
                            <StackPanel>
-                                <TextBlock><Run Text="When conditions are no longer met, stop displaying immediately."/></TextBlock>
+                                <TextBlock>
+                                    When conditions are no longer met, stop displaying immediately.
+                                </TextBlock>
                            </StackPanel>
                        </ToolTip>
                    </ListBoxItem.ToolTip>
                    <StackPanel Orientation="Horizontal">
                        <materialDesign:PackIcon Kind="SkipNext" Width="20" Height="20" Margin="0 -4" />
-                        <TextBlock Margin="5 0 0 0" FontSize="11"><Run Text="SKIP"/></TextBlock>
+                        <TextBlock Margin="5 0 0 0" FontSize="11">
+                            SKIP
+                        </TextBlock>
                    </StackPanel>
                </ListBoxItem>
            </ListBox>
        </StackPanel>
-
    </Grid>
 </UserControl>
@@ -9,12 +9,14 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions
 {
    public class DisplayConditionsViewModel : ProfileEditorPanelViewModel
    {
+        private readonly IProfileEditorService _profileEditorService;
        private readonly IDisplayConditionsVmFactory _displayConditionsVmFactory;
        private DisplayConditionGroupViewModel _rootGroup;
        private RenderProfileElement _renderProfileElement;

        public DisplayConditionsViewModel(IProfileEditorService profileEditorService, IDisplayConditionsVmFactory displayConditionsVmFactory)
        {
+            _profileEditorService = profileEditorService;
            _displayConditionsVmFactory = displayConditionsVmFactory;
            profileEditorService.ProfileElementSelected += ProfileEditorServiceOnProfileElementSelected;
        }
@@ -31,9 +33,28 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions
            set => SetAndNotify(ref _renderProfileElement, value);
        }

+        public int ConditionBehaviourIndex
+        {
+            get => RenderProfileElement != null && RenderProfileElement.AlwaysFinishTimeline ? 0 : 1;
+            set
+            {
+                if (RenderProfileElement == null)
+                    return;
+
+                RenderProfileElement.AlwaysFinishTimeline = value == 0;
+                NotifyOfPropertyChange(nameof(ConditionBehaviourIndex));
+
+                _profileEditorService.UpdateSelectedProfileElement();
+            }
+        }
+
+        public bool ConditionBehaviourEnabled => RenderProfileElement != null;
+
        private void ProfileEditorServiceOnProfileElementSelected(object sender, RenderProfileElementEventArgs e)
        {
            RenderProfileElement = e.RenderProfileElement;
+            NotifyOfPropertyChange(nameof(ConditionBehaviourIndex));
+            NotifyOfPropertyChange(nameof(ConditionBehaviourEnabled));

            if (e.RenderProfileElement == null)
            {
@@ -8,7 +8,9 @@
    xmlns:timeline="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    xmlns:behaviors="clr-namespace:Artemis.UI.Behaviors"
-    xmlns:Converters="clr-namespace:Artemis.UI.Converters" x:Class="Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.LayerPropertiesView"
+    xmlns:Converters="clr-namespace:Artemis.UI.Converters"
+    xmlns:utilities="clr-namespace:Artemis.UI.Utilities"
+    x:Class="Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.LayerPropertiesView"
    mc:Ignorable="d"
    d:DesignHeight="450"
    d:DesignWidth="800"
@@ -16,6 +18,7 @@
    behaviors:InputBindingBehavior.PropagateInputBindingsToWindow="True">
    <UserControl.Resources>
        <Converters:NullToVisibilityConverter x:Key="NullToVisibilityConverter" />
+        <utilities:BindingProxy x:Key="DataContextProxy" Data="{Binding}" />
        <Style x:Key="SvStyle" TargetType="{x:Type ScrollViewer}">
            <Setter Property="OverridesDefaultStyle" Value="True" />
            <Setter Property="Template">
@@ -199,58 +202,78 @@
                                                     Width="{Binding ActualWidth, ElementName=PropertyTimeLine}" />

                    <!-- Start segment -->
-                    <TextBlock Grid.Column="0"
-                               TextAlignment="Center"
-                               VerticalAlignment="Top"
-                               Padding="0 3"
-                               FontSize="11"
-                               Background="{StaticResource MaterialDesignPaper}"
-                               Visibility="{Binding StartSegmentEnabled, Converter={x:Static s:BoolToVisibilityConverter.Instance}}"
-                               ToolTip="This segment is played when a layer starts displaying because it's conditions are met">
-                        Start
-                    </TextBlock>
+                    <Grid Grid.Column="0" VerticalAlignment="Top" Background="{StaticResource MaterialDesignPaper}"
+                          Visibility="{Binding StartSegmentEnabled, Converter={x:Static s:BoolToVisibilityConverter.Instance}}">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="Auto" />
+                        </Grid.ColumnDefinitions>
+                        <TextBlock TextAlignment="Center" Padding="0 3" FontSize="12" ToolTip="This segment is played when a layer starts displaying because it's conditions are met">
+                            Start
+                        </TextBlock>
+                        <Button Grid.Column="1" Style="{StaticResource MaterialDesignIconButton}" ToolTip="Disable start segment" Width="20" Height="20" Margin="0 0 6 0"
+                                Command="{s:Action DisableSegment}" CommandParameter="Start">
+                            <materialDesign:PackIcon Kind="Close" Height="18" Width="18" />
+                        </Button>
+                    </Grid>

                    <!-- Main segment -->
-                    <TextBlock Grid.Column="1"
-                               TextAlignment="Center"
-                               VerticalAlignment="Top"
-                               Padding="0 3"
-                               FontSize="11"
-                               Background="{StaticResource MaterialDesignPaper}"
-                               ToolTip="This segment is played while a condition is met, either once or on a repeating loop">
-                        Main
-                    </TextBlock>
+                    <Grid Grid.Column="1" VerticalAlignment="Top" Background="{StaticResource MaterialDesignPaper}"
+                          Visibility="{Binding MainSegmentEnabled, Converter={x:Static s:BoolToVisibilityConverter.Instance}}">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="Auto" />
+                            <ColumnDefinition Width="Auto" />
+                        </Grid.ColumnDefinitions>
+                        <TextBlock TextAlignment="Center" Padding="0 3" FontSize="12" ToolTip="This segment is played while a condition is met, either once or on a repeating loop">
+                            Main
+                        </TextBlock>
+
+                        <ToggleButton Grid.Column="1" Style="{StaticResource MaterialDesignFlatToggleButton}" ToolTip="Toggle main segment repeat" Width="16" Height="16"
+                                      IsChecked="{Binding RepeatMainSegment}" VerticalAlignment="Center">
+                            <materialDesign:PackIcon Kind="Repeat" Height="12" Width="12" />
+                        </ToggleButton>
+
+                        <Button Grid.Column="2" Style="{StaticResource MaterialDesignIconButton}" ToolTip="Remove" Width="20" Height="20" Margin="5 0 8 0"
+                                Command="{s:Action DisableSegment}" CommandParameter="Main">
+                            <materialDesign:PackIcon Kind="Close" Height="18" Width="18" />
+                        </Button>
+                    </Grid>

                    <!-- End segment -->
-                    <TextBlock Grid.Column="2"
-                               TextAlignment="Center"
-                               VerticalAlignment="Top"
-                               Padding="0 3"
-                               FontSize="11"
-                               Background="{StaticResource MaterialDesignPaper}"
-                               Visibility="{Binding EndSegmentEnabled, Converter={x:Static s:BoolToVisibilityConverter.Instance}}"
-                               ToolTip="This segment is played once a condition is no longer met">
-                        End
-                    </TextBlock>
+                    <Grid Grid.Column="2" VerticalAlignment="Top" Background="{StaticResource MaterialDesignPaper}"
+                          Visibility="{Binding EndSegmentEnabled, Converter={x:Static s:BoolToVisibilityConverter.Instance}}">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="Auto" />
+                        </Grid.ColumnDefinitions>
+                        <TextBlock TextAlignment="Center" Padding="0 3" FontSize="12" ToolTip="This segment is played once a condition is no longer met">
+                            End
+                        </TextBlock>
+                        <Button Grid.Column="1" Style="{StaticResource MaterialDesignIconButton}" ToolTip="Disable end segment" Width="20" Height="20" Margin="0 0 6 0"
+                                Command="{s:Action DisableSegment}" CommandParameter="End">
+                            <materialDesign:PackIcon Kind="Close" Height="18" Width="18" />
+                        </Button>
+                    </Grid>

                    <!-- Segment movement display -->
-                    <Rectangle Grid.Column="0" RadiusX="2" RadiusY="2" Fill="{DynamicResource PrimaryHueDarkBrush}" Margin="0 -1 -2 0" Width="5" Height="20" VerticalAlignment="Top"
+                    <Rectangle Grid.Column="0" RadiusX="2" RadiusY="2" Fill="{DynamicResource PrimaryHueDarkBrush}" Margin="0 -2 -2 0" Width="5" Height="24" VerticalAlignment="Top"
                               HorizontalAlignment="Right" Visibility="{Binding StartSegmentEnabled, Converter={x:Static s:BoolToVisibilityConverter.Instance}}" />
-                    <Rectangle Grid.Column="1" RadiusX="2" RadiusY="2" Fill="{DynamicResource PrimaryHueDarkBrush}" Margin="0 -1 -2 0" Width="5" Height="20" VerticalAlignment="Top"
-                               HorizontalAlignment="Right" />
-                    <Rectangle Grid.Column="2" RadiusX="2" RadiusY="2" Fill="{DynamicResource PrimaryHueDarkBrush}" Margin="0 -1 -2 0" Width="5" Height="20" VerticalAlignment="Top"
+                    <Rectangle Grid.Column="1" RadiusX="2" RadiusY="2" Fill="{DynamicResource PrimaryHueDarkBrush}" Margin="0 -2 -2 0" Width="5" Height="24" VerticalAlignment="Top"
+                               HorizontalAlignment="Right" Visibility="{Binding MainSegmentEnabled, Converter={x:Static s:BoolToVisibilityConverter.Instance}}" />
+                    <Rectangle Grid.Column="2" RadiusX="2" RadiusY="2" Fill="{DynamicResource PrimaryHueDarkBrush}" Margin="0 -2 -2 0" Width="5" Height="24" VerticalAlignment="Top"
                               HorizontalAlignment="Right" Visibility="{Binding EndSegmentEnabled, Converter={x:Static s:BoolToVisibilityConverter.Instance}}" />

                    <!-- Segment movement handles -->
-                    <Rectangle Grid.Column="0" RadiusX="2" RadiusY="2" Fill="Transparent" Margin="0 -1 -6 0" Width="16" Height="20" VerticalAlignment="Top"
-                               HorizontalAlignment="Right" Cursor="SizeWE" Visibility="{Binding StartSegmentEnabled, Converter={x:Static s:BoolToVisibilityConverter.Instance}}" 
-                               MouseDown="{s:Action StartSegmentMouseDown}" MouseUp="{s:Action StartSegmentMouseUp}" MouseMove="{s:Action SegmentMouseMove}"/>
-                    <Rectangle Grid.Column="1" RadiusX="2" RadiusY="2" Fill="Transparent" Margin="0 -1 -6 0" Width="16" Height="20" VerticalAlignment="Top"
-                               HorizontalAlignment="Right" Cursor="SizeWE"
-                               MouseDown="{s:Action MainSegmentMouseDown}" MouseUp="{s:Action MainSegmentMouseUp}" MouseMove="{s:Action SegmentMouseMove}"/>
-                    <Rectangle Grid.Column="2" RadiusX="2" RadiusY="2" Fill="Transparent" Margin="0 -1 -6 0" Width="16" Height="20" VerticalAlignment="Top"
-                               HorizontalAlignment="Right" Cursor="SizeWE" Visibility="{Binding EndSegmentEnabled, Converter={x:Static s:BoolToVisibilityConverter.Instance}}" 
-                               MouseDown="{s:Action EndSegmentMouseDown}" MouseUp="{s:Action EndSegmentMouseUp}" MouseMove="{s:Action SegmentMouseMove}"/>
+                    <Rectangle Grid.Column="0" RadiusX="2" RadiusY="2" Fill="Transparent" Margin="0 -1 -6 0" Width="16" Height="25" VerticalAlignment="Top"
+                               HorizontalAlignment="Right" Cursor="SizeWE" Visibility="{Binding StartSegmentEnabled, Converter={x:Static s:BoolToVisibilityConverter.Instance}}"
+                               MouseDown="{s:Action StartSegmentMouseDown}" MouseUp="{s:Action StartSegmentMouseUp}" MouseMove="{s:Action SegmentMouseMove}" />
+                    <Rectangle Grid.Column="1" RadiusX="2" RadiusY="2" Fill="Transparent" Margin="0 -1 -6 0" Width="16" Height="25" VerticalAlignment="Top"
+                               HorizontalAlignment="Right" Cursor="SizeWE" Visibility="{Binding MainSegmentEnabled, Converter={x:Static s:BoolToVisibilityConverter.Instance}}"
+                               MouseDown="{s:Action MainSegmentMouseDown}" MouseUp="{s:Action MainSegmentMouseUp}" MouseMove="{s:Action SegmentMouseMove}" />
+                    <Rectangle Grid.Column="2" RadiusX="2" RadiusY="2" Fill="Transparent" Margin="0 -1 -6 0" Width="16" Height="25" VerticalAlignment="Top"
+                               HorizontalAlignment="Right" Cursor="SizeWE" Visibility="{Binding EndSegmentEnabled, Converter={x:Static s:BoolToVisibilityConverter.Instance}}"
+                               MouseDown="{s:Action EndSegmentMouseDown}" MouseUp="{s:Action EndSegmentMouseUp}" MouseMove="{s:Action SegmentMouseMove}" />
                </Grid>
            </ScrollViewer>

@@ -348,19 +371,59 @@
              Background="{DynamicResource MaterialDesignCardBackground}">

            <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

-            <StackPanel Grid.Column="0" Orientation="Horizontal">
-                <CheckBox Style="{StaticResource MaterialDesignCheckBox}" IsChecked="{Binding StartSegmentEnabled}">
-                    Enable start segment
-                </CheckBox>
-
-                <CheckBox Style="{StaticResource MaterialDesignCheckBox}" Margin="10 0" IsChecked="{Binding EndSegmentEnabled}">
-                    Enable end segment
-                </CheckBox>
-            </StackPanel>
+            <Button Grid.Column="0"
+                    Margin="5 -2 0 -2"
+                    Padding="10 0"
+                    Height="20"
+                    Width="110"
+                    ToolTip="Select an effect to add"
+                    VerticalAlignment="Center"
+                    Visibility="{Binding PropertyTreeVisible, Converter={x:Static s:BoolToVisibilityConverter.Instance}}"
+                    IsEnabled="{Binding CanAddSegment}">
+                <Button.Style>
+                    <Style TargetType="{x:Type Button}" BasedOn="{StaticResource MaterialDesignFlatMidBgButton}">
+                        <Style.Triggers>
+                            <EventTrigger RoutedEvent="Click">
+                                <EventTrigger.Actions>
+                                    <BeginStoryboard>
+                                        <Storyboard>
+                                            <BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="ContextMenu.IsOpen">
+                                                <DiscreteBooleanKeyFrame KeyTime="0:0:0" Value="True" />
+                                            </BooleanAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </BeginStoryboard>
+                                </EventTrigger.Actions>
+                            </EventTrigger>
+                        </Style.Triggers>
+                    </Style>
+                </Button.Style>
+                <Button.ContextMenu>
+                    <ContextMenu>
+                        <ContextMenu.Resources>
+                            <Converters:InverseBooleanConverter x:Key="InverseBooleanConverter" />
+                        </ContextMenu.Resources>
+                        <MenuItem Header="Start"
+                                  Command="{s:Action EnableSegment}"
+                                  CommandParameter="Start"
+                                  IsEnabled="{Binding Data.StartSegmentEnabled, Converter={StaticResource InverseBooleanConverter}, Source={StaticResource DataContextProxy}}" />
+                        <MenuItem Header="Main"
+                                  Command="{s:Action EnableSegment}"
+                                  CommandParameter="Main"
+                                  IsEnabled="{Binding Data.MainSegmentEnabled, Converter={StaticResource InverseBooleanConverter}, Source={StaticResource DataContextProxy}}" />
+                        <MenuItem Header="End"
+                                  Command="{s:Action EnableSegment}"
+                                  CommandParameter="End"
+                                  IsEnabled="{Binding Data.EndSegmentEnabled, Converter={StaticResource InverseBooleanConverter}, Source={StaticResource DataContextProxy}}" />
+                    </ContextMenu>
+                </Button.ContextMenu>
+                <TextBlock FontSize="11">
+                    ADD SEGMENT
+                </TextBlock>
+            </Button>

            <!-- Zoom control -->
            <Slider Grid.Column="1"
@@ -371,7 +434,7 @@
                    Maximum="350"
                    TickFrequency="1"
                    IsSnapToTickEnabled="True"
-                     AutoToolTipPlacement="TopLeft"
+                    AutoToolTipPlacement="TopLeft"
                    Value="{Binding ProfileEditorService.PixelsPerSecond}"
                    Width="319" />

@@ -102,27 +102,6 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties
        public Layer SelectedLayer => SelectedProfileElement as Layer;
        public Folder SelectedFolder => SelectedProfileElement as Folder;

-        public bool StartSegmentEnabled
-        {
-            get => SelectedProfileElement?.StartSegmentLength != TimeSpan.Zero;
-            set
-            {
-                SelectedProfileElement.StartSegmentLength = value ? TimeSpan.FromSeconds(1) : TimeSpan.Zero;
-                ProfileEditorService.UpdateSelectedProfileElement();
-                NotifyOfPropertyChange(nameof(StartSegmentEnabled));
-            }
-        }
-
-        public bool EndSegmentEnabled
-        {
-            get => SelectedProfileElement?.EndSegmentLength != TimeSpan.Zero;
-            set
-            {
-                SelectedProfileElement.EndSegmentLength = value ? TimeSpan.FromSeconds(1) : TimeSpan.Zero;
-                ProfileEditorService.UpdateSelectedProfileElement();
-                NotifyOfPropertyChange(nameof(EndSegmentEnabled));
-            }
-        }

        public BindableCollection<LayerPropertyGroupViewModel> LayerPropertyGroups
        {
@@ -586,10 +565,79 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties

        #region Segments

+        public bool StartSegmentEnabled
+        {
+            get => SelectedProfileElement?.StartSegmentLength != TimeSpan.Zero;
+            set
+            {
+                SelectedProfileElement.StartSegmentLength = value ? TimeSpan.FromSeconds(1) : TimeSpan.Zero;
+                ProfileEditorService.UpdateSelectedProfileElement();
+                NotifyOfPropertyChange(nameof(StartSegmentEnabled));
+                NotifyOfPropertyChange(nameof(CanAddSegment));
+            }
+        }
+        
+        public bool MainSegmentEnabled
+        {
+            get => SelectedProfileElement?.MainSegmentLength != TimeSpan.Zero;
+            set
+            {
+                SelectedProfileElement.MainSegmentLength = value ? TimeSpan.FromSeconds(1) : TimeSpan.Zero;
+                ProfileEditorService.UpdateSelectedProfileElement();
+                NotifyOfPropertyChange(nameof(MainSegmentEnabled));
+                NotifyOfPropertyChange(nameof(CanAddSegment));
+            }
+        }
+
+        public bool EndSegmentEnabled
+        {
+            get => SelectedProfileElement?.EndSegmentLength != TimeSpan.Zero;
+            set
+            {
+                SelectedProfileElement.EndSegmentLength = value ? TimeSpan.FromSeconds(1) : TimeSpan.Zero;
+                ProfileEditorService.UpdateSelectedProfileElement();
+                NotifyOfPropertyChange(nameof(EndSegmentEnabled));
+                NotifyOfPropertyChange(nameof(CanAddSegment));
+            }
+        }
+
+        public bool CanAddSegment => !StartSegmentEnabled || !MainSegmentEnabled || !EndSegmentEnabled;
+
+        public bool RepeatMainSegment
+        {
+            get => SelectedProfileElement?.RepeatMainSegment ?? false;
+            set
+            {
+                SelectedProfileElement.RepeatMainSegment = value;
+                ProfileEditorService.UpdateSelectedProfileElement();
+                NotifyOfPropertyChange(nameof(RepeatMainSegment));
+            }
+        }
+
        private bool _draggingStartSegment;
        private bool _draggingMainSegment;
        private bool _draggingEndSegment;

+        public void DisableSegment(string segment)
+        {
+            if (segment == "Start")
+                StartSegmentEnabled = false;
+            else if (segment == "Main")
+                MainSegmentEnabled = false;
+            else if (segment == "End")
+                EndSegmentEnabled = false;
+        }
+
+        public void EnableSegment(string segment)
+        {
+            if (segment == "Start")
+                StartSegmentEnabled = true;
+            else if (segment == "Main")
+                MainSegmentEnabled = true;
+            else if (segment == "End")
+                EndSegmentEnabled = true;
+        }
+
        public void StartSegmentMouseDown(object sender, MouseButtonEventArgs e)
        {
            ((IInputElement) sender).CaptureMouse();