





















Silverlight中有Logic Tree和Visual Tree之分。比如在Xaml中定义了所有UI的logic结构,相当于模型。而运行时,显示的是UI的实际的物理结构。举个例子Button实际上是由更细粒度的UI如border和rectangle绘制成的。这里教大家制作一个 Inspector来动态检查Visual Tree的结构。先看一下实际效果(请按Inspect按钮):
效果不错,感觉有firebug的风范 :) 接下来看看关键技术。
感觉没啥更深奥的东西了,实际代码也就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知识做成系列,希望大家支持。
此内容由惯性聚合(RSS阅读器)自动聚合整理,仅供阅读参考。 原文来自 — 版权归原作者所有。