教你如何制作Silverlight Visual Tree Inspector
时间:2011-02-12 来源:dragonpig
效果不错,感觉有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知识做成系列,希望大家支持。
相关阅读 更多 +