教你如何制作Silverlight Visual Tree Inspector
Silverlight中有Logic Tree和Visual Tree之分。比如在Xaml中定义了所有UI的logic结构，相当于模型。而运行时，显示的是UI的实际的物理结构。举个例子Button实际上是由更细粒度的UI如border和rectangle绘制成的。这里教大家制作一个 Inspector来动态检查Visual Tree的结构。先看一下实际效果(请按Inspect按钮)：
效果不错，感觉有firebug的风范 :) 接下来看看关键技术。
- 高亮显示。很简单就是一个红色的Rectangle，当鼠标移动时把它放在当前UI Element的位置，设置相应的Position和Size就OK了。
- 如何获得UI的Visual Tree。使用VisualTreeHelper.GetChildrenCount(DependencyObject)可以获得所有Child Visual UI，通过VisualTreeHelper.GetChild(int)一一提取出来。最后递归调用所有子节点就可以反应出层次结构。
- 如何获得UI的坐标值。网上搜了一下发现UIElement.TransformToVisual可以办到。
感觉没啥更深奥的东西了，实际代码也就50行不到，你可以将左边栏换成自己的UserControl，检查一下他的Visual Tree是什么样子的（秉承个人博客的作风就是要精简巧妙，希望大家喜欢）
附赠源码：
XAML
<
UserControl
x:Class
="SilverlightTutorial.InspectorPage"
xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
>
<
Canvas
x:Name
="LayoutRoot"
>
<
Grid
Background
="Cornsilk"
Height
="400"
Width
="600"
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
Width
="*"
/>
<
ColumnDefinition
Width
="*"
/>
</
Grid.ColumnDefinitions
>
<
StackPanel
>
<
Button
Content
="Button"
Height
="23"
Name
="button1"
Width
="75"
/>
<
TextBlock
Height
="28"
Name
="label1"
Width
="120"
Text
="1234"
/>
<
ListBox
Height
="100"
Name
="listBox1"
Width
="120"
>
<
ListBoxItem
>
1
</
ListBoxItem
>
<
ListBoxItem
>
2
</
ListBoxItem
>
<
ListBoxItem
>
3
</
ListBoxItem
>
<
ListBoxItem
>
<
Button
Content
="Button"
Height
="23"
Name
="button2"
Width
="75"
/>
</
ListBoxItem
>
</
ListBox
>
</
StackPanel
>
<
Grid
Grid.Column
="1"
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
="25"
/>
<
RowDefinition
Height
="*"
/>
</
Grid.RowDefinitions
>
<
ToggleButton
Content
="Inspect"
HorizontalAlignment
="Center"
Name
="btnInspect"
/>
<
ScrollViewer
VerticalScrollBarVisibility
="Auto"
Grid.Row
="1"
>
<
TextBlock
Name
="textBlock1"
/>
</
ScrollViewer
>
</
Grid
>
</
Grid
>
<
Rectangle
Name
="rectHighlight"
Stroke
="Red"
Width
="100"
Height
="100"
StrokeThickness
="2"
Visibility
="Collapsed"
/>
</
Canvas
>
</
UserControl
>
CS
using
System.Text;
using
System.Windows;
using
System.Windows.Controls;
using
System.Windows.Input;
using
System.Windows.Media;
namespace
SilverlightTutorial
{
public
partial
class
InspectorPage : UserControl
{
public
InspectorPage()
{
InitializeComponent();
MouseMove
+=
new
MouseEventHandler(Page_MouseMove);
MouseLeftButtonUp
+=
(sender, args)
=>
{
btnInspect.IsChecked
=
false
;
rectHighlight.Visibility
=
System.Windows.Visibility.Collapsed;
};
}
void
Page_MouseMove(
object
sender, MouseEventArgs e)
{
var dpObj
=
(e.OriginalSource
as
DependencyObject);
if
((
bool
)btnInspect.IsChecked
==
false
||
dpObj
==
null
||
dpObj
==
rectHighlight)
return
;
Inspect(dpObj);
if
(dpObj
is
UIElement)
{
var elm
=
(dpObj
as
UIElement);
var generalTransform
=
elm.TransformToVisual(
null
);
var point
=
generalTransform.Transform(
new
Point());
SetHightlight(point, elm.RenderSize);
}
}
void
SetHightlight(Point point, Size size)
{
rectHighlight.Visibility
=
System.Windows.Visibility.Visible;
Canvas.SetLeft(rectHighlight, point.X);
Canvas.SetTop(rectHighlight, point.Y);
rectHighlight.Width
=
size.Width;
rectHighlight.Height
=
size.Height;
}
void
Inspect(DependencyObject dpObj)
{
var sbuf
=
new
StringBuilder();
Inspect(sbuf,
0
, dpObj);
textBlock1.Text
=
sbuf.ToString();
}
void
Inspect(StringBuilder sbuf,
int
level, DependencyObject dpObj)
{
sbuf.AppendLine(
new
string
(
'
'
,
3
*
level)
+
dpObj.GetType().Name);
for
(
int
i
=
0
; i
<
VisualTreeHelper.GetChildrenCount(dpObj); i
++
)
{
Inspect(sbuf, level
+
1
, VisualTreeHelper.GetChild(dpObj, i));
}
}
}
}
PS. 有空会陆续把自己搜集的Silverlight知识做成系列，希望大家支持。