Merge pull request #7827 from MarchingCube/devtools-binding-visualization

Add support for showing binding paths in DevTools.

src/Avalonia.Diagnostics/Diagnostics/ViewModels/BindingSetterViewModel.cs

@@ -0,0 +1,51 @@
+using System;
+using Avalonia.Data;
+using Avalonia.Markup.Xaml.MarkupExtensions;
+using Avalonia.Media;
+
+namespace Avalonia.Diagnostics.ViewModels
+{
+    internal class BindingSetterViewModel : SetterViewModel
+    {
+        public BindingSetterViewModel(AvaloniaProperty property, object? value) : base(property, value)
+        {
+            switch (value)
+            {
+                case Binding binding:
+                    Path = binding.Path;
+                    Tint = Brushes.CornflowerBlue;
+
+                    break;
+                case CompiledBindingExtension binding:
+                    Path = binding.Path.ToString();
+                    Tint = Brushes.DarkGreen;
+
+                    break;
+                case TemplateBinding binding:
+                    if (binding.Property is AvaloniaProperty templateProperty)
+                    {
+                        Path = $"{templateProperty.OwnerType.Name}.{templateProperty.Name}";
+                    }
+                    else
+                    {
+                        Path = "Unassigned";
+                    }
+
+                    Tint = Brushes.OrangeRed;
+
+                    break;
+                default:
+                    throw new ArgumentException("Invalid binding type", nameof(value));
+            }
+        }
+
+        public IBrush Tint { get; }
+
+        public string Path { get; }
+
+        public override void CopyValue()
+        {
+            CopyToClipboard(Path);
+        }
+    }
+}

src/Avalonia.Diagnostics/Diagnostics/ViewModels/ControlDetailsViewModel.cs

@@ -8,6 +8,7 @@ using System.Reflection;
 using Avalonia.Collections;
 using Avalonia.Controls;
 using Avalonia.Controls.Metadata;
+using Avalonia.Data;
 using Avalonia.Markup.Xaml.MarkupExtensions;
 using Avalonia.Styling;
 using Avalonia.VisualTree;
@@ -87,7 +88,16 @@ namespace Avalonia.Diagnostics.ViewModels
                                 }
                                 else
                                 {
-                                    setterVm = new SetterViewModel(regularSetter.Property, setterValue);
+                                    var isBinding = IsBinding(setterValue);
+
+                                    if (isBinding)
+                                    {
+                                        setterVm = new BindingSetterViewModel(regularSetter.Property, setterValue);
+                                    }
+                                    else
+                                    {
+                                        setterVm = new SetterViewModel(regularSetter.Property, setterValue);
+                                    }
                                 }
 
                                 setters.Add(setterVm);
@@ -117,6 +127,19 @@ namespace Avalonia.Diagnostics.ViewModels
             return null;
         }
 
+        private bool IsBinding(object? value)
+        {
+            switch (value)
+            {
+                case Binding:
+                case CompiledBindingExtension:
+                case TemplateBinding:
+                    return true;
+            }
+
+            return false;
+        }
+
         public TreePageViewModel TreePage { get; }
 
         public DataGridCollectionView? PropertiesView

src/Avalonia.Diagnostics/Diagnostics/ViewModels/SetterViewModel.cs

@@ -34,7 +34,7 @@ namespace Avalonia.Diagnostics.ViewModels
             IsVisible = true;
         }
 
-        public void CopyValue()
+        public virtual void CopyValue()
         {
             var textToCopy = Value?.ToString();
 

src/Avalonia.Diagnostics/Diagnostics/Views/ControlDetailsView.xaml

@@ -138,6 +138,26 @@
                           </StackPanel>
                         </DataTemplate>
 
+                        <DataTemplate DataType="vm:BindingSetterViewModel">
+                          <Panel Opacity="{Binding IsActive, Converter={StaticResource BoolToOpacity}}" IsVisible="{Binding IsVisible}" HorizontalAlignment="Left">
+                            <Panel.ContextMenu>
+                              <ContextMenu>
+                                <MenuItem Header="Copy property name" Command="{Binding CopyPropertyName} "/>
+                                <MenuItem Header="Copy value" Command="{Binding CopyValue} "/>
+                              </ContextMenu>
+                            </Panel.ContextMenu>
+                            <StackPanel Orientation="Horizontal" Spacing="2">
+                              <TextBlock Text="{Binding Name}" FontWeight="SemiBold" />
+                              <TextBlock Text=":" />
+                              <TextBlock>{</TextBlock>
+                              <Rectangle Height="8" Width="8" VerticalAlignment="Center" Fill="{Binding Tint}"/>
+                              <TextBlock Text="{Binding Path}" />
+                              <TextBlock>}</TextBlock>
+                            </StackPanel>
+                            <Rectangle Height="1" Fill="#6C6C6C" VerticalAlignment="Center" IsVisible="{Binding !IsActive}" />
+                          </Panel>
+                        </DataTemplate>
+
                         <DataTemplate DataType="Color">
                           <StackPanel Orientation="Horizontal" Spacing="2">
                             <Border BorderThickness="1" BorderBrush="Black" Width="8" Height="8">