Shared UI - Renamed DataModelVisualizationService

Databindings - Started on some basic UI elements

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();