Display logical tree in DevTools.

Perspex.Controls.UnitTests/ContentControlTests.cs

@@ -174,7 +174,7 @@ namespace Perspex.Controls.UnitTests
             contentControl.ApplyTemplate();
 
             // Need to call ApplyTemplate on presenter for CollectionChanged to be called.
-            var presenter = contentControl.GetTemplateControls().Single(x => x.Id == "presenter");
+            var presenter = contentControl.GetTemplateControls().Single(x => x.Id == "contentPresenter");
             presenter.ApplyTemplate();
 
             Assert.IsTrue(called);
@@ -197,7 +197,7 @@ namespace Perspex.Controls.UnitTests
             contentControl.Content = null;
 
             // Need to call ApplyTemplate on presenter for CollectionChanged to be called.
-            var presenter = contentControl.GetTemplateControls().Single(x => x.Id == "presenter");
+            var presenter = contentControl.GetTemplateControls().Single(x => x.Id == "contentPresenter");
             presenter.ApplyTemplate();
 
             Assert.IsTrue(called);
@@ -221,7 +221,7 @@ namespace Perspex.Controls.UnitTests
             contentControl.Content = child2;
 
             // Need to call ApplyTemplate on presenter for CollectionChanged to be called.
-            var presenter = contentControl.GetTemplateControls().Single(x => x.Id == "presenter");
+            var presenter = contentControl.GetTemplateControls().Single(x => x.Id == "contentPresenter");
             presenter.ApplyTemplate();
 
             Assert.IsTrue(called);
@@ -236,7 +236,7 @@ namespace Perspex.Controls.UnitTests
                     Background = new Perspex.Media.SolidColorBrush(0xffffffff),
                     Content = new ContentPresenter
                     {
-                        Id = "presenter",
+                        Id = "contentPresenter",
                         [~ContentPresenter.ContentProperty] = parent[~ContentControl.ContentProperty],
                     }
                 };

Perspex.Controls.UnitTests/ItemsControlTests.cs

@@ -275,7 +275,7 @@ namespace Perspex.Controls.UnitTests
                     Background = new Perspex.Media.SolidColorBrush(0xffffffff),
                     Content = new ItemsPresenter
                     {
-                        Id = "presenter",
+                        Id = "itemsPresenter",
                         [~ItemsPresenter.ItemsProperty] = parent[~ItemsControl.ItemsProperty],
                     }
                 };

Perspex.Controls/ContentControl.cs

@@ -79,7 +79,7 @@ namespace Perspex.Controls
                 this.presenterSubscription = null;
             }
 
-            this.presenter = this.FindTemplateChild<ContentPresenter>("presenter");
+            this.presenter = this.FindTemplateChild<ContentPresenter>("contentPresenter");
 
             if (this.presenter != null)
             {

Perspex.Controls/Control.cs

@@ -32,6 +32,9 @@ namespace Perspex.Controls
         public static readonly PerspexProperty<Control> ParentProperty =
             PerspexProperty.Register<Control, Control>("Parent");
 
+        public static readonly PerspexProperty<object> TagProperty =
+            PerspexProperty.Register<Control, object>("Tag");
+
         public static readonly PerspexProperty<ITemplatedControl> TemplatedParentProperty =
             PerspexProperty.Register<Control, ITemplatedControl>("TemplatedParent", inherits: true);
 
@@ -156,6 +159,12 @@ namespace Perspex.Controls
             internal set { this.SetValue(ParentProperty, value); }
         }
 
+        public object Tag
+        {
+            get { return this.GetValue(TagProperty); }
+            set { this.SetValue(TagProperty, value); }
+        }
+
         public ITemplatedControl TemplatedParent
         {
             get { return this.GetValue(TemplatedParentProperty); }

Perspex.Controls/ItemsControl.cs

@@ -93,9 +93,9 @@ namespace Perspex.Controls
                 this.logicalChildren = null;
             }
 
-            this.presenter = this.FindTemplateChild<ItemsPresenter>("presenter");
+            this.presenter = this.FindTemplateChild<ItemsPresenter>("itemsPresenter");
 
-            if (presenter != null)
+            if (this.presenter != null)
             {
                 var panel = (IVisual)this.presenter.GetVisualChildren().Single();
                 this.logicalChildren = new PerspexReadOnlyListView<IVisual, ILogical>(

Perspex.Controls/Primitives/TabStrip.cs

@@ -7,14 +7,15 @@
 namespace Perspex.Controls.Primitives
 {
     using System;
-    using System.Collections;
     using System.Linq;
+    using System.Reactive.Linq;
     using Perspex.Controls.Generators;
-    using Perspex.Controls.Presenters;
-    using Perspex.Input;
 
     public class TabStrip : SelectingItemsControl
     {
+        public static readonly PerspexProperty<TabItem> SelectedTabProperty =
+            TabControl.SelectedTabProperty.AddOwner<TabStrip>();
+
         private static readonly ItemsPanelTemplate PanelTemplate = new ItemsPanelTemplate(
             () => new StackPanel());
 
@@ -23,6 +24,19 @@ namespace Perspex.Controls.Primitives
             ItemsPanelProperty.OverrideDefaultValue(typeof(TabStrip), PanelTemplate);
         }
 
+        public TabStrip()
+        {
+            this.Bind(
+                SelectedTabProperty,
+                this.GetObservable(SelectedItemProperty).Select(x => x as TabItem));
+        }
+
+        public TabItem SelectedTab
+        {
+            get { return this.GetValue(SelectedTabProperty); }
+            private set { this.SetValue(SelectedTabProperty, value); }
+        }
+
         protected override ItemContainerGenerator CreateItemContainerGenerator()
         {
             TabControl tabControl = this.TemplatedParent as TabControl;

Perspex.Controls/Primitives/TemplatedControl.cs

@@ -138,9 +138,7 @@ namespace Perspex.Controls.Primitives
 
         protected T FindTemplateChild<T>(string id) where T : Control
         {
-            return this.GetTemplateControls()
+            return (T)this.GetTemplateControls().SingleOrDefault(x => x.Id == id);
-                .Where(x => x.TemplatedParent == this)
-                .OfType<T>().FirstOrDefault(x => x.Id == id);
         }
 
         protected T GetTemplateChild<T>(string id) where T : Control

Perspex.Controls/TabControl.cs

@@ -9,6 +9,7 @@ namespace Perspex.Controls
     using System;
     using System.Linq;
     using System.Reactive.Linq;
+    using Perspex.Collections;
     using Perspex.Controls.Generators;
     using Perspex.Controls.Primitives;
 
@@ -17,6 +18,9 @@ namespace Perspex.Controls
         public static readonly PerspexProperty<object> SelectedContentProperty =
             PerspexProperty.Register<TabControl, object>("SelectedContent");
 
+        public static readonly PerspexProperty<TabItem> SelectedTabProperty =
+            PerspexProperty.Register<TabControl, TabItem>("SelectedTab");
+
         private TabStrip tabStrip;
 
         public TabControl()
@@ -27,6 +31,22 @@ namespace Perspex.Controls
                 object content = (c != null) ? c.Content : null;
                 this.SetValue(SelectedContentProperty, content);
             });
+
+            this.Bind(
+                SelectedTabProperty, 
+                this.GetObservable(SelectedItemProperty).Select(x => x as TabItem));
+        }
+
+        public object SelectedContent
+        {
+            get { return this.GetValue(SelectedContentProperty); }
+            set { this.SetValue(SelectedContentProperty, value); }
+        }
+
+        public TabItem SelectedTab
+        {
+            get { return this.GetValue(SelectedTabProperty); }
+            private set { this.SetValue(SelectedTabProperty, value); }
         }
 
         protected override ItemContainerGenerator CreateItemContainerGenerator()
@@ -36,6 +56,7 @@ namespace Perspex.Controls
 
         protected override void OnTemplateApplied()
         {
+            base.OnTemplateApplied();
             this.tabStrip = this.GetTemplateControls().OfType<TabStrip>().FirstOrDefault();
             this.BindTwoWay(TabControl.SelectedItemProperty, this.tabStrip, TabControl.SelectedItemProperty);
         }

Perspex.Diagnostics/DevTools.cs

@@ -10,6 +10,7 @@ namespace Perspex.Diagnostics
     using System.Reactive.Disposables;
     using System.Reactive.Linq;
     using Perspex.Controls;
+    using Perspex.Controls.Primitives;
     using Perspex.Diagnostics.ViewModels;
     using Perspex.Input;
     using ReactiveUI;
@@ -21,23 +22,43 @@ namespace Perspex.Diagnostics
 
         public DevTools()
         {
-            var treeView = new TreeView
+            var treePane = new Grid
             {
-                DataTemplates = new DataTemplates
+                RowDefinitions = new RowDefinitions
                 {
-                    new TreeDataTemplate<VisualTreeNode>(GetHeader, x => x.Children),
+                    new RowDefinition(GridLength.Auto),
+                    new RowDefinition(new GridLength(1, GridUnitType.Star)),
                 },
-                [!TreeView.ItemsProperty] = this[!DevTools.RootProperty].Select(x =>
+                Children = new Controls
                 {
-                    if (x != null)
+                    (var tabStrip = new TabStrip
                     {
-                        return new[] { new VisualTreeNode((IVisual)x) };
+                        Items = new[]
-                    }
+                        {
-                    else
+                            new TabItem
+                            {
+                                Header = "Logical Tree",
+                                IsSelected = true,
+                                [!TabItem.TagProperty] = this[!RootProperty].Select(x => LogicalTreeNode.Create(x)),
+                            },
+                            new TabItem
+                            {
+                                Header = "Visual Tree",
+                                [!TabItem.TagProperty] = this[!RootProperty].Select(x => VisualTreeNode.Create(x)),
+                            }
+                        },
+                    }),
+                    (var treeView = new TreeView
                     {
-                        return null;
+                        DataTemplates = new DataTemplates
-                    }
+                        {
-                }),
+                            new TreeDataTemplate<LogicalTreeNode>(GetHeader, x => x.Children),
+                            new TreeDataTemplate<VisualTreeNode>(GetHeader, x => x.Children),
+                        },
+                        [!TreeView.ItemsProperty] = tabStrip.WhenAnyValue(x => x.SelectedTab.Tag),
+                        [Grid.RowProperty] = 1,
+                    })
+                }
             };
 
             var detailsView = new ContentControl
@@ -48,8 +69,8 @@ namespace Perspex.Diagnostics
                 },
                 [!ContentControl.ContentProperty] = treeView[!TreeView.SelectedItemProperty]
                     .Where(x => x != null)
-                    .Cast<VisualTreeNode>()
+                    .Cast<TreeNode>()
-                    .Select(x => new ControlDetails(x.Visual)),
+                    .Select(x => new ControlDetails(x.Control)),
                 [Grid.ColumnProperty] = 2,
             };
 
@@ -69,7 +90,7 @@ namespace Perspex.Diagnostics
                 },
                 Children = new Controls
                 {
-                    treeView,
+                    treePane,
                     splitter,
                     detailsView,
                 }
@@ -127,6 +148,26 @@ namespace Perspex.Diagnostics
             };
         }
 
+        private static Control GetHeader(LogicalTreeNode node)
+        {
+            return new StackPanel
+            {
+                Orientation = Orientation.Horizontal,
+                Gap = 8,
+                Children = new Controls
+                {
+                    new TextBlock
+                    {
+                        Text = node.Type,
+                    },
+                    new TextBlock
+                    {
+                        [!TextBlock.TextProperty] = node.WhenAnyValue(x => x.Classes),
+                    }
+                }
+            };
+        }
+
         private static Control GetHeader(VisualTreeNode node)
         {
             return new StackPanel

Perspex.Diagnostics/Perspex.Diagnostics.csproj

@@ -76,6 +76,8 @@
     <Compile Include="Properties\AssemblyInfo.cs" />
     <Compile Include="ViewModels\PropertyDetails.cs" />
     <Compile Include="ViewModels\ControlDetails.cs" />
+    <Compile Include="ViewModels\LogicalTreeNode.cs" />
+    <Compile Include="ViewModels\TreeNode.cs" />
     <Compile Include="ViewModels\VisualTreeNode.cs" />
   </ItemGroup>
   <ItemGroup>

Perspex.Diagnostics/ViewModels/ControlDetails.cs

@@ -8,18 +8,16 @@ namespace Perspex.Diagnostics.ViewModels
 {
     using System.Collections.Generic;
     using System.Linq;
-    using Perspex.Styling;
+    using Perspex.Controls;
     using ReactiveUI;
 
     internal class ControlDetails : ReactiveObject
     {
-        public ControlDetails(IVisual visual)
+        public ControlDetails(Control control)
         {
-            PerspexObject po = visual as PerspexObject;
+            if (control != null)
-
-            if (po != null)
             {
-                this.Properties = po.GetAllValues()
+                this.Properties = control.GetAllValues()
                     .Select(x => new PropertyDetails(x))
                     .OrderBy(x => x.Name);
             }

Perspex.Diagnostics/ViewModels/LogicalTreeNode.cs

@@ -0,0 +1,29 @@
+// -----------------------------------------------------------------------
+// <copyright file="LogicalTreeNode.cs" company="Steven Kirk">
+// Copyright 2014 MIT Licence. See licence.md for more information.
+// </copyright>
+// -----------------------------------------------------------------------
+
+namespace Perspex.Diagnostics.ViewModels
+{
+    using System;
+    using Perspex.Controls;
+    using ReactiveUI;
+
+    internal class LogicalTreeNode : TreeNode
+    {
+        private string classes;
+
+        public LogicalTreeNode(ILogical logical)
+            : base((Control)logical)
+        {
+            this.Children = logical.LogicalChildren.CreateDerivedCollection(x => new LogicalTreeNode(x));
+        }
+
+        public static LogicalTreeNode[] Create(object control)
+        {
+            var logical = control as ILogical;
+            return logical != null ? new[] { new LogicalTreeNode(logical) } : null;
+        }
+    }
+}

Perspex.Diagnostics/ViewModels/TreeNode.cs

@@ -0,0 +1,63 @@
+// -----------------------------------------------------------------------
+// <copyright file="LogicalTreeNode.cs" company="Steven Kirk">
+// Copyright 2014 MIT Licence. See licence.md for more information.
+// </copyright>
+// -----------------------------------------------------------------------
+
+namespace Perspex.Diagnostics.ViewModels
+{
+    using System;
+    using System.Reactive;
+    using System.Reactive.Linq;
+    using Perspex.Controls;
+    using ReactiveUI;
+
+    internal class TreeNode : ReactiveObject
+    {
+        private string classes;
+
+        public TreeNode(Control control)
+        {
+            this.Control = control;
+            this.Type = control.GetType().Name;
+
+            control.Classes.Changed.Select(_ => Unit.Default)
+                .StartWith(Unit.Default)
+                .Subscribe(_ =>
+                {
+                    if (control.Classes.Count > 0)
+                    {
+                        this.Classes = "(" + string.Join(" ", control.Classes) + ")";
+                    }
+                    else
+                    {
+                        this.Classes = string.Empty;
+                    }
+                });
+        }
+
+        public IReactiveDerivedList<TreeNode> Children
+        {
+            get;
+            protected set;
+        }
+
+        public string Classes
+        {
+            get { return this.classes; }
+            private set { this.RaiseAndSetIfChanged(ref this.classes, value); }
+        }
+
+        public string Type
+        {
+            get;
+            private set;
+        }
+
+        public Control Control
+        {
+            get;
+            private set;
+        }
+    }
+}

Perspex.Diagnostics/ViewModels/VisualTreeNode.cs

@@ -6,55 +6,30 @@
 
 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
+    internal class VisualTreeNode : TreeNode
     {
         private string classes;
 
         public VisualTreeNode(IVisual visual)
+            : base((Control)visual)
         {
             this.Children = visual.VisualChildren.CreateDerivedCollection(x => new VisualTreeNode(x));
-            this.Type = visual.GetType().Name;
-            this.Visual = visual;
 
-            Control control = visual as Control;
+            if (this.Control != null)
-
-            if (control != null)
             {
-                this.IsInTemplate = control.TemplatedParent != null;
+                this.IsInTemplate = this.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 = string.Empty;
-                    }
-                });
             }
         }
 
-        public IReactiveDerivedList<VisualTreeNode> Children { get; private set; }
+        public bool IsInTemplate { get; private set; }
 
-        public string Classes
+        public static VisualTreeNode[] Create(object control)
         {
-            get { return this.classes; }
+            var visual = control as IVisual;
-            private set { this.RaiseAndSetIfChanged(ref this.classes, value); }
+            return visual != null ? new[] { new VisualTreeNode(visual) } : null;
         }
-
-        public bool IsInTemplate { get; private set; }
-
-        public string Type { get; private set; }
-
-        public IVisual Visual { get; private set; }
     }
 }

Perspex.Themes.Default/ButtonStyle.cs

@@ -78,7 +78,7 @@ namespace Perspex.Themes.Default
                 Padding = new Thickness(3),
                 Content = new ContentPresenter
                 {
-                    Id = "presenter",
+                    Id = "contentPresenter",
                     [~ContentPresenter.ContentProperty] = control[~Button.ContentProperty],
                     [~ContentPresenter.HorizontalAlignmentProperty] = control[~Button.HorizontalContentAlignmentProperty],
                     [~ContentPresenter.VerticalAlignmentProperty] = control[~Button.VerticalContentAlignmentProperty],

Perspex.Themes.Default/CheckBoxStyle.cs

@@ -83,7 +83,7 @@ namespace Perspex.Themes.Default
                         },
                         new ContentPresenter
                         {
-                            Id = "presenter",
+                            Id = "contentPresenter",
                             Margin = new Thickness(4, 0, 0, 0),
                             VerticalAlignment = VerticalAlignment.Center,
                             [~ContentPresenter.ContentProperty] = control[~CheckBox.ContentProperty],

Perspex.Themes.Default/ContentControlStyle.cs

@@ -32,7 +32,7 @@ namespace Perspex.Themes.Default
         {
             return new ContentPresenter
             { 
-                Id = "presenter",
+                Id = "contentPresenter",
                 [~ContentPresenter.ContentProperty] = control[~ContentControl.ContentProperty],
             };
         }

Perspex.Themes.Default/RadioButtonStyle.cs

@@ -82,7 +82,7 @@ namespace Perspex.Themes.Default
                         },
                         new ContentPresenter
                         {
-                            Id = "presenter",
+                            Id = "contentPresenter",
                             Margin = new Thickness(4, 0, 0, 0),
                             VerticalAlignment = VerticalAlignment.Center,
                             [~ContentPresenter.ContentProperty] = control[~RadioButton.ContentProperty],

Perspex.Themes.Default/ScrollViewerStyle.cs

@@ -47,7 +47,7 @@ namespace Perspex.Themes.Default
                 {
                     new ScrollContentPresenter
                     {
-                        Id = "presenter",
+                        Id = "scrollContentPresenter",
                         [~ScrollContentPresenter.ContentProperty] = control[~ScrollViewer.ContentProperty],
                         [~~ScrollContentPresenter.ExtentProperty] = control[~~ScrollViewer.ExtentProperty],
                         [~~ScrollContentPresenter.OffsetProperty] = control[~~ScrollViewer.OffsetProperty],

Perspex.Themes.Default/TabControlStyle.cs

@@ -46,6 +46,7 @@ namespace Perspex.Themes.Default
                     },
                     new ContentPresenter
                     {
+                        Id = "contentPresenter",
                         [~ContentPresenter.ContentProperty] = control[~TabControl.SelectedContentProperty],
                         [Grid.RowProperty] = 1,
                     }

Perspex.Themes.Default/TabItemStyle.cs

@@ -41,7 +41,7 @@ namespace Perspex.Themes.Default
         {
             return new ContentPresenter
             {
-                Id = "presenter",
+                Id = "contentPresenter",
                 [~ContentPresenter.ContentProperty] = control[~TabItem.HeaderProperty],
             };
         }

Perspex.Themes.Default/TabStripStyle.cs

@@ -40,6 +40,7 @@ namespace Perspex.Themes.Default
         {
             return new ItemsPresenter
             {
+                Id = "itemsPresenter",
                 [~ItemsPresenter.ItemsProperty] = control[~ItemsControl.ItemsProperty],
                 [~ItemsPresenter.ItemsPanelProperty] = control[~ItemsControl.ItemsPanelProperty],
             };

Perspex.Themes.Default/ToggleButtonStyle.cs

@@ -93,7 +93,7 @@ namespace Perspex.Themes.Default
                 Padding = new Thickness(3),
                 Content = new ContentPresenter
                 {
-                    Id = "presenter",
+                    Id = "contentPresenter",
                     [~ContentPresenter.ContentProperty] = control[~ToggleButton.ContentProperty],
                     [~ContentPresenter.HorizontalAlignmentProperty] = control[~ToggleButton.HorizontalContentAlignmentProperty],
                     [~ContentPresenter.VerticalAlignmentProperty] = control[~ToggleButton.VerticalContentAlignmentProperty],

Perspex.Themes.Default/WindowStyle.cs

@@ -37,7 +37,7 @@ namespace Perspex.Themes.Default
                 [~Border.BackgroundProperty] = control[~Window.BackgroundProperty],
                 Content = new ContentPresenter
                 {
-                    Id = "presenter",
+                    Id = "contentPresenter",
                     [~ContentPresenter.ContentProperty] = control[~Window.ContentProperty],
                 }
             };