文章详情

  • 游戏榜单
  • 软件榜单
关闭导航
热搜榜
热门下载
热门标签
php爱好者> php文档>教你如何制作Silverlight Visual Tree Inspector

教你如何制作Silverlight Visual Tree Inspector

时间:2011-02-12  来源:dragonpig

效果不错,感觉有firebug的风范 :) 接下来看看关键技术。

  1. 高亮显示。很简单就是一个红色的Rectangle,当鼠标移动时把它放在当前UI Element的位置,设置相应的Position和Size就OK了。
  2. 如何获得UI的Visual Tree。使用VisualTreeHelper.GetChildrenCount(DependencyObject)可以获得所有Child Visual UI,通过VisualTreeHelper.GetChild(int)一一提取出来。最后递归调用所有子节点就可以反应出层次结构。
  3. 如何获得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知识做成系列,希望大家支持。

相关阅读 更多 +
排行榜 更多 +
找茬脑洞的世界安卓版

找茬脑洞的世界安卓版

休闲益智 下载
滑板英雄跑酷2手游

滑板英雄跑酷2手游

休闲益智 下载
披萨对对看下载

披萨对对看下载

休闲益智 下载