Display control classes in DevTools.

Perspex.Diagnostics/DevTools.cs

@@ -6,12 +6,13 @@
 
 namespace Perspex.Diagnostics
 {
-    using Perspex.Controls;
+    using System;
+    using System.Reactive.Disposables;
     using System.Reactive.Linq;
+    using Perspex.Controls;
     using Perspex.Diagnostics.ViewModels;
-    using System;
     using Perspex.Input;
-    using System.Reactive.Disposables;
+    using ReactiveUI;
 
     public class DevTools : Decorator
     {
@@ -128,15 +129,23 @@ namespace Perspex.Diagnostics
 
         private static Control GetHeader(VisualTreeNode node)
         {
-            TextBlock result = new TextBlock();
-            result.Text = node.Type;
-
-            if (node.IsInTemplate)
+            return new StackPanel
             {
-                result.FontStyle = Media.FontStyle.Italic;
-            }
-
-            return result;
+                Orientation = Orientation.Horizontal,
+                Gap = 8,
+                Children = new Controls
+                {
+                    new TextBlock
+                    {
+                        Text = node.Type,
+                        FontStyle = node.IsInTemplate ? Media.FontStyle.Italic : Media.FontStyle.Normal,
+                    },
+                    new TextBlock
+                    {
+                        [!TextBlock.TextProperty] = node.WhenAnyValue(x => x.Classes),
+                    }
+                }
+            };
         }
     }
 }

Perspex.Diagnostics/ViewModels/ControlDetails.cs

@@ -8,6 +8,7 @@ namespace Perspex.Diagnostics.ViewModels
 {
     using System.Collections.Generic;
     using System.Linq;
+    using Perspex.Styling;
     using ReactiveUI;
 
     internal class ControlDetails : ReactiveObject
@@ -24,6 +25,12 @@ namespace Perspex.Diagnostics.ViewModels
             }
         }
 
+        public IEnumerable<string> Classes
+        {
+            get;
+            private set;
+        }
+
         public IEnumerable<PropertyDetails> Properties
         {
             get;

Perspex.Diagnostics/ViewModels/VisualTreeNode.cs

@@ -6,11 +6,17 @@
 
 namespace Perspex.Diagnostics.ViewModels
 {
+    using System;
+    using System.Reactive;
+    using System.Reactive.Linq;
     using Perspex.Controls;
+    using Perspex.Styling;
     using ReactiveUI;
 
     internal class VisualTreeNode : ReactiveObject
     {
+        private string classes;
+
         public VisualTreeNode(IVisual visual)
         {
             this.Children = visual.VisualChildren.CreateDerivedCollection(x => new VisualTreeNode(x));
@@ -22,11 +28,29 @@ namespace Perspex.Diagnostics.ViewModels
             if (control != null)
             {
                 this.IsInTemplate = control.TemplatedParent != null;
+
+                control.Classes.Changed.Select(_ => Unit.Default).StartWith(Unit.Default).Subscribe(_ =>
+                {
+                    if (control.Classes.Count > 0)
+                    {
+                        this.Classes = "(" + string.Join(" ", control.Classes) + ")";
+                    }
+                    else
+                    {
+                        this.Classes = "";
+                    }
+                });
             }
         }
 
         public IReactiveDerivedList<VisualTreeNode> Children { get; private set; }
 
+        public string Classes
+        {
+            get { return this.classes; }
+            private set { this.RaiseAndSetIfChanged(ref this.classes, value); }
+        }
+
         public bool IsInTemplate { get; private set; }
 
         public string Type { get; private set; }