zoukankan      html  css  js  c++  java
  • 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来实现,以下为完整代码:

    <UserControl
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
    	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>
    
    

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

  • 相关阅读:
    ES5学习笔记
    React学习笔记一:入门知识概览
    《微服务架构与实践》学习笔记一:微服务架构理论
    Postgresql学习笔记
    玩转Bootstrap
    Python——XPath使用
    Python定向爬虫实战
    Python文本爬虫实战
    Python学习笔记九:正则表达式
    Python学习笔记八:ORM框架SQLAlchemy
  • 原文地址:https://www.cnblogs.com/YGYH/p/1817658.html
Copyright © 2011-2022 走看看