人立方关系搜索的silverlight控件外观定制揭秘

最新推荐文章于 2024-09-10 19:32:01 发布

置顶 liulike_cn

最新推荐文章于 2024-09-10 19:32:01 发布

阅读量1.5k

点赞数

文章标签： silverlight button microsoft path setter null

本文链接：https://blog.csdn.net/liulike_cn/article/details/3929536

版权

最近微软亚洲研究院的人立方关系搜索新发布了几个Silverlight的应用，包括关系图搜索,六度搜索和新闻时间轴。相信其绚丽的界面效果和赏心悦目的动画给大家留下了深刻印象。这里，我就尝试和大家一起来对这些应用进行揭谜，着重探讨siliverlight中三种定制控件外观的方法：

1) 在代码里面设置控件的风格

这种方法只能对控件的外观做一些简单的，轻量级的修改。比如这个半透明的矩形框：

我们只需要在代码里面这样写:

其中Opacity属性就是设置矩形框的透明度，这里设为0.1，使其非常透明。可惜的是，这个矩形框在后来的设计中去掉了L

2) 把控件的风格写成资源文件

很多情况下，上面的方法就够用了。但是有时我们会遇到这样的情况：我们需要给多个控件设置类似的属性。仍然以上面的矩形框为例子，那代码就会是这样：

……

有没有简单清晰的做法呢?有的！

我们仍然以六度搜索界面中的控件为例子：

图中白色的矩形框显示了两个人物之间的关系来源。现在我们来设置其中黄色框中的两个名字的显示属性。它是一个TextBlock控件,代码里面我们这样写：

这个TextBlock的风格指向了名为”TitleBlock”的资源，其定义为：

</Style>

这样，多个控件可以共享这个名为“TitleBlock”的资源。我们可以通过修改这个资源文件，从而轻易的修改多个控件的外观。

3) 重写控件的模板

有时我们不得不面对复杂一些的情况：

请看图中黄色椭圆框中的控件，它们都是Button控件，但是其外观被完全改头换面了。我会选取其中三个控件作为例子在这里谈一谈：

3.1 箭头按钮

这个按钮的外形是个三角形，其定义为：

它的Style指向了:

<Setter.Value>

<Grid>

<VisualStateManager.VisualStateGroups>

</VisualStateGroup>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Polygon

Points="0,5 5,0 10,5 0,5"

Stroke="White"

StrokeThickness="0">

<Polygon.Fill>

</Polygon.Fill>

</Polygon>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

我们可以看到，这个控件的“内部”被放入了一个Polygon控件，所以这个箭头按钮会呈现这个Polygon所描绘的三角形。

3.2 圆圈按钮

那么如果想做这个具有人立方特色的圆圈按钮，其步骤就可以分为如下几步：

3.2.1 把多个Ellipse控件封装到Button控件中

</Ellipse>

</Ellipse>

</Ellipse>

</TextBlock>

</Grid>

3.2.2 注册一些属性，使得我们可以在代码里面动态的设置它们：

/// <summary>

/// The ellipse1 fill.

/// </summary>

public Brush Ellipse1Fill

{

get

{

return (Brush)base.GetValue(Ellipse1FillProperty);

}

set

{

base.SetValue(Ellipse1FillProperty, value);

}

/// <summary>

/// Register property.

/// </summary>

public static readonly DependencyProperty Ellipse1FillProperty = DependencyProperty.Register("Ellipse1Fill", typeof(Brush), typeof(CircleButton), null);

这里我们就注册了名为Ellipse1Fill的属性，于是就可以设置它的值：