Blend4精选案例图解教程(一):丰富的形状(Shape)资源

      Blend4资源面板中内置了丰富的形状素材,为我们在构建程序时提供极大的方便。系统默认内置18种常用形状,通过其属性设置可以自定义出更多衍生形状,或者通过Direct Selection工具手动绘制,我们可以获得更自由的形状编辑。当然我们还可以登陆 Expression Gallery 下载别人分享的素材(似乎并不多),来扩充形状资源库。

      因为形状的用法比较一致,重点是形状的不同属性设置,在此仅举一例来展示形状的常规用法。

 

1、 新建项目

1

2、 项目文件生成后,在Objects and Timeline面板中选中LayoutRoot

3-1

3、 然后在资源(Assets)面板中选中Shapes

 3

4、 我们可以通过双击或者拖拽的方式添加一个形状,这里我们使用Star来作演示,Star已添加到LayoutRoot中,如图

4

5、 选择Selection工具

5

确认五角星处于被选择状态(如未选择可以通过点击选择)

5-1

6、 在属性(Properties)面板中,我们可以对形状进行一系列的属性设置,直到符合我们的需要。下面我们对五角星进行简单的修饰。

把颜色调为红色

6

去边框

6-1 

OK,这样一个标准的五角星制作完成

8

7、 通过组合不同的属性设置,我们可以获得更多的效果:

手绘风格:

14 效果:15

更改Fill属性为渐变效果

11 效果:9

更改外观属性

12 效果:13

如果你愿意,可以做出更多的效果!

 

以上效果我们也可以通过XAML来实现,以下为完整代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<UserControl
    x:Class="ShapesDemo.MainPage"
    Width="640" Height="480">
 
    <Grid x:Name="LayoutRoot" Background="White">
        <ed:RegularPolygon InnerRadius="0.702" Margin="244,193,296,187" PointCount="20" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" StrokeThickness="0" RenderTransformOrigin="0.5,0.5">
            <ed:RegularPolygon.Fill>
                <RadialGradientBrush>
                    <GradientStop Color="#FFFF0001" Offset="0"/>
                    <GradientStop Color="White" Offset="1"/>
                </RadialGradientBrush>
            </ed:RegularPolygon.Fill>
        </ed:RegularPolygon>
    </Grid>
</UserControl>
1
 

      在实际项目中,不推荐使用代码的方式来进行大规模的效果设计,Blend的设计功能,VS无可替代;作为程序员将Blend和VS的结合使用才能带来高效的SilverLight应用程序开发。后续章节,将通过实例一步一步展现Blend的强大魅力!

posted @   iEricLee  阅读(7590)  评论(6编辑  收藏  举报
编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
点击右上角即可分享
微信分享提示