Merge pull request #5950 from MarchingCube/devtools-layout-alignment

Allow for easily changing layout alignment

src/Avalonia.Diagnostics/Diagnostics/Controls/ThicknessEditor.axaml

@@ -0,0 +1,87 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:controls="clr-namespace:Avalonia.Diagnostics.Controls">
+
+    <Styles.Resources>
+        <SolidColorBrush x:Key="HighlightBorderBrush" Color="CornflowerBlue" />
+        <SolidColorBrush x:Key="ThicknessBorderBrush" Color="#666666" />
+    </Styles.Resources>
+
+    <Style Selector="controls|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>
+                <Panel>
+                    <Rectangle x:Name="PART_Background"
+                               Classes.no-content-pointerover="{Binding !#PART_ContentPresenter.IsPointerOver}" />
+                    <Border
+                        x:Name="PART_Border"
+                        Classes.no-content-pointerover="{Binding !#PART_ContentPresenter.IsPointerOver}"
+                        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[controls: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>
+                </Panel>
+
+            </ControlTemplate>
+        </Setter>
+    </Style>
+
+    <Style Selector="controls|ThicknessEditor[IsPresent=False]">
+        <Setter Property="BorderThickness" Value="0" />
+    </Style>
+
+    <Style Selector="controls|ThicknessEditor /template/ Rectangle#PART_Background">
+        <Setter Property="Fill" Value="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}" />
+    </Style>
+
+    <Style Selector="controls|ThicknessEditor:pointerover /template/ Rectangle#PART_Background.no-content-pointerover">
+        <Setter Property="Fill" Value="{Binding Highlight, RelativeSource={RelativeSource TemplatedParent}}" />
+    </Style>
+
+    <Style Selector="controls|ThicknessEditor:pointerover /template/ Border#PART_Border.no-content-pointerover">
+        <Setter Property="BorderBrush" Value="{StaticResource HighlightBorderBrush}" />
+    </Style>
+</Styles>

src/Avalonia.Diagnostics/Diagnostics/Views/ThicknessEditor.cs → src/Avalonia.Diagnostics/Diagnostics/Controls/ThicknessEditor.cs

@@ -2,7 +2,7 @@
 using Avalonia.Data;
 using Avalonia.Media;
 
-namespace Avalonia.Diagnostics.Views
+namespace Avalonia.Diagnostics.Controls
 {
     internal class ThicknessEditor : ContentControl
     {
@@ -35,12 +35,6 @@ internal class ThicknessEditor : ContentControl
         public static readonly StyledProperty<IBrush> HighlightProperty =
             AvaloniaProperty.Register<ThicknessEditor, IBrush>(nameof(Highlight));
 
-        public IBrush Highlight
-        {
-            get => GetValue(HighlightProperty);
-            set => SetValue(HighlightProperty, value);
-        }
-
         private Thickness _thickness;
         private string _header;
         private bool _isPresent = true;
@@ -92,6 +86,12 @@ public double Bottom
             set => SetAndRaise(BottomProperty, ref _bottom, value);
         }
 
+        public IBrush Highlight
+        {
+            get => GetValue(HighlightProperty);
+            set => SetValue(HighlightProperty, value);
+        }
+
         protected override void OnPropertyChanged<T>(AvaloniaPropertyChangedEventArgs<T> change)
         {
             base.OnPropertyChanged(change);

src/Avalonia.Diagnostics/Diagnostics/Converters/EnumToCheckedConverter.cs

@@ -0,0 +1,25 @@
+using System;
+using System.Globalization;
+using Avalonia.Data;
+using Avalonia.Data.Converters;
+
+namespace Avalonia.Diagnostics.Converters
+{
+    internal class EnumToCheckedConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            return Equals(value, parameter);
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            if (value is bool isChecked && isChecked)
+            {
+                return parameter;
+            }
+
+            return BindingOperations.DoNothing;
+        }
+    }
+}

src/Avalonia.Diagnostics/Diagnostics/DevToolsOptions.cs

@@ -19,8 +19,8 @@ public class DevToolsOptions
         public bool ShowAsChildWindow { get; set; } = true;
 
         /// <summary>
-        /// Gets or sets the initial size of the DevTools window. The default value is 1024x512.
+        /// Gets or sets the initial size of the DevTools window. The default value is 1280x720.
         /// </summary>
-        public Size Size { get; set; } = new Size(1024, 512);
+        public Size Size { get; set; } = new Size(1280, 720);
     }
 }

src/Avalonia.Diagnostics/Diagnostics/ViewModels/ControlLayoutViewModel.cs

@@ -10,27 +10,58 @@ namespace Avalonia.Diagnostics.ViewModels
     internal class ControlLayoutViewModel : ViewModelBase
     {
         private readonly IVisual _control;
-        private Thickness _marginThickness;
         private Thickness _borderThickness;
-        private Thickness _paddingThickness;
-        private double _width;
         private double _height;
-        private string _widthConstraint;
         private string _heightConstraint;
+        private HorizontalAlignment _horizontalAlignment;
+        private Thickness _marginThickness;
+        private Thickness _paddingThickness;
         private bool _updatingFromControl;
+        private VerticalAlignment _verticalAlignment;
+        private double _width;
+        private string _widthConstraint;
+
+        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);
+                }
+
+                HorizontalAlignment = ao.GetValue(Layoutable.HorizontalAlignmentProperty);
+                VerticalAlignment = ao.GetValue(Layoutable.VerticalAlignmentProperty);
+            }
+
+            UpdateSize();
+            UpdateSizeConstraints();
+        }
 
         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;
@@ -61,35 +92,21 @@ public string HeightConstraint
             private set => RaiseAndSetIfChanged(ref _heightConstraint, value);
         }
 
-        public bool HasPadding { get; }
-
-        public bool HasBorder { get; }
-
-        public ControlLayoutViewModel(IVisual control)
+        public HorizontalAlignment HorizontalAlignment
         {
-            _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);
+            get => _horizontalAlignment;
+            private set => RaiseAndSetIfChanged(ref _horizontalAlignment, value);
+        }
 
-                if (HasPadding)
-                {
-                    PaddingThickness = ao.GetValue(Decorator.PaddingProperty);
-                }
+        public VerticalAlignment VerticalAlignment
+        {
+            get => _verticalAlignment;
+            private set => RaiseAndSetIfChanged(ref _verticalAlignment, value);
+        }
 
-                if (HasBorder)
-                {
-                    BorderThickness = ao.GetValue(Border.BorderThicknessProperty);
-                }
-            }
+        public bool HasPadding { get; }
 
-            UpdateSize();
-            UpdateSizeConstraints();
-        }
+        public bool HasBorder { get; }
 
         private void UpdateSizeConstraints()
         {
@@ -151,6 +168,14 @@ protected override void OnPropertyChanged(PropertyChangedEventArgs e)
                 {
                     ao.SetValue(Border.BorderThicknessProperty, BorderThickness);
                 }
+                else if (e.PropertyName == nameof(HorizontalAlignment))
+                {
+                    ao.SetValue(Layoutable.HorizontalAlignmentProperty, HorizontalAlignment);
+                }
+                else if (e.PropertyName == nameof(VerticalAlignment))
+                {
+                    ao.SetValue(Layoutable.VerticalAlignmentProperty, VerticalAlignment);
+                }
             }
         }
 
@@ -171,22 +196,30 @@ public void ControlPropertyChanged(object sender, AvaloniaPropertyChangedEventAr
                         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);
-                        } 
+                        }
                         else if (e.Property == Layoutable.MinWidthProperty ||
                                  e.Property == Layoutable.MaxWidthProperty ||
                                  e.Property == Layoutable.MinHeightProperty ||
                                  e.Property == Layoutable.MaxHeightProperty)
                         {
                             UpdateSizeConstraints();
                         }
+                        else if (e.Property == Layoutable.HorizontalAlignmentProperty)
+                        {
+                            HorizontalAlignment = ao.GetValue(Layoutable.HorizontalAlignmentProperty);
+                        }
+                        else if (e.Property == Layoutable.VerticalAlignmentProperty)
+                        {
+                            VerticalAlignment = ao.GetValue(Layoutable.VerticalAlignmentProperty);
+                        }
                     }
                 }
             }