From 177d18463a5fb35c318f67a8fe74f1efd1167c8f Mon Sep 17 00:00:00 2001
From: Dariusz Komosinski <darek.komosinski@gmail.com>
Date: Sat, 7 Nov 2020 16:17:21 +0100
Subject: [PATCH] Add support for visualizing layout properties.

---
 .../ViewModels/ControlDetailsViewModel.cs     |   6 +
 .../ViewModels/ControlLayoutViewModel.cs      | 150 ++++++++++++++++++
 .../Diagnostics/Views/ControlDetailsView.xaml | 145 +++++++++++++----
 .../Diagnostics/Views/ThicknessEditor.cs      | 117 ++++++++++++++
 4 files changed, 387 insertions(+), 31 deletions(-)
 create mode 100644 src/Avalonia.Diagnostics/Diagnostics/ViewModels/ControlLayoutViewModel.cs
 create mode 100644 src/Avalonia.Diagnostics/Diagnostics/Views/ThicknessEditor.cs

diff --git a/src/Avalonia.Diagnostics/Diagnostics/ViewModels/ControlDetailsViewModel.cs b/src/Avalonia.Diagnostics/Diagnostics/ViewModels/ControlDetailsViewModel.cs
index d4b988acd4..fa41eacbeb 100644
--- a/src/Avalonia.Diagnostics/Diagnostics/ViewModels/ControlDetailsViewModel.cs
+++ b/src/Avalonia.Diagnostics/Diagnostics/ViewModels/ControlDetailsViewModel.cs
@@ -32,6 +32,8 @@ namespace Avalonia.Diagnostics.ViewModels
             view.Filter = FilterProperty;
             PropertiesView = view;
 
+            Layout = new ControlLayoutViewModel(control);
+
             if (control is INotifyPropertyChanged inpc)
             {
                 inpc.PropertyChanged += ControlPropertyChanged;
@@ -52,6 +54,8 @@ namespace Avalonia.Diagnostics.ViewModels
             get => _selectedProperty;
             set => RaiseAndSetIfChanged(ref _selectedProperty, value);
         }
+        
+        public ControlLayoutViewModel Layout { get; }
 
         public void Dispose()
         {
@@ -112,6 +116,8 @@ namespace Avalonia.Diagnostics.ViewModels
                     property.Update();
                 }
             }
+
+            Layout.ControlPropertyChanged(sender, e);
         }
 
         private void ControlPropertyChanged(object sender, PropertyChangedEventArgs e)
diff --git a/src/Avalonia.Diagnostics/Diagnostics/ViewModels/ControlLayoutViewModel.cs b/src/Avalonia.Diagnostics/Diagnostics/ViewModels/ControlLayoutViewModel.cs
new file mode 100644
index 0000000000..0173f19358
--- /dev/null
+++ b/src/Avalonia.Diagnostics/Diagnostics/ViewModels/ControlLayoutViewModel.cs
@@ -0,0 +1,150 @@
+using System.ComponentModel;
+using Avalonia.Controls;
+using Avalonia.Layout;
+using Avalonia.VisualTree;
+
+namespace Avalonia.Diagnostics.ViewModels
+{
+    internal class ControlLayoutViewModel : ViewModelBase
+    {
+        private readonly IVisual _control;
+        private Thickness _marginThickness;
+        private Thickness _borderThickness;
+        private Thickness _paddingThickness;
+        private string _sizeText;
+
+        public Thickness MarginThickness
+        {
+            get => _marginThickness;
+            set => RaiseAndSetIfChanged(ref _marginThickness, value);
+        }
+        
+        public Thickness BorderThickness
+        {
+            get => _borderThickness;
+            set => RaiseAndSetIfChanged(ref _borderThickness, value);
+        }
+        
+        public Thickness PaddingThickness
+        {
+            get => _paddingThickness;
+            set => RaiseAndSetIfChanged(ref _paddingThickness, value);
+        }
+
+        public string SizeText
+        {
+            get => _sizeText;
+            private set => RaiseAndSetIfChanged(ref _sizeText, value);
+        }
+
+        public bool HasPadding { get; }
+        
+        public bool HasBorder { get; }
+        
+        public ControlLayoutViewModel(IVisual control)
+        {
+            _control = control;
+
+            HasPadding = AvaloniaPropertyRegistry.Instance.IsRegistered(control, Decorator.PaddingProperty);
+            HasBorder = AvaloniaPropertyRegistry.Instance.IsRegistered(control, Border.BorderThicknessProperty);
+
+            if (control is AvaloniaObject ao)
+            {
+                MarginThickness = ao.GetValue(Layoutable.MarginProperty);
+
+                if (HasPadding)
+                {
+                    PaddingThickness = ao.GetValue(Decorator.PaddingProperty);
+                }
+
+                if (HasBorder)
+                {
+                    BorderThickness = ao.GetValue(Border.BorderThicknessProperty);
+                }
+            }
+
+            UpdateSize();
+        }
+
+        private bool _updatingFromControl;
+
+        protected override void OnPropertyChanged(PropertyChangedEventArgs e)
+        {
+            base.OnPropertyChanged(e);
+
+            if (_updatingFromControl)
+            {
+                return;
+            }
+
+            if (_control is AvaloniaObject ao)
+            {
+                if (e.PropertyName == nameof(MarginThickness))
+                {
+                    ao.SetValue(Layoutable.MarginProperty, MarginThickness);
+                }
+                else if (HasPadding && e.PropertyName == nameof(PaddingThickness))
+                {
+                    ao.SetValue(Decorator.PaddingProperty, PaddingThickness);
+                }
+                else if (HasBorder && e.PropertyName == nameof(BorderThickness))
+                {
+                    ao.SetValue(Border.BorderThicknessProperty, BorderThickness);
+                }
+            }
+        }
+
+        public void ControlPropertyChanged(object sender, AvaloniaPropertyChangedEventArgs e)
+        {
+            try
+            {
+                _updatingFromControl = true;
+
+                var updateSize = false;
+
+                if (e.Property == Visual.BoundsProperty)
+                {
+                    updateSize = true;
+                }
+                else
+                {
+                    if (_control is IAvaloniaObject ao)
+                    {
+                        if (e.Property == Layoutable.MarginProperty)
+                        {
+                            MarginThickness = ao.GetValue(Layoutable.MarginProperty);
+                        } 
+                        else if (e.Property == Decorator.PaddingProperty)
+                        {
+                            PaddingThickness = ao.GetValue(Decorator.PaddingProperty);
+                        } 
+                        else if (e.Property == Border.BorderThicknessProperty)
+                        {
+                            BorderThickness = ao.GetValue(Border.BorderThicknessProperty);
+
+                            updateSize = true;
+                        }
+                    }
+                }
+
+                if (updateSize)
+                {
+                    UpdateSize();
+                }
+            }
+            finally
+            {
+                _updatingFromControl = false;
+            }
+        }
+
+        private void UpdateSize()
+        {
+            var size = _control.Bounds;
+
+            size.Deflate(BorderThickness);
+            
+            SizeText = $"{size.Width} × {size.Height}";
+        }
+    }
+}
diff --git a/src/Avalonia.Diagnostics/Diagnostics/Views/ControlDetailsView.xaml b/src/Avalonia.Diagnostics/Diagnostics/Views/ControlDetailsView.xaml
index 8aad5fffd8..1487cb6dde 100644
--- a/src/Avalonia.Diagnostics/Diagnostics/Views/ControlDetailsView.xaml
+++ b/src/Avalonia.Diagnostics/Diagnostics/Views/ControlDetailsView.xaml
@@ -1,38 +1,121 @@
 <UserControl xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:conv="clr-namespace:Avalonia.Diagnostics.Converters"
+             xmlns:local="clr-namespace:Avalonia.Diagnostics.Views"
              x:Class="Avalonia.Diagnostics.Views.ControlDetailsView">
-  <Grid ColumnDefinitions="*,Auto" RowDefinitions="Auto,*">
-
-    <TextBox Grid.Row="0" Grid.Column="0"
-             BorderThickness="0"
-             Text="{Binding TreePage.PropertyFilter}"
-             Watermark="Filter properties" />
-
-    <CheckBox Grid.Row="0" 
-              Grid.Column="1" 
-              Content="Regex" 
-              IsChecked="{Binding TreePage.UseRegexFilter}"/>
-
-    <DataGrid Items="{Binding PropertiesView}"
-              Grid.Row="1" Grid.ColumnSpan="2"
-              BorderThickness="0"
-              RowBackground="Transparent"
-              SelectedItem="{Binding SelectedProperty, Mode=TwoWay}"
-              CanUserResizeColumns="true">
-      <DataGrid.Columns>
-        <DataGridTextColumn Header="Property" Binding="{Binding Name}" IsReadOnly="True" />
-        <DataGridTextColumn Header="Value" Binding="{Binding Value}" />
-        <DataGridTextColumn Header="Type" Binding="{Binding Type}" />
-        <DataGridTextColumn Header="Priority" Binding="{Binding Priority}" IsReadOnly="True" />
-      </DataGrid.Columns>
-
-      <DataGrid.Styles>
-        <Style Selector="DataGridRow TextBox">
-          <Setter Property="SelectionBrush" Value="LightBlue"/>
-        </Style>
-      </DataGrid.Styles>
-    </DataGrid>
 
+  <UserControl.Resources>
+    <SolidColorBrush x:Key="ThicknessBorderBrush" Color="#666666" />
+    <SolidColorBrush x:Key="MarginBackgroundBrush" Color="#D78965" />
+    <SolidColorBrush x:Key="BorderBackgroundBrush" Color="#E3C381" />
+    <SolidColorBrush x:Key="PaddingBackgroundBrush" Color="#B8C47F" />
+    <SolidColorBrush x:Key="SizeBackgroundBrush" Color="#88B2BD" />
+  </UserControl.Resources>
+
+  <UserControl.Styles>
+    <Style Selector="local|ThicknessEditor">
+      <Setter Property="HorizontalContentAlignment" Value="Center" />
+      <Setter Property="VerticalContentAlignment" Value="Center" />
+      <Setter Property="BorderThickness" Value="1" />
+      <Setter Property="BorderBrush" Value="{StaticResource ThicknessBorderBrush}" />
+      <Setter Property="Template">
+        <ControlTemplate>
+          <Border
+            Background="{TemplateBinding Background}"
+            BorderBrush="{TemplateBinding BorderBrush}"
+            BorderThickness="{TemplateBinding BorderThickness}">
+            <Grid RowDefinitions="Auto,*,Auto" ColumnDefinitions="Auto,*,Auto">
+              <Grid.Styles>
+                <Style Selector="TextBox.thickness-edit">
+                  <Setter Property="Background" Value="Transparent" />
+                  <Setter Property="BorderThickness" Value="0" />
+                  <Setter Property="Margin" Value="2" />
+                  <Setter Property="HorizontalAlignment" Value="Stretch" />
+                  <Setter Property="VerticalAlignment" Value="Stretch" />
+                  <Setter Property="HorizontalContentAlignment" Value="Center" />
+                  <Setter Property="VerticalContentAlignment" Value="Center" />
+                  <Setter Property="(ScrollViewer.HorizontalScrollBarVisibility)" Value="Disabled" />
+                  <Setter Property="(ScrollViewer.VerticalScrollBarVisibility)" Value="Disabled" />
+                  <Setter Property="IsVisible" Value="{Binding $parent[local:ThicknessEditor].IsPresent}" />
+                </Style>
+              </Grid.Styles>
+              <TextBlock IsVisible="{TemplateBinding IsPresent}" Margin="4,0,0,0" Text="{TemplateBinding Header}" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" />
+              <TextBox Grid.Row="1" Grid.Column="0" Text="{Binding Left, RelativeSource={RelativeSource TemplatedParent}}" Classes="thickness-edit" />
+              <TextBox x:Name="Right"  Grid.Row="0" Grid.Column="1" Text="{Binding Top, RelativeSource={RelativeSource TemplatedParent}}" Classes="thickness-edit" />
+              <TextBox Grid.Row="1" Grid.Column="2" Text="{Binding Right, RelativeSource={RelativeSource TemplatedParent}}"  Classes="thickness-edit" />
+              <TextBox Grid.Row="2" Grid.Column="1" Text="{Binding Bottom, RelativeSource={RelativeSource TemplatedParent}}" Classes="thickness-edit" />
+              <ContentPresenter Grid.Row="1" Grid.Column="1"
+                Name="PART_ContentPresenter"
+                                ContentTemplate="{TemplateBinding ContentTemplate}"
+                                Content="{TemplateBinding Content}"
+                                Padding="{TemplateBinding Padding}"
+                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" />
+            </Grid>
+          </Border>
+
+        </ControlTemplate>
+      </Setter>
+    </Style>
+    <Style Selector="local|ThicknessEditor[IsPresent=False]">
+      <Setter Property="BorderThickness" Value="0" />
+    </Style>
+  </UserControl.Styles>
+
+  <Grid ColumnDefinitions="*,Auto,250">
+
+    <Grid Grid.Column="0" ColumnDefinitions="*,Auto,Auto,Auto" RowDefinitions="Auto,*">
+
+      <TextBox Grid.Row="0" 
+               Grid.Column="0"
+               BorderThickness="0"
+               Text="{Binding TreePage.PropertyFilter}"
+               Watermark="Filter properties" />
+
+      <CheckBox Grid.Row="0"
+                Grid.Column="1"
+                Margin="0,0,4,0"
+                Content="Regex"
+                IsChecked="{Binding TreePage.UseRegexFilter}" />
+
+      <DataGrid Items="{Binding PropertiesView}"
+                Grid.Row="1"
+                Grid.Column="0"
+                Grid.ColumnSpan="2"
+                BorderThickness="0"
+                RowBackground="Transparent"
+                SelectedItem="{Binding SelectedProperty, Mode=TwoWay}"
+                CanUserResizeColumns="true">
+        <DataGrid.Columns>
+          <DataGridTextColumn Header="Property" Binding="{Binding Name}" IsReadOnly="True" />
+          <DataGridTextColumn Header="Value" Binding="{Binding Value}" />
+          <DataGridTextColumn Header="Type" Binding="{Binding Type}" />
+          <DataGridTextColumn Header="Priority" Binding="{Binding Priority}" IsReadOnly="True" />
+        </DataGrid.Columns>
+
+        <DataGrid.Styles>
+          <Style Selector="DataGridRow TextBox">
+            <Setter Property="SelectionBrush" Value="LightBlue" />
+          </Style>
+        </DataGrid.Styles>
+      </DataGrid>
+
+    </Grid>
+
+    <GridSplitter Grid.Column="1" />
+
+    <Grid Grid.Column="2" RowDefinitions="Auto,*" >
+      <TextBlock Grid.Row="0" Text="Layout Visualizer" Margin="4" />
+      <local:ThicknessEditor Grid.Row="1" Margin="8,0,8,8" Header="margin" VerticalAlignment="Top" HorizontalAlignment="Center" Background="{StaticResource MarginBackgroundBrush}" Thickness="{Binding Layout.MarginThickness}">
+        <local:ThicknessEditor Header="border" Background="{StaticResource BorderBackgroundBrush}" Thickness="{Binding Layout.BorderThickness}" IsPresent="{Binding Layout.HasBorder}">
+          <local:ThicknessEditor Header="padding" Background="{StaticResource PaddingBackgroundBrush}" Thickness="{Binding Layout.PaddingThickness}" IsPresent="{Binding Layout.HasPadding}">
+            <Border BorderThickness="1" BorderBrush="{StaticResource ThicknessBorderBrush}" MinWidth="100" MinHeight="16" Background="{StaticResource SizeBackgroundBrush}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
+              <TextBlock Margin="2" HorizontalAlignment="Center" VerticalAlignment="Center"  Text="{Binding Layout.SizeText}" />
+            </Border>
+          </local:ThicknessEditor>
+        </local:ThicknessEditor>
+      </local:ThicknessEditor>
+    </Grid>
   </Grid>
+
 </UserControl>
diff --git a/src/Avalonia.Diagnostics/Diagnostics/Views/ThicknessEditor.cs b/src/Avalonia.Diagnostics/Diagnostics/Views/ThicknessEditor.cs
new file mode 100644
index 0000000000..58ea91c2fa
--- /dev/null
+++ b/src/Avalonia.Diagnostics/Diagnostics/Views/ThicknessEditor.cs
@@ -0,0 +1,117 @@
+using Avalonia.Controls;
+using Avalonia.Data;
+
+namespace Avalonia.Diagnostics.Views
+{
+    internal class ThicknessEditor : ContentControl
+    {
+        public static readonly DirectProperty<ThicknessEditor, Thickness> ThicknessProperty =
+            AvaloniaProperty.RegisterDirect<ThicknessEditor, Thickness>(nameof(Thickness), o => o.Thickness,
+                (o, v) => o.Thickness = v, defaultBindingMode: BindingMode.TwoWay);
+
+        public static readonly DirectProperty<ThicknessEditor, string> HeaderProperty =
+            AvaloniaProperty.RegisterDirect<ThicknessEditor, string>(nameof(Header), o => o.Header,
+                (o, v) => o.Header = v);
+
+        public static readonly DirectProperty<ThicknessEditor, bool> IsPresentProperty =
+            AvaloniaProperty.RegisterDirect<ThicknessEditor, bool>(nameof(Header), o => o.IsPresent,
+                (o, v) => o.IsPresent = v);
+
+        public static readonly DirectProperty<ThicknessEditor, double> LeftProperty =
+            AvaloniaProperty.RegisterDirect<ThicknessEditor, double>(nameof(Left), o => o.Left, (o, v) => o.Left = v);
+
+        public static readonly DirectProperty<ThicknessEditor, double> TopProperty =
+            AvaloniaProperty.RegisterDirect<ThicknessEditor, double>(nameof(Top), o => o.Top, (o, v) => o.Top = v);
+
+        public static readonly DirectProperty<ThicknessEditor, double> RightProperty =
+            AvaloniaProperty.RegisterDirect<ThicknessEditor, double>(nameof(Right), o => o.Right,
+                (o, v) => o.Right = v);
+
+        public static readonly DirectProperty<ThicknessEditor, double> BottomProperty =
+            AvaloniaProperty.RegisterDirect<ThicknessEditor, double>(nameof(Bottom), o => o.Bottom,
+                (o, v) => o.Bottom = v);
+
+        
+        private Thickness _thickness;
+        private string _header;
+        private bool _isPresent = true;
+        private double _left;
+        private double _top;
+        private double _right;
+        private double _bottom;
+
+        private bool _isUpdatingThickness;
+
+        public Thickness Thickness
+        {
+            get => _thickness;
+            set => SetAndRaise(ThicknessProperty, ref _thickness, value);
+        }
+
+        public string Header
+        {
+            get => _header;
+            set => SetAndRaise(HeaderProperty, ref _header, value);
+        }
+
+        public bool IsPresent
+        {
+            get => _isPresent;
+            set => SetAndRaise(IsPresentProperty, ref _isPresent, value);
+        }
+
+        public double Left
+        {
+            get => _left;
+            set => SetAndRaise(LeftProperty, ref _left, value);
+        }
+
+        public double Top
+        {
+            get => _top;
+            set => SetAndRaise(TopProperty, ref _top, value);
+        }
+
+        public double Right
+        {
+            get => _right;
+            set => SetAndRaise(RightProperty, ref _right, value);
+        }
+
+        public double Bottom
+        {
+            get => _bottom;
+            set => SetAndRaise(BottomProperty, ref _bottom, value);
+        }
+
+        protected override void OnPropertyChanged<T>(AvaloniaPropertyChangedEventArgs<T> change)
+        {
+            base.OnPropertyChanged(change);
+
+            if (change.Property == ThicknessProperty)
+            {
+                try
+                {
+                    _isUpdatingThickness = true;
+
+                    var value = change.NewValue.GetValueOrDefault<Thickness>();
+
+                    Left = value.Left;
+                    Top = value.Top;
+                    Right = value.Right;
+                    Bottom = value.Bottom;
+                }
+                finally
+                {
+                    _isUpdatingThickness = false;
+                }
+            }
+            else if (!_isUpdatingThickness &&
+                     (change.Property == LeftProperty || change.Property == TopProperty ||
+                      change.Property == RightProperty || change.Property == BottomProperty))
+            {
+                Thickness = new Thickness(Left, Top, Right, Bottom);
+            }
+        }
+    }
+}