Databindings - Added conditional databindings

Conditions - Added easy method for null-handling in operators
2026-11-12 11:56:30 +00:00 · 2020-09-23 19:26:44 +02:00
1 parent b19cc6ca54
commit b73ea53622
@@ -142,6 +142,15 @@ namespace Artemis.UI.Screens.ProfileEditor.Conditions

            if (IsRootGroup && Parent is DisplayConditionsViewModel displayConditionsViewModel)
                displayConditionsViewModel.DisplayStartHint = !Items.Any();
+
+            OnUpdated();
+        }
+
+        public event EventHandler Updated;
+
+        protected virtual void OnUpdated()
+        {
+            Updated?.Invoke(this, EventArgs.Empty);
        }
    }
 }
@@ -157,6 +157,7 @@ namespace Artemis.UI.Screens.ProfileEditor.Conditions
                    RightSideInputViewModel.ValueUpdated += RightSideOnValueEntered;
                }

+                RightSideInputViewModel.Value = DataModelConditionPredicate.RightStaticValue;
                if (RightSideInputViewModel.TargetType != targetType)
                    RightSideInputViewModel.UpdateTargetType(targetType);
            }
@@ -4,17 +4,78 @@
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
+             xmlns:s="https://github.com/canton7/Stylet"
+             xmlns:dd="urn:gong-wpf-dragdrop" xmlns:Converters="clr-namespace:Artemis.UI.Converters"
+             xmlns:utilities="clr-namespace:Artemis.UI.Utilities"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
-    <Grid>
-        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Top" Margin="16">
-            <materialDesign:PackIcon Kind="Crane" Width="60" Height="60" HorizontalAlignment="Center" />
-            <TextBlock Style="{StaticResource MaterialDesignHeadline6TextBlock}" TextWrapping="Wrap" HorizontalAlignment="Center" Margin="0 25">
-                Conditional data bindings not yet implemented
-            </TextBlock>
-            <TextBlock Style="{StaticResource MaterialDesignBody1TextBlock}" TextWrapping="Wrap" HorizontalAlignment="Center">
-               This is where you'd provide values and their conditions.. :>
-            </TextBlock>
-        </StackPanel>
+    <UserControl.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="pack://application:,,,/Artemis.UI;component/ResourceDictionaries/DataModelConditions.xaml" />
+                <ResourceDictionary>
+                    <Converters:NullToVisibilityConverter x:Key="NullToVisibilityConverter" />
+                    <utilities:BindingProxy x:Key="DataContextProxy" Data="{Binding}" />
+                </ResourceDictionary>
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </UserControl.Resources>
+    <Grid Margin="5 10 0 0">
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <Button Grid.Row="0"
+                Style="{StaticResource DataModelConditionButtonLeftClickMenu}"
+                Background="{StaticResource PrimaryHueMidBrush}"
+                BorderBrush="{StaticResource PrimaryHueMidBrush}"
+                HorizontalAlignment="Right">
+            ADD CONDITION
+            <Button.ContextMenu>
+                <ContextMenu>
+                    <MenuItem Header="Add static condition"
+                              ToolTip="A condition that compares with a static input"
+                              Command="{s:Action AddCondition}"
+                              CommandParameter="Static">
+                        <MenuItem.Icon>
+                            <materialDesign:PackIcon Kind="FormTextarea" />
+                        </MenuItem.Icon>
+                    </MenuItem>
+                    <MenuItem Header="Add dynamic condition"
+                              ToolTip="A condition that compares with a data model property"
+                              Command="{s:Action AddCondition}"
+                              CommandParameter="Dynamic">
+                        <MenuItem.Icon>
+                            <materialDesign:PackIcon Kind="Link" />
+                        </MenuItem.Icon>
+                    </MenuItem>
+                    <MenuItem Header="Add list condition"
+                              ToolTip="A condition that evaluates on items in a list"
+                              Command="{s:Action AddCondition}"
+                              CommandParameter="List">
+                        <MenuItem.Icon>
+                            <materialDesign:PackIcon Kind="FormatListBulleted" />
+                        </MenuItem.Icon>
+                    </MenuItem>
+                </ContextMenu>
+            </Button.ContextMenu>
+        </Button>
+
+        <ListBox Grid.Row="1"
+                 ItemsSource="{Binding ConditionViewModels}"
+                 materialDesign:RippleAssist.IsDisabled="True"
+                 dd:DragDrop.IsDragSource="True"
+                 dd:DragDrop.IsDropTarget="True"
+                 dd:DragDrop.UseDefaultDragAdorner="True"
+                 HorizontalContentAlignment="Stretch"
+                 ScrollViewer.CanContentScroll="False"
+                 Margin="0 5 0 0">
+            <ListBox.ItemTemplate>
+                <DataTemplate>
+                    <ContentControl s:View.Model="{Binding}" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" IsTabStop="False" />
+                </DataTemplate>
+            </ListBox.ItemTemplate>
+        </ListBox>
    </Grid>
-</UserControl>
+</UserControl>
@@ -1,28 +1,120 @@
-using Artemis.Core;
+using System;
+using System.Collections.Specialized;
+using System.Linq;
+using Artemis.Core;
+using Artemis.UI.Extensions;
+using Artemis.UI.Ninject.Factories;
+using Artemis.UI.Shared.Services;
 using Stylet;

 namespace Artemis.UI.Screens.ProfileEditor.LayerProperties.DataBindings.ConditionalDataBinding
 {
    public class ConditionalDataBindingModeViewModel<TLayerProperty, TProperty> : Screen, IDataBindingModeViewModel
    {
-        public ConditionalDataBindingModeViewModel(ConditionalDataBinding<TLayerProperty, TProperty> conditionalDataBinding)
+        private readonly IProfileEditorService _profileEditorService;
+        private readonly IDataBindingsVmFactory _dataBindingsVmFactory;
+        private bool _updating;
+
+        public ConditionalDataBindingModeViewModel(ConditionalDataBinding<TLayerProperty, TProperty> conditionalDataBinding,
+            IProfileEditorService profileEditorService,
+            IDataBindingsVmFactory dataBindingsVmFactory)
        {
+            _profileEditorService = profileEditorService;
+            _dataBindingsVmFactory = dataBindingsVmFactory;
+
            ConditionalDataBinding = conditionalDataBinding;
+            ConditionViewModels = new BindableCollection<DataBindingConditionViewModel<TLayerProperty, TProperty>>();
+
+            Initialize();
        }

        public ConditionalDataBinding<TLayerProperty, TProperty> ConditionalDataBinding { get; }
-
-        public void Dispose()
-        {
-        }
+        public BindableCollection<DataBindingConditionViewModel<TLayerProperty, TProperty>> ConditionViewModels { get; }

        public void Update()
        {
+            UpdateConditionViewModels();
        }

        public object GetTestValue()
        {
-            return null;
+            return ConditionalDataBinding.DataBinding.Converter.GetValue();
        }
+
+        public void AddCondition(string type)
+        {
+            var condition = ConditionalDataBinding.AddCondition();
+            
+            // Find the VM of the new condition
+            var viewModel = ConditionViewModels.First(c => c.DataBindingCondition == condition);
+            viewModel.ActiveItem.AddCondition(type);
+
+            _profileEditorService.UpdateSelectedProfileElement();
+        }
+
+        private void UpdateConditionViewModels()
+        {
+            _updating = true;
+
+            // Remove old VMs
+            var toRemove = ConditionViewModels.Where(c => !ConditionalDataBinding.Conditions.Contains(c.DataBindingCondition)).ToList();
+            foreach (var dataBindingConditionViewModel in toRemove) { 
+                ConditionViewModels.Remove(dataBindingConditionViewModel);
+                dataBindingConditionViewModel.Dispose();
+            }
+
+            // Add missing VMs
+            foreach (var condition in ConditionalDataBinding.Conditions)
+            {
+                if (ConditionViewModels.All(c => c.DataBindingCondition != condition))
+                    ConditionViewModels.Add(_dataBindingsVmFactory.DataBindingConditionViewModel(condition));
+            }
+
+            // Fix order
+            ConditionViewModels.Sort(c => c.DataBindingCondition.Order);
+            
+            _updating = false;
+        }
+
+        private void Initialize()
+        {
+            ConditionalDataBinding.ConditionsUpdated += ConditionalDataBindingOnConditionsUpdated;
+            ConditionViewModels.CollectionChanged += ConditionViewModelsOnCollectionChanged;
+            UpdateConditionViewModels();
+        }
+
+        private void ConditionViewModelsOnCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
+        {
+            if (_updating || e.Action != NotifyCollectionChangedAction.Add)
+                return;
+
+            for (var index = 0; index < ConditionViewModels.Count; index++)
+            {
+                var conditionViewModel = ConditionViewModels[index];
+                conditionViewModel.DataBindingCondition.Order = index + 1;
+            }
+
+            ConditionalDataBinding.ApplyOrder();
+
+            _profileEditorService.UpdateSelectedProfileElement();
+        }
+
+        private void ConditionalDataBindingOnConditionsUpdated(object sender, EventArgs e)
+        {
+            UpdateConditionViewModels();
+        }
+
+        #region IDisposable
+
+        public void Dispose()
+        {
+            ConditionalDataBinding.ConditionsUpdated -= ConditionalDataBindingOnConditionsUpdated;
+
+            foreach (var conditionViewModel in ConditionViewModels)
+                conditionViewModel.Dispose();
+            ConditionViewModels.Clear();
+        }
+
+        #endregion
    }
 }
@@ -0,0 +1,27 @@
+<UserControl x:Class="Artemis.UI.Screens.ProfileEditor.LayerProperties.DataBindings.ConditionalDataBinding.DataBindingConditionView"
+             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:s="https://github.com/canton7/Stylet"
+             mc:Ignorable="d"
+             d:DesignHeight="450" d:DesignWidth="800">
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="Auto" />
+        </Grid.RowDefinitions>
+        <ContentControl Grid.Row="0"
+                        s:View.Model="{Binding ActiveItem}"
+                        VerticalContentAlignment="Stretch"
+                        HorizontalContentAlignment="Stretch"
+                        IsTabStop="False" />
+
+        <ContentControl Grid.Row="1"
+                        Margin="26 5 0 0"
+                        s:View.Model="{Binding ValueViewModel}"
+                        VerticalContentAlignment="Stretch"
+                        HorizontalContentAlignment="Stretch"
+                        IsTabStop="False" />
+    </Grid>
+</UserControl>
@@ -0,0 +1,56 @@
+using System;
+using System.Linq;
+using Artemis.Core;
+using Artemis.UI.Ninject.Factories;
+using Artemis.UI.Screens.ProfileEditor.Conditions;
+using Artemis.UI.Shared;
+using Artemis.UI.Shared.Input;
+using Artemis.UI.Shared.Services;
+using Stylet;
+
+namespace Artemis.UI.Screens.ProfileEditor.LayerProperties.DataBindings.ConditionalDataBinding
+{
+    public class DataBindingConditionViewModel<TLayerProperty, TProperty> : Conductor<DataModelConditionGroupViewModel>, IDisposable
+    {
+        private readonly IProfileEditorService _profileEditorService;
+
+        public DataBindingConditionViewModel(DataBindingCondition<TLayerProperty, TProperty> dataBindingCondition,
+            IProfileEditorService profileEditorService,
+            IDataModelConditionsVmFactory dataModelConditionsVmFactory,
+            IDataModelUIService dataModelUIService)
+        {
+            _profileEditorService = profileEditorService;
+            DataBindingCondition = dataBindingCondition;
+
+            ActiveItem = dataModelConditionsVmFactory.DataModelConditionGroupViewModel(DataBindingCondition.Condition, false);
+            ActiveItem.IsRootGroup = true;
+            ActiveItem.Update();
+            ActiveItem.Updated += ActiveItemOnUpdated;
+
+            ValueViewModel = dataModelUIService.GetStaticInputViewModel(typeof(TProperty));
+            ValueViewModel.ValueUpdated += ValueViewModelOnValueUpdated;
+            ValueViewModel.Value = DataBindingCondition.Value;
+        }
+
+        private void ActiveItemOnUpdated(object sender, EventArgs e)
+        {
+            if (!ActiveItem.GetChildren().Any())
+                DataBindingCondition.ConditionalDataBinding.RemoveCondition(DataBindingCondition);
+        }
+
+        private void ValueViewModelOnValueUpdated(object sender, DataModelInputStaticEventArgs e)
+        {
+            DataBindingCondition.Value = (TProperty) Convert.ChangeType(e.Value, typeof(TProperty));
+            _profileEditorService.UpdateSelectedProfileElement();
+        }
+
+        public DataBindingCondition<TLayerProperty, TProperty> DataBindingCondition { get; }
+
+        public DataModelStaticViewModel ValueViewModel { get; set; }
+
+        public void Dispose()
+        {
+            ValueViewModel.Dispose();
+        }
+    }
+}
@@ -4,7 +4,6 @@
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
-             xmlns:dd="urn:gong-wpf-dragdrop"
             xmlns:s="https://github.com/canton7/Stylet"
             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800">
@@ -16,28 +15,27 @@
        </ResourceDictionary>
    </UserControl.Resources>

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

-            <materialDesign:Card Grid.Column="0" 
+        <materialDesign:Card Grid.Column="0" 
                                 UniformCornerRadius="0" 
                                 materialDesign:ShadowAssist.ShadowDepth="Depth3"
                                 materialDesign:ShadowAssist.ShadowEdges="Right"
                                 Background="{DynamicResource MaterialDesignPaper}" 
                                 Panel.ZIndex="2">
-                <Grid Margin="10 5" >
-                    <Grid.RowDefinitions>
-                        <RowDefinition Height="48" />
-                        <RowDefinition Height="48" />
-                        <RowDefinition Height="48" />
-                        <RowDefinition Height="Auto" />
-                    </Grid.RowDefinitions>
+            <Grid Margin="10 5" >
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="48" />
+                    <RowDefinition Height="48" />
+                    <RowDefinition Height="48" />
+                    <RowDefinition Height="Auto" />
+                </Grid.RowDefinitions>

-                    <ComboBox Grid.Row="0"
+                <ComboBox Grid.Row="0"
                          Style="{StaticResource MaterialDesignFloatingHintComboBox}"
                          materialDesign:HintAssist.Hint="Data binding mode"
                          MinWidth="128"
@@ -45,67 +43,67 @@
                          ItemsSource="{Binding DataBindingModes}" 
                          SelectedValuePath="Value"
                          DisplayMemberPath="Description" >
-                    </ComboBox>
+                </ComboBox>

-                    <StackPanel Grid.Row="1">
-                        <TextBox Style="{StaticResource MaterialDesignFloatingHintTextBox}"
+                <StackPanel Grid.Row="1">
+                    <TextBox Style="{StaticResource MaterialDesignFloatingHintTextBox}"
                             Text="{Binding EasingTime}"
                             materialDesign:TextFieldAssist.HasClearButton="True"
                             materialDesign:TextFieldAssist.SuffixText="ms"
                             materialDesign:HintAssist.Hint="Easing time"
                             IsEnabled="{Binding IsDataBindingEnabled}" />
-                    </StackPanel>
+                </StackPanel>

-                    <ComboBox Grid.Row="2"
+                <ComboBox Grid.Row="2"
                          Style="{StaticResource MaterialDesignFloatingHintComboBox}"
                          materialDesign:HintAssist.Hint="Easing type"
                          MinWidth="128"
                          IsEnabled="{Binding IsEasingTimeEnabled}"
                          SelectedItem="{Binding SelectedEasingViewModel}"
                          ItemsSource="{Binding EasingViewModels}">
-                        <ComboBox.ItemsPanel>
-                            <ItemsPanelTemplate>
-                                <VirtualizingStackPanel />
-                            </ItemsPanelTemplate>
-                        </ComboBox.ItemsPanel>
-                        <ComboBox.ItemTemplate>
-                            <DataTemplate>
-                                <StackPanel Orientation="Horizontal">
-                                    <Polyline Stroke="{DynamicResource MaterialDesignBody}"
+                    <ComboBox.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <VirtualizingStackPanel />
+                        </ItemsPanelTemplate>
+                    </ComboBox.ItemsPanel>
+                    <ComboBox.ItemTemplate>
+                        <DataTemplate>
+                            <StackPanel Orientation="Horizontal">
+                                <Polyline Stroke="{DynamicResource MaterialDesignBody}"
                                          StrokeThickness="1"
                                          Points="{Binding EasingPoints}"
                                          Stretch="Uniform"
                                          Width="14"
                                          Height="14"
                                          Margin="0 0 10 0" />
-                                    <TextBlock Text="{Binding Description}" />
-                                </StackPanel>
-                            </DataTemplate>
-                        </ComboBox.ItemTemplate>
-                    </ComboBox>
+                                <TextBlock Text="{Binding Description}" />
+                            </StackPanel>
+                        </DataTemplate>
+                    </ComboBox.ItemTemplate>
+                </ComboBox>

-                    <materialDesign:Card Grid.Row="3" Grid.ColumnSpan="2" Margin="0 5 0 0">
-                        <Grid>
-                            <Grid.RowDefinitions>
-                                <RowDefinition Height="Auto" />
-                                <RowDefinition Height="Auto" />
-                                <RowDefinition Height="Auto" />
-                            </Grid.RowDefinitions>
-                            <TextBlock Grid.Row="0" Margin="10 10 4 0">
+                <materialDesign:Card Grid.Row="3" Grid.ColumnSpan="2" Margin="0 5 0 0">
+                    <Grid>
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="Auto" />
+                            <RowDefinition Height="Auto" />
+                            <RowDefinition Height="Auto" />
+                        </Grid.RowDefinitions>
+                        <TextBlock Grid.Row="0" Margin="10 10 4 0">
                            Test result
-                            </TextBlock>
-                            <Separator Grid.Row="1" Style="{StaticResource MaterialDesignLightSeparator}" Margin="0" />
-                            <Grid Grid.Row="2" Margin="10 4 10 10">
-                                <Grid.ColumnDefinitions>
-                                    <ColumnDefinition />
-                                    <ColumnDefinition />
-                                </Grid.ColumnDefinitions>
-                                <Grid.RowDefinitions>
-                                    <RowDefinition />
-                                    <RowDefinition />
-                                </Grid.RowDefinitions>
-                                <TextBlock Margin="0 2">Input</TextBlock>
-                                <ContentControl Grid.Row="0"
+                        </TextBlock>
+                        <Separator Grid.Row="1" Style="{StaticResource MaterialDesignLightSeparator}" Margin="0" />
+                        <Grid Grid.Row="2" Margin="10 4 10 10">
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition />
+                                <ColumnDefinition />
+                            </Grid.ColumnDefinitions>
+                            <Grid.RowDefinitions>
+                                <RowDefinition />
+                                <RowDefinition />
+                            </Grid.RowDefinitions>
+                            <TextBlock Margin="0 2">Input</TextBlock>
+                            <ContentControl Grid.Row="0"
                                                Grid.Column="1" 
                                                s:View.Model="{Binding TestInputValue}" 
                                                Margin="0 2" 
@@ -113,28 +111,27 @@
                                                VerticalAlignment="Stretch"
                                                HorizontalAlignment="Right" />

-                                <TextBlock Grid.Row="1" Grid.Column="0" Margin="0 2">Output</TextBlock>
-                                <ContentControl  Grid.Row="1"
+                            <TextBlock Grid.Row="1" Grid.Column="0" Margin="0 2">Output</TextBlock>
+                            <ContentControl  Grid.Row="1"
                                                 Grid.Column="1" 
                                                 s:View.Model="{Binding TestResultValue}" 
                                                 Margin="0 2"
                                                 FontFamily="Consolas" 
                                                 VerticalAlignment="Stretch" 
                                                 HorizontalAlignment="Right" />
-                            </Grid>
                        </Grid>
-                    </materialDesign:Card>
-                </Grid>
-            </materialDesign:Card>
+                    </Grid>
+                </materialDesign:Card>
+            </Grid>
+        </materialDesign:Card>

-            <materialDesign:Card Grid.Column="1" UniformCornerRadius="0" Background="{DynamicResource MaterialDesignToolBarBackground}" Panel.ZIndex="1">
-                <Grid Margin="10 5">
-                    <ContentControl s:View.Model="{Binding ActiveItem, IsAsync=True}" 
+        <materialDesign:Card Grid.Column="1" UniformCornerRadius="0" Background="{DynamicResource MaterialDesignToolBarBackground}" Panel.ZIndex="1">
+            <Grid Margin="10 5">
+                <ContentControl s:View.Model="{Binding ActiveItem, IsAsync=True}" 
                                    VerticalContentAlignment="Stretch" 
                                    HorizontalContentAlignment="Stretch"
                                    IsTabStop="False"/>
-                </Grid>
-            </materialDesign:Card>
-        </Grid>
-    </ScrollViewer>
+            </Grid>
+        </materialDesign:Card>
+    </Grid>
 </UserControl>
@@ -3,11 +3,11 @@
             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.DataBindings"
             xmlns:s="https://github.com/canton7/Stylet"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             xmlns:converters="clr-namespace:Artemis.UI.Converters"
             xmlns:utilities="clr-namespace:Artemis.UI.Utilities"
+             xmlns:local="clr-namespace:Artemis.UI.Screens.ProfileEditor.LayerProperties.DataBindings.DirectDataBinding"
             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800"
             d:DataContext="{d:DesignInstance local:DataBindingModifierViewModel}">
@@ -64,6 +64,7 @@ namespace Artemis.UI.Screens.ProfileEditor.LayerProperties.DataBindings.DirectDa
        public void Delete()
        {
            Modifier.DirectDataBinding.RemoveModifier(Modifier);
+            _profileEditorService.UpdateSelectedProfileElement();
        }

        public void SwapType()
@@ -74,6 +75,7 @@ namespace Artemis.UI.Screens.ProfileEditor.LayerProperties.DataBindings.DirectDa
                Modifier.UpdateParameter(null, null);

            Update();
+            _profileEditorService.UpdateSelectedProfileElement();
        }

        private void ParameterSelectionViewModelOnPropertySelected(object sender, DataModelInputDynamicEventArgs e)
@@ -33,9 +33,8 @@
                Height="22"
                Command="{s:Action AddModifier}">
            <StackPanel Orientation="Horizontal">
-                <materialDesign:PackIcon Margin="0 -1 4 0" Kind="Plus" />
                <TextBlock>
-                    Add modifier
+                    ADD MODIFIER
                </TextBlock>
            </StackPanel>
        </Button>
@@ -48,7 +47,6 @@
                 dd:DragDrop.IsDragSource="True"
                 dd:DragDrop.IsDropTarget="True"
                 dd:DragDrop.UseDefaultDragAdorner="True"
-                 dd:DragDrop.DropHandler="{Binding}"
                 HorizontalContentAlignment="Stretch"
                 Margin="0 5 0 0">
            <ListBox.ItemTemplate>
@@ -1,5 +1,8 @@
 using System;
+using System.Collections.Specialized;
+using System.Linq;
 using Artemis.Core;
+using Artemis.UI.Extensions;
 using Artemis.UI.Ninject.Factories;
 using Artemis.UI.Shared;
 using Artemis.UI.Shared.Input;
@@ -14,6 +17,8 @@ namespace Artemis.UI.Screens.ProfileEditor.LayerProperties.DataBindings.DirectDa
        private readonly IDataModelUIService _dataModelUIService;
        private readonly IProfileEditorService _profileEditorService;
        private DataModelDynamicViewModel _targetSelectionViewModel;
+        private bool _canAddModifier;
+        private bool _updating;

        public DirectDataBindingModeViewModel(DirectDataBinding<TLayerProperty, TProperty> directDataBinding,
            IProfileEditorService profileEditorService,
@@ -34,6 +39,12 @@ namespace Artemis.UI.Screens.ProfileEditor.LayerProperties.DataBindings.DirectDa
        public DirectDataBinding<TLayerProperty, TProperty> DirectDataBinding { get; }
        public BindableCollection<DataBindingModifierViewModel<TLayerProperty, TProperty>> ModifierViewModels { get; }

+        public bool CanAddModifier
+        {
+            get => _canAddModifier;
+            set => SetAndNotify(ref _canAddModifier, value);
+        }
+
        public DataModelDynamicViewModel TargetSelectionViewModel
        {
            get => _targetSelectionViewModel;
@@ -45,6 +56,7 @@ namespace Artemis.UI.Screens.ProfileEditor.LayerProperties.DataBindings.DirectDa
            TargetSelectionViewModel.PopulateSelectedPropertyViewModel(DirectDataBinding.SourceDataModel, DirectDataBinding.SourcePropertyPath);
            TargetSelectionViewModel.FilterTypes = new[] {DirectDataBinding.DataBinding.GetTargetType()};

+            CanAddModifier = DirectDataBinding.SourceDataModel != null;
            UpdateModifierViewModels();
        }

@@ -52,16 +64,32 @@ namespace Artemis.UI.Screens.ProfileEditor.LayerProperties.DataBindings.DirectDa
        {
            return TargetSelectionViewModel.SelectedPropertyViewModel?.GetCurrentValue();
        }
-        
+
        private void Initialize()
        {
            DirectDataBinding.ModifiersUpdated += DirectDataBindingOnModifiersUpdated;
            TargetSelectionViewModel = _dataModelUIService.GetDynamicSelectionViewModel(_profileEditorService.GetCurrentModule());
            TargetSelectionViewModel.PropertySelected += TargetSelectionViewModelOnPropertySelected;
-
+            ModifierViewModels.CollectionChanged += ModifierViewModelsOnCollectionChanged;
            Update();
        }
-        
+
+        private void ModifierViewModelsOnCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
+        {
+            if (_updating || e.Action != NotifyCollectionChangedAction.Add)
+                return;
+
+            for (var index = 0; index < ModifierViewModels.Count; index++)
+            {
+                var dataBindingModifierViewModel = ModifierViewModels[index];
+                dataBindingModifierViewModel.Modifier.Order = index + 1;
+            }
+
+            DirectDataBinding.ApplyOrder();
+
+            _profileEditorService.UpdateSelectedProfileElement();
+        }
+
        #region Target

        private void TargetSelectionViewModelOnPropertySelected(object sender, DataModelInputDynamicEventArgs e)
@@ -73,7 +101,7 @@ namespace Artemis.UI.Screens.ProfileEditor.LayerProperties.DataBindings.DirectDa
        }

        #endregion
-        
+
        #region Modifiers

        public void AddModifier()
@@ -81,16 +109,30 @@ namespace Artemis.UI.Screens.ProfileEditor.LayerProperties.DataBindings.DirectDa
            DirectDataBinding.AddModifier(ProfileRightSideType.Dynamic);
            _profileEditorService.UpdateSelectedProfileElement();
        }
-
-
+        
        private void UpdateModifierViewModels()
        {
-            foreach (var dataBindingModifierViewModel in ModifierViewModels)
-                dataBindingModifierViewModel.Dispose();
-            ModifierViewModels.Clear();
+            _updating = true;

-            foreach (var dataBindingModifier in DirectDataBinding.Modifiers)
-                ModifierViewModels.Add(_dataBindingsVmFactory.DataBindingModifierViewModel(dataBindingModifier));
+            // Remove old VMs
+            var toRemove = ModifierViewModels.Where(m => !DirectDataBinding.Modifiers.Contains(m.Modifier)).ToList();
+            foreach (var modifierViewModel in toRemove)
+            {
+                ModifierViewModels.Remove(modifierViewModel);
+                modifierViewModel.Dispose();
+            }
+
+            // Add missing VMs
+            foreach (var modifier in DirectDataBinding.Modifiers)
+            {
+                if (ModifierViewModels.All(m => m.Modifier != modifier))
+                    ModifierViewModels.Add(_dataBindingsVmFactory.DataBindingModifierViewModel(modifier));
+            }
+
+            // Fix order
+            ModifierViewModels.Sort(m => m.Modifier.Order);
+
+            _updating = false;
        }

        private void DirectDataBindingOnModifiersUpdated(object sender, EventArgs e)