Shared UI - Renamed DataModelVisualizationService

Databindings - Started on some basic UI elements

src/Artemis.UI/Screens/ProfileEditor/DisplayConditions/DisplayConditionListPredicateViewModel.cs

@@ -24,7 +24,7 @@ namespace Artemis.UI.Screens.ProfileEditor.DisplayConditions
     public class DisplayConditionListPredicateViewModel : DisplayConditionViewModel, IHandle<MainWindowKeyEvent>, IHandle<MainWindowMouseEvent>
     {
         private readonly IDataModelService _dataModelService;
-        private readonly IDataModelVisualizationService _dataModelVisualizationService;
+        private readonly IDataModelUIService _dataModelUIService;
         private readonly IEventAggregator _eventAggregator;
         private readonly IProfileEditorService _profileEditorService;
         private readonly Timer _updateTimer;
@@ -45,13 +45,13 @@ namespace Artemis.UI.Screens.ProfileEditor.DisplayConditions
             DisplayConditionListPredicate displayConditionListPredicate,
             DisplayConditionViewModel parent,
             IProfileEditorService profileEditorService,
-            IDataModelVisualizationService dataModelVisualizationService,
+            IDataModelUIService dataModelUIService,
             IDataModelService dataModelService,
             ISettingsService settingsService,
             IEventAggregator eventAggregator) : base(displayConditionListPredicate, parent)
         {
             _profileEditorService = profileEditorService;
-            _dataModelVisualizationService = dataModelVisualizationService;
+            _dataModelUIService = dataModelUIService;
             _dataModelService = dataModelService;
             _eventAggregator = eventAggregator;
             _updateTimer = new Timer(500);
@@ -180,7 +180,7 @@ namespace Artemis.UI.Screens.ProfileEditor.DisplayConditions
             RightSideDataModel.UpdateRequested += RightDataModelUpdateRequested;
 
             // Determine which types are currently supported
-            var editors = _dataModelVisualizationService.RegisteredDataModelEditors;
+            var editors = _dataModelUIService.RegisteredDataModelEditors;
             _supportedInputTypes = editors.Select(e => e.SupportedType).ToList();
             _supportedInputTypes.AddRange(editors.Where(e => e.CompatibleConversionTypes != null).SelectMany(e => e.CompatibleConversionTypes));
 
@@ -272,7 +272,7 @@ namespace Artemis.UI.Screens.ProfileEditor.DisplayConditions
                 return;
 
             RightSideTransitionIndex = 1;
-            RightSideInputViewModel = _dataModelVisualizationService.GetDataModelInputViewModel(
+            RightSideInputViewModel = _dataModelUIService.GetDataModelInputViewModel(
                 SelectedLeftSideProperty.PropertyInfo.PropertyType,
                 SelectedLeftSideProperty.PropertyDescription,
                 DisplayConditionListPredicate.RightStaticValue,
@@ -290,9 +290,9 @@ namespace Artemis.UI.Screens.ProfileEditor.DisplayConditions
         private void OnUpdateTimerOnElapsed(object sender, ElapsedEventArgs e)
         {
             if (LeftSideDataModelOpen)
-                LeftSideDataModel.Update(_dataModelVisualizationService);
+                LeftSideDataModel.Update(_dataModelUIService);
             else if (RightSideDataModelOpen)
-                RightSideDataModel.Update(_dataModelVisualizationService);
+                RightSideDataModel.Update(_dataModelUIService);
         }
 
         private void RightDataModelUpdateRequested(object sender, EventArgs e)
@@ -319,16 +319,16 @@ namespace Artemis.UI.Screens.ProfileEditor.DisplayConditions
             if (DisplayConditionListPredicate.ListDataModel == null || DisplayConditionListPredicate.ListPropertyPath == null)
                 throw new ArtemisUIException("Cannot create a list predicate without first selecting a target list");
 
-            var dataModel = _dataModelVisualizationService.GetMainDataModelVisualization();
-            if (!_dataModelVisualizationService.GetPluginExtendsDataModel(_profileEditorService.GetCurrentModule()))
-                dataModel.Children.Add(_dataModelVisualizationService.GetPluginDataModelVisualization(_profileEditorService.GetCurrentModule()));
+            var dataModel = _dataModelUIService.GetMainDataModelVisualization();
+            if (!_dataModelUIService.GetPluginExtendsDataModel(_profileEditorService.GetCurrentModule()))
+                dataModel.Children.Add(_dataModelUIService.GetPluginDataModelVisualization(_profileEditorService.GetCurrentModule()));
 
             var listDataModel = (DataModelListViewModel) dataModel.GetChildByPath(
                 DisplayConditionListPredicate.ListDataModel.PluginInfo.Guid,
                 DisplayConditionListPredicate.ListPropertyPath
             );
 
-            return listDataModel.GetListTypeViewModel(_dataModelVisualizationService);
+            return listDataModel.GetListTypeViewModel(_dataModelUIService);
         }
 
         private void ExecuteSelectLeftProperty(object context)

src/Artemis.UI/Screens/ProfileEditor/DisplayConditions/DisplayConditionListViewModel.cs

@@ -19,7 +19,7 @@ namespace Artemis.UI.Screens.ProfileEditor.DisplayConditions
     public class DisplayConditionListViewModel : DisplayConditionViewModel
     {
         private readonly IProfileEditorService _profileEditorService;
-        private readonly IDataModelVisualizationService _dataModelVisualizationService;
+        private readonly IDataModelUIService _dataModelUIService;
         private readonly IDisplayConditionsVmFactory _displayConditionsVmFactory;
         private bool _isInitialized;
         private DataModelListViewModel _selectedListProperty;
@@ -30,12 +30,12 @@ namespace Artemis.UI.Screens.ProfileEditor.DisplayConditions
             DisplayConditionList displayConditionList,
             DisplayConditionViewModel parent,
             IProfileEditorService profileEditorService,
-            IDataModelVisualizationService dataModelVisualizationService,
+            IDataModelUIService dataModelUIService,
             IDisplayConditionsVmFactory displayConditionsVmFactory,
             ISettingsService settingsService) : base(displayConditionList, parent)
         {
             _profileEditorService = profileEditorService;
-            _dataModelVisualizationService = dataModelVisualizationService;
+            _dataModelUIService = dataModelUIService;
             _displayConditionsVmFactory = displayConditionsVmFactory;
             _updateTimer = new Timer(500);
 
@@ -111,9 +111,9 @@ namespace Artemis.UI.Screens.ProfileEditor.DisplayConditions
         public void Initialize()
         {
             // Get the data models
-            TargetDataModel = _dataModelVisualizationService.GetMainDataModelVisualization();
-            if (!_dataModelVisualizationService.GetPluginExtendsDataModel(_profileEditorService.GetCurrentModule()))
-                TargetDataModel.Children.Add(_dataModelVisualizationService.GetPluginDataModelVisualization(_profileEditorService.GetCurrentModule()));
+            TargetDataModel = _dataModelUIService.GetMainDataModelVisualization();
+            if (!_dataModelUIService.GetPluginExtendsDataModel(_profileEditorService.GetCurrentModule()))
+                TargetDataModel.Children.Add(_dataModelUIService.GetPluginDataModelVisualization(_profileEditorService.GetCurrentModule()));
 
             TargetDataModel.UpdateRequested += TargetDataModelUpdateRequested;
 
@@ -135,8 +135,8 @@ namespace Artemis.UI.Screens.ProfileEditor.DisplayConditions
         {
             if (TargetDataModelOpen)
             {
-                TargetDataModel?.Update(_dataModelVisualizationService);
-                SelectedListProperty?.Update(_dataModelVisualizationService);
+                TargetDataModel?.Update(_dataModelUIService);
+                SelectedListProperty?.Update(_dataModelUIService);
             }
         }
 

src/Artemis.UI/Screens/ProfileEditor/DisplayConditions/DisplayConditionPredicateViewModel.cs

@@ -23,7 +23,7 @@ namespace Artemis.UI.Screens.ProfileEditor.DisplayConditions
     public class DisplayConditionPredicateViewModel : DisplayConditionViewModel, IHandle<MainWindowKeyEvent>, IHandle<MainWindowMouseEvent>
     {
         private readonly IDataModelService _dataModelService;
-        private readonly IDataModelVisualizationService _dataModelVisualizationService;
+        private readonly IDataModelUIService _dataModelUIService;
         private readonly IEventAggregator _eventAggregator;
         private readonly IProfileEditorService _profileEditorService;
         private bool _isInitialized;
@@ -44,13 +44,13 @@ namespace Artemis.UI.Screens.ProfileEditor.DisplayConditions
             DisplayConditionPredicate displayConditionPredicate,
             DisplayConditionViewModel parent,
             IProfileEditorService profileEditorService,
-            IDataModelVisualizationService dataModelVisualizationService,
+            IDataModelUIService dataModelUIService,
             IDataModelService dataModelService,
             ISettingsService settingsService,
             IEventAggregator eventAggregator) : base(displayConditionPredicate, parent)
         {
             _profileEditorService = profileEditorService;
-            _dataModelVisualizationService = dataModelVisualizationService;
+            _dataModelUIService = dataModelUIService;
             _dataModelService = dataModelService;
             _eventAggregator = eventAggregator;
             _updateTimer = new Timer(500);
@@ -173,16 +173,16 @@ namespace Artemis.UI.Screens.ProfileEditor.DisplayConditions
         public void Initialize()
         {
             // Get the data models
-            LeftSideDataModel = _dataModelVisualizationService.GetMainDataModelVisualization();
-            RightSideDataModel = _dataModelVisualizationService.GetMainDataModelVisualization();
-            if (!_dataModelVisualizationService.GetPluginExtendsDataModel(_profileEditorService.GetCurrentModule()))
+            LeftSideDataModel = _dataModelUIService.GetMainDataModelVisualization();
+            RightSideDataModel = _dataModelUIService.GetMainDataModelVisualization();
+            if (!_dataModelUIService.GetPluginExtendsDataModel(_profileEditorService.GetCurrentModule()))
             {
-                LeftSideDataModel.Children.Add(_dataModelVisualizationService.GetPluginDataModelVisualization(_profileEditorService.GetCurrentModule()));
-                RightSideDataModel.Children.Add(_dataModelVisualizationService.GetPluginDataModelVisualization(_profileEditorService.GetCurrentModule()));
+                LeftSideDataModel.Children.Add(_dataModelUIService.GetPluginDataModelVisualization(_profileEditorService.GetCurrentModule()));
+                RightSideDataModel.Children.Add(_dataModelUIService.GetPluginDataModelVisualization(_profileEditorService.GetCurrentModule()));
             }
 
             // Determine which types are currently supported
-            var editors = _dataModelVisualizationService.RegisteredDataModelEditors;
+            var editors = _dataModelUIService.RegisteredDataModelEditors;
             _supportedInputTypes = editors.Select(e => e.SupportedType).ToList();
             _supportedInputTypes.AddRange(editors.Where(e => e.CompatibleConversionTypes != null).SelectMany(e => e.CompatibleConversionTypes));
 
@@ -274,7 +274,7 @@ namespace Artemis.UI.Screens.ProfileEditor.DisplayConditions
                 return;
 
             RightSideTransitionIndex = 1;
-            RightSideInputViewModel = _dataModelVisualizationService.GetDataModelInputViewModel(
+            RightSideInputViewModel = _dataModelUIService.GetDataModelInputViewModel(
                 SelectedLeftSideProperty.PropertyInfo.PropertyType,
                 SelectedLeftSideProperty.PropertyDescription,
                 DisplayConditionPredicate.RightStaticValue,
@@ -292,9 +292,9 @@ namespace Artemis.UI.Screens.ProfileEditor.DisplayConditions
         private void OnUpdateTimerOnElapsed(object sender, ElapsedEventArgs e)
         {
             if (LeftSideDataModelOpen)
-                LeftSideDataModel.Update(_dataModelVisualizationService);
+                LeftSideDataModel.Update(_dataModelUIService);
             else if (RightSideDataModelOpen)
-                RightSideDataModel.Update(_dataModelVisualizationService);
+                RightSideDataModel.Update(_dataModelUIService);
         }
 
         private void RightDataModelUpdateRequested(object sender, EventArgs e)

src/Artemis.UI/Screens/ProfileEditor/LayerProperties/DataBindings/DataBindingsTabView.xaml

@@ -0,0 +1,12 @@
+<UserControl x:Class="Artemis.UI.Screens.ProfileEditor.LayerProperties.DataBindings.DataBindingsTabView"
+             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.ProfileEditor.LayerProperties.DataBindings"
+             mc:Ignorable="d" 
+             d:DesignHeight="450" d:DesignWidth="800">
+    <Grid>
+            
+    </Grid>
+</UserControl>

src/Artemis.UI/Screens/ProfileEditor/LayerProperties/DataBindings/DataBindingsTabViewModel.cs

@@ -0,0 +1,20 @@
+using System.Reflection;
+using Artemis.Core.Models.Profile.LayerProperties;
+using Stylet;
+
+namespace Artemis.UI.Screens.ProfileEditor.LayerProperties.DataBindings
+{
+    public class DataBindingsTabViewModel : PropertyChangedBase
+    {
+        public DataBindingsTabViewModel(BaseLayerProperty layerProperty, PropertyInfo dataBindingProperty)
+        {
+            DisplayName = dataBindingProperty.Name.ToUpper();
+            LayerProperty = layerProperty;
+            DataBindingProperty = dataBindingProperty;
+        }
+
+        public string DisplayName { get; }
+        public BaseLayerProperty LayerProperty { get; }
+        public PropertyInfo DataBindingProperty { get; }
+    }
+}

src/Artemis.UI/Screens/ProfileEditor/LayerProperties/DataBindings/DataBindingsView.xaml

@@ -0,0 +1,24 @@
+<UserControl x:Class="Artemis.UI.Screens.ProfileEditor.LayerProperties.DataBindings.DataBindingsView"
+             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.ProfileEditor.LayerProperties.DataBindings"
+             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
+             xmlns:s="https://github.com/canton7/Stylet"
+             mc:Ignorable="d"
+             d:DesignHeight="450" d:DesignWidth="800"
+             d:DataContext="{d:DesignInstance local:DataBindingsViewModel}">
+    <TabControl Margin="0 -1 0 0"
+                ItemsSource="{Binding Tabs}"
+                DisplayMemberPath="DisplayName"
+                Style="{StaticResource MaterialDesignTabControl}">
+        <TabControl.ContentTemplate>
+            <DataTemplate>
+                <materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect FadeIn}">
+                    <ContentControl s:View.Model="{Binding}" TextElement.Foreground="{DynamicResource MaterialDesignBody}" />
+                </materialDesign:TransitioningContent>
+            </DataTemplate>
+        </TabControl.ContentTemplate>
+    </TabControl>
+</UserControl>

src/Artemis.UI/Screens/ProfileEditor/LayerProperties/DataBindings/DataBindingsViewModel.cs

@@ -0,0 +1,25 @@
+using Artemis.Core.Models.Profile.LayerProperties;
+using Stylet;
+
+namespace Artemis.UI.Screens.ProfileEditor.LayerProperties.DataBindings
+{
+    public class DataBindingsViewModel : PropertyChangedBase
+    {
+        public DataBindingsViewModel(BaseLayerProperty layerProperty)
+        {
+            Tabs = new BindableCollection<DataBindingsTabViewModel>();
+            LayerProperty = layerProperty;
+
+            Initialise();
+        }
+
+        public BindableCollection<DataBindingsTabViewModel> Tabs { get; set; }
+        public BaseLayerProperty LayerProperty { get; }
+
+        private void Initialise()
+        {
+            foreach (var dataBindingProperty in LayerProperty.GetDataBindingProperties())
+                Tabs.Add(new DataBindingsTabViewModel(LayerProperty, dataBindingProperty));
+        }
+    }
+}

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

@@ -147,7 +147,7 @@
                         <Grid>
                             <ContentControl s:View.Model="{Binding EffectsViewModel}" />
                             <!-- Transitions only work when the command comes from inside the transitioner but we want the button outside, 
-                            by setting the command target to this hidden button we cercumvent that -->
+                            by setting the command target to this hidden button we circumvent that -->
                             <Button x:Name="TransitionCommandAnchor"
                                     HorizontalAlignment="Right"
                                     VerticalAlignment="Bottom"
@@ -164,58 +164,35 @@
         <GridSplitter Grid.Row="0" Grid.RowSpan="2" Grid.Column="1" Width="15" HorizontalAlignment="Stretch" Cursor="SizeWE" Margin="-15 0" Background="Transparent" />
 
         <!-- Right side -->
-        <Grid Grid.Row="0" Grid.Column="2">
-            <Grid.RowDefinitions>
-                <RowDefinition Height="56" />
-                <RowDefinition Height="*" />
-                <RowDefinition Height="Auto" />
-            </Grid.RowDefinitions>
+        <materialDesign:Transitioner Grid.Row="0"
+                                     Grid.Column="2"
+                                     x:Name="RightSideTransitioner"
+                                     SelectedIndex="{Binding RightSideIndex}"
+                                     DefaultTransitionOrigin="0, 0.5"
+                                     AutoApplyTransitionOrigins="True">
+            <Grid>
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="56" />
+                    <RowDefinition Height="*" />
+                    <RowDefinition Height="Auto" />
+                </Grid.RowDefinitions>
 
-            <!-- Timeline headers -->
-            <ScrollViewer Grid.Row="0" x:Name="TimelineHeaderScrollViewer" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" ScrollChanged="TimelineScrollChanged">
-                <Canvas Background="{DynamicResource MaterialDesignCardBackground}" Width="{Binding ActualWidth, ElementName=PropertyTimeLine}">
-                    <!-- Timeline segments -->
-                    <ContentControl Canvas.Left="{Binding EndTimelineSegmentViewModel.SegmentStartPosition}" s:View.Model="{Binding EndTimelineSegmentViewModel}" />
-                    <ContentControl Canvas.Left="{Binding MainTimelineSegmentViewModel.SegmentStartPosition}" s:View.Model="{Binding MainTimelineSegmentViewModel}" />
-                    <ContentControl Canvas.Left="{Binding StartTimelineSegmentViewModel.SegmentStartPosition}" s:View.Model="{Binding StartTimelineSegmentViewModel}" />
+                <!-- Timeline headers -->
+                <ScrollViewer Grid.Row="0" x:Name="TimelineHeaderScrollViewer" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" ScrollChanged="TimelineScrollChanged">
+                    <Canvas Background="{DynamicResource MaterialDesignCardBackground}" Width="{Binding ActualWidth, ElementName=PropertyTimeLine}">
+                        <!-- Timeline segments -->
+                        <ContentControl Canvas.Left="{Binding EndTimelineSegmentViewModel.SegmentStartPosition}" s:View.Model="{Binding EndTimelineSegmentViewModel}" />
+                        <ContentControl Canvas.Left="{Binding MainTimelineSegmentViewModel.SegmentStartPosition}" s:View.Model="{Binding MainTimelineSegmentViewModel}" />
+                        <ContentControl Canvas.Left="{Binding StartTimelineSegmentViewModel.SegmentStartPosition}" s:View.Model="{Binding StartTimelineSegmentViewModel}" />
 
-                    <!-- Timeline caret -->
-                    <Polygon Canvas.Left="{Binding TimeCaretPosition}"
-                             Cursor="SizeWE"
-                             MouseDown="{s:Action TimelineMouseDown}"
-                             MouseUp="{s:Action TimelineMouseUp}"
-                             MouseMove="{s:Action TimelineMouseMove}"
-                             Points="-8,0 -8,8 0,20, 8,8 8,0"
-                             Fill="{StaticResource SecondaryAccentBrush}" />
-                    <Line Canvas.Left="{Binding TimeCaretPosition}"
-                          Cursor="SizeWE"
-                          MouseDown="{s:Action TimelineMouseDown}"
-                          MouseUp="{s:Action TimelineMouseUp}"
-                          MouseMove="{s:Action TimelineMouseMove}"
-                          X1="0"
-                          X2="0"
-                          Y1="0"
-                          Y2="{Binding ActualHeight, ElementName=ContainerGrid}"
-                          StrokeThickness="2"
-                          Stroke="{StaticResource SecondaryAccentBrush}" />
-
-
-                    <!-- Timeline header body -->
-                    <controls:PropertyTimelineHeader Margin="0 25 0 0"
-                                                     Fill="{DynamicResource MaterialDesignBody}"
-                                                     PixelsPerSecond="{Binding ProfileEditorService.PixelsPerSecond}"
-                                                     HorizontalOffset="{Binding ContentHorizontalOffset, ElementName=TimelineHeaderScrollViewer}"
-                                                     VisibleWidth="{Binding ActualWidth, ElementName=TimelineHeaderScrollViewer}"
-                                                     OffsetFirstValue="True"
-                                                     Width="{Binding ActualWidth, ElementName=PropertyTimeLine}" />
-                </Canvas>
-            </ScrollViewer>
-
-            <!-- Timeline rails -->
-            <ScrollViewer x:Name="TimelineRailsScrollViewer" Grid.Row="1" Style="{StaticResource SvStyle}" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"
-                          ScrollChanged="TimelineScrollChanged">
-                <Grid Background="{DynamicResource MaterialDesignToolBarBackground}">
-                    <Canvas Grid.Column="0" Panel.ZIndex="1">
+                        <!-- Timeline caret -->
+                        <Polygon Canvas.Left="{Binding TimeCaretPosition}"
+                                 Cursor="SizeWE"
+                                 MouseDown="{s:Action TimelineMouseDown}"
+                                 MouseUp="{s:Action TimelineMouseUp}"
+                                 MouseMove="{s:Action TimelineMouseMove}"
+                                 Points="-8,0 -8,8 0,20, 8,8 8,0"
+                                 Fill="{StaticResource SecondaryAccentBrush}" />
                         <Line Canvas.Left="{Binding TimeCaretPosition}"
                               Cursor="SizeWE"
                               MouseDown="{s:Action TimelineMouseDown}"
@@ -227,12 +204,49 @@
                               Y2="{Binding ActualHeight, ElementName=ContainerGrid}"
                               StrokeThickness="2"
                               Stroke="{StaticResource SecondaryAccentBrush}" />
-                    </Canvas>
 
-                    <ContentControl Grid.Column="0" s:View.Model="{Binding TimelineViewModel}" x:Name="PropertyTimeLine" />
-                </Grid>
-            </ScrollViewer>
-        </Grid>
+
+                        <!-- Timeline header body -->
+                        <controls:PropertyTimelineHeader Margin="0 25 0 0"
+                                                         Fill="{DynamicResource MaterialDesignBody}"
+                                                         PixelsPerSecond="{Binding ProfileEditorService.PixelsPerSecond}"
+                                                         HorizontalOffset="{Binding ContentHorizontalOffset, ElementName=TimelineHeaderScrollViewer}"
+                                                         VisibleWidth="{Binding ActualWidth, ElementName=TimelineHeaderScrollViewer}"
+                                                         OffsetFirstValue="True"
+                                                         Width="{Binding ActualWidth, ElementName=PropertyTimeLine}" />
+                    </Canvas>
+                </ScrollViewer>
+
+                <!-- Timeline rails -->
+                <ScrollViewer x:Name="TimelineRailsScrollViewer" Grid.Row="1" Style="{StaticResource SvStyle}" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"
+                              ScrollChanged="TimelineScrollChanged">
+                    <Grid Background="{DynamicResource MaterialDesignToolBarBackground}">
+                        <Canvas Grid.Column="0" Panel.ZIndex="1">
+                            <Line Canvas.Left="{Binding TimeCaretPosition}"
+                                  Cursor="SizeWE"
+                                  MouseDown="{s:Action TimelineMouseDown}"
+                                  MouseUp="{s:Action TimelineMouseUp}"
+                                  MouseMove="{s:Action TimelineMouseMove}"
+                                  X1="0"
+                                  X2="0"
+                                  Y1="0"
+                                  Y2="{Binding ActualHeight, ElementName=ContainerGrid}"
+                                  StrokeThickness="2"
+                                  Stroke="{StaticResource SecondaryAccentBrush}" />
+                        </Canvas>
+
+                        <ContentControl Grid.Column="0" s:View.Model="{Binding TimelineViewModel}" x:Name="PropertyTimeLine" />
+                    </Grid>
+                </ScrollViewer>
+            </Grid>
+
+            <materialDesign:TransitionerSlide>
+                <materialDesign:TransitionerSlide.BackwardWipe>
+                    <materialDesign:CircleWipe />
+                </materialDesign:TransitionerSlide.BackwardWipe>
+                <ContentControl s:View.Model="{Binding DataBindingsViewModel}" Background="White"/>
+            </materialDesign:TransitionerSlide>
+        </materialDesign:Transitioner>
 
         <!-- Bottom row, a bit hacky but has a ZIndex of 2 to cut off the time caret that overlaps the entire timeline -->
         <Grid Grid.Row="1"

src/Artemis.UI/Screens/ProfileEditor/LayerProperties/LayerPropertiesViewModel.cs

@@ -12,6 +12,7 @@ using Artemis.Core.Models.Profile.LayerProperties.Attributes;
 using Artemis.Core.Services;
 using Artemis.Core.Services.Interfaces;
 using Artemis.UI.Ninject.Factories;
+using Artemis.UI.Screens.ProfileEditor.LayerProperties.DataBindings;
 using Artemis.UI.Screens.ProfileEditor.LayerProperties.LayerEffects;
 using Artemis.UI.Screens.ProfileEditor.LayerProperties.Timeline;
 using Artemis.UI.Screens.ProfileEditor.LayerProperties.Tree;
@@ -33,11 +34,13 @@ namespace Artemis.UI.Screens.ProfileEditor.LayerProperties
         private int _propertyTreeIndex;
         private bool _repeatAfterLastKeyframe;
         private RenderProfileElement _selectedProfileElement;
+        private DataBindingsViewModel _dataBindingsViewModel;
         private TimelineViewModel _timelineViewModel;
         private TreeViewModel _treeViewModel;
         private TimelineSegmentViewModel _startTimelineSegmentViewModel;
         private TimelineSegmentViewModel _mainTimelineSegmentViewModel;
         private TimelineSegmentViewModel _endTimelineSegmentViewModel;
+        private int _rightSideIndex;
 
         public LayerPropertiesViewModel(IProfileEditorService profileEditorService, ICoreService coreService, ISettingsService settingsService,
             ILayerPropertyVmFactory layerPropertyVmFactory)
@@ -87,6 +90,12 @@ namespace Artemis.UI.Screens.ProfileEditor.LayerProperties
             }
         }
 
+        public int RightSideIndex
+        {
+            get => _rightSideIndex;
+            set => SetAndNotify(ref _rightSideIndex, value);
+        }
+
         public bool PropertyTreeVisible => PropertyTreeIndex == 0;
 
         public RenderProfileElement SelectedProfileElement
@@ -102,7 +111,7 @@ namespace Artemis.UI.Screens.ProfileEditor.LayerProperties
 
         public Layer SelectedLayer => SelectedProfileElement as Layer;
         public Folder SelectedFolder => SelectedProfileElement as Folder;
-        
+
         public BindableCollection<LayerPropertyGroupViewModel> LayerPropertyGroups
         {
             get => _layerPropertyGroups;
@@ -121,6 +130,12 @@ namespace Artemis.UI.Screens.ProfileEditor.LayerProperties
             set => SetAndNotify(ref _effectsViewModel, value);
         }
 
+        public DataBindingsViewModel DataBindingsViewModel
+        {
+            get => _dataBindingsViewModel;
+            set => SetAndNotify(ref _dataBindingsViewModel, value);
+        }
+
         public TimelineViewModel TimelineViewModel
         {
             get => _timelineViewModel;
@@ -151,6 +166,7 @@ namespace Artemis.UI.Screens.ProfileEditor.LayerProperties
 
             ProfileEditorService.ProfileElementSelected += ProfileEditorServiceOnProfileElementSelected;
             ProfileEditorService.CurrentTimeChanged += ProfileEditorServiceOnCurrentTimeChanged;
+            ProfileEditorService.SelectedDataBindingChanged += ProfileEditorServiceOnSelectedDataBindingChanged;
             ProfileEditorService.PixelsPerSecondChanged += ProfileEditorServiceOnPixelsPerSecondChanged;
 
             base.OnInitialActivate();
@@ -160,6 +176,7 @@ namespace Artemis.UI.Screens.ProfileEditor.LayerProperties
         {
             ProfileEditorService.ProfileElementSelected -= ProfileEditorServiceOnProfileElementSelected;
             ProfileEditorService.CurrentTimeChanged -= ProfileEditorServiceOnCurrentTimeChanged;
+            ProfileEditorService.SelectedDataBindingChanged -= ProfileEditorServiceOnSelectedDataBindingChanged;
             ProfileEditorService.PixelsPerSecondChanged -= ProfileEditorServiceOnPixelsPerSecondChanged;
 
             PopulateProperties(null);
@@ -204,6 +221,19 @@ namespace Artemis.UI.Screens.ProfileEditor.LayerProperties
             NotifyOfPropertyChange(nameof(TimeCaretPosition));
         }
 
+        private void ProfileEditorServiceOnSelectedDataBindingChanged(object? sender, EventArgs e)
+        {
+            if (ProfileEditorService.SelectedDataBinding != null)
+            {
+                RightSideIndex = 1;
+                DataBindingsViewModel = new DataBindingsViewModel(ProfileEditorService.SelectedDataBinding);
+            } else
+            {
+                RightSideIndex = 0;
+                DataBindingsViewModel = null;
+            }
+        }
+
         #region View model managament
 
         public List<LayerPropertyGroupViewModel> GetAllLayerPropertyGroupViewModels()
@@ -266,7 +296,7 @@ namespace Artemis.UI.Screens.ProfileEditor.LayerProperties
             ApplyLayerBrush();
             ApplyEffects();
         }
-        
+
         private void SelectedLayerOnLayerBrushUpdated(object sender, EventArgs e)
         {
             ApplyLayerBrush();
@@ -599,7 +629,7 @@ namespace Artemis.UI.Screens.ProfileEditor.LayerProperties
         #endregion
 
         #region Segments
-        
+
         public void EnableSegment(string segment)
         {
             if (segment == "Start")

src/Artemis.UI/Screens/ProfileEditor/LayerProperties/Tree/TreePropertyView.xaml

@@ -51,7 +51,8 @@
                 ToolTip="Change the property's data binding"
                 Width="24"
                 Height="24"
-                VerticalAlignment="Center">
+                VerticalAlignment="Center"
+                Command="{s:Action OpenDataBindings}">
             <materialDesign:PackIcon Kind="VectorLink" Height="16" Width="16" />
         </Button>
     </Grid>

src/Artemis.UI/Screens/ProfileEditor/LayerProperties/Tree/TreePropertyViewModel.cs

@@ -37,6 +37,11 @@ namespace Artemis.UI.Screens.ProfileEditor.LayerProperties.Tree
             set => ApplyKeyframesEnabled(value);
         }
 
+        public void OpenDataBindings()
+        {
+            _profileEditorService.ChangeSelectedDataBinding(LayerPropertyViewModel.BaseLayerProperty);
+        }
+
         public override void Dispose()
         {
             PropertyInputViewModel.Dispose();