稳扎稳打Silverlight(8)

介绍

Silverlight 2.0 图形：基类System.Windows.Shapes.Shape（Ellipse, Line, Path, Polygon, Polyline, Rectangle都继承自抽象类System.Windows.Shapes.Shape）。

Fill - 填充（System.Windows.Media.Brush类型）

Stroke - 笔触（System.Windows.Media.Brush类型）

StrokeThickness - 笔触尺寸

Stretch - 拉伸值 [System.Windows.Media.Stretch 枚举]

StrokeDashArray - 虚线和间隙的值的集合 [System.Windows.Media.Stretch 枚举]

StrokeDashCap - 虚线两端（线帽）的类型 [System.Windows.Media.PenLineCap 枚举]

StrokeStartLineCap - 虚线起始端（线帽）的类型 [System.Windows.Media.PenLineCap 枚举]

StrokeEndLineCap - 虚线终结端（线帽）的类型 [System.Windows.Media.PenLineCap 枚举]

StrokeDashOffset - 虚线的起始位置。从虚线的起始端的 StrokeDashOffset 距离处开始描绘虚线

StrokeLineJoin - 图形连接点处的连接类型 [System.Windows.Media.PenLineJoin 枚举]

StrokeMiterLimit - 斜接长度 与 StrokeThickness/2 的比值。默认值 10，最小值 1

在线DEMO

http://www.cnblogs.com/webabcd/archive/2008/10/09/1307486.html

示例

Shape.xaml

<UserControl x:Class="Silverlight20.Shape.Shape"
　　xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
　　 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
　　 <StackPanel HorizontalAlignment="Left">

　　　　<Grid Margin="10" HorizontalAlignment="Left">

　　　　　　<!--
　　　　　　Fill - 填充（System.Windows.Media.Brush类型）
　　　　　　Stroke - 笔划（边框）（System.Windows.Media.Brush类型）
　　　　　　StrokeThickness - 笔划（边框）尺寸
　　　　　　-->
　　　　　　<Rectangle Width="200" Height="50" Fill="Red" Stroke="Yellow" StrokeThickness="3" />

　　　　</Grid>

　　　　<Grid Width="200" Height="200" Margin="10" HorizontalAlignment="Left" ShowGridLines="True">
　　　　　　<Grid.RowDefinitions>
　　　　　　　　<RowDefinition Height="100" />
　　　　　　　　<RowDefinition Height="100" />
　　　　　　</Grid.RowDefinitions>
　　　　　　<Grid.ColumnDefinitions>
　　　　　　　　<ColumnDefinition Width="100" />
　　　　　　　　<ColumnDefinition Width="100" />
　　　　　　</Grid.ColumnDefinitions>

　　　　　　<!--Stretch属性 - 拉伸值 [System.Windows.Media.Stretch 枚举]-->

　　　　　　<!--
　　　　　　Stretch.None - 不做处理
　　　　　　　　不做任何拉伸处理，填充内容保持原始大小
　　　　　　-->
　　　　　　<Rectangle Grid.Row="0" Grid.Column="0"
　　　　　　　　　　 Width="80" Height="40" Fill="Red" Stroke="Yellow" StrokeThickness="6"
　　　　　　　　　　 Stretch="None" />

　　　　　　<!--
　　　　　　Stretch.Fill - 充满
　　　　　　　　调整填充内容，以充满整个容器，填充内容比例变为容器比例。默认值　　　　　　
　　　　　　-->
　　　　　　<Rectangle Grid.Row="0" Grid.Column="1"
　　　　　　　　　　 Width="180" Height="40" Fill="Red" Stroke="Yellow" StrokeThickness="6"
　　　　　　　　　　 Stretch="Fill" />

　　　　　　<!--
　　　　　　Stretch.Uniform - 等比适应
　　　　　　　　调整填充内容，以适合容器尺寸，填充内容会做等比例调整
　　　　　　　　如果填充内容与容器比例不一样，那么填充内容调整的结果为：
　　　　　　　　使得填充内容的宽与容器的宽相等，或者 填充内容的高与容器的高相等。填充内容会被完整显示
　　　　　　-->
　　　　　　<Rectangle Grid.Row="1" Grid.Column="0"
　　　　　　　　　　 Width="80" Height="40" Fill="Red" Stroke="Yellow" StrokeThickness="6"
　　　　　　　　　　 Stretch="Uniform" />

　　　　　　<!--
　　　　　　Stretch.UniformToFill - 等比充满
　　　　　　　　调整填充内容，以适合容器尺寸，填充内容会做等比例调整
　　　　　　　　如果填充内容与容器比例不一样，那么填充内容调整的结果为：
　　　　　　　　使得填充内容的宽与容器的宽相等，并且 填充内容的高与容器的高相等。填充内容会被做相应的剪裁
　　　　　　-->
　　　　　　<Rectangle Grid.Row="1" Grid.Column="1"
　　　　　　　　　　 Width="80" Height="40" Fill="Red" Stroke="Yellow" StrokeThickness="6"
　　　　　　　　　　 Stretch="UniformToFill" />

　　　　</Grid>

　　　　<Grid Margin="10" HorizontalAlignment="Left">
　　　　　　<Grid.RowDefinitions>
　　　　　　　　<RowDefinition Height="20" />
　　　　　　　　<RowDefinition Height="20" />
　　　　　　　　<RowDefinition Height="20" />
　　　　　　　　<RowDefinition Height="20" />
　　　　　　　　<RowDefinition Height="20" />
　　　　　　　　<RowDefinition Height="20" />
　　　　　　　　<RowDefinition Height="20" />
　　　　　　</Grid.RowDefinitions>

　　　　　　<!--
　　　　　　StrokeDashArray - 虚线和间隙的值的集合 [System.Windows.Media.Stretch 枚举]
　　　　　　　　奇数项为虚线长度；偶数项为间隙长度；如果只有一个值，则虚线长度和间隙长度都为该值
　　　　　　-->
　　　　　　<Line Grid.Row="0" X1="0" Y1="0" X2="400" Y2="0" Stroke="Red" StrokeThickness="10"
　　　　　　　　　StrokeDashArray="2" />

　　　　　　<!--
　　　　　　StrokeDashCap - 虚线两端（线帽）的类型 [System.Windows.Media.PenLineCap 枚举]
　　　　　　　　PenLineCap.Flat - 无。默认值
　　　　　　　　PenLineCap.Round - 直径等于 StrokeThickness
　　　　　　　　PenLineCap.Square - 高度等于 StrokeThickness 并且 宽度等于 StrokeThickness/2
　　　　　　　　PenLineCap.Triangle - 底边长等于 StrokeThickness 的等腰直角三角形
　　　　　　-->
　　　　　　<Line Grid.Row="1" X1="0" Y1="0" X2="400" Y2="0" Stroke="Red" StrokeThickness="10"
　　　　　　　　　StrokeDashArray="2,4,6" StrokeDashCap="Flat" />

　　　　　　<Line Grid.Row="2" X1="0" Y1="0" X2="400" Y2="0" Stroke="Red" StrokeThickness="10"
　　　　　　　　　StrokeDashArray="2,4,6" StrokeDashCap="Round" />
　　　　　　<Line Grid.Row="2" X1="0" Y1="0" X2="400" Y2="0" Stroke="Black" StrokeThickness="10"
　　　　　　　　　StrokeDashArray="2,4,6" StrokeDashCap="Flat" />

　　　　　　<Line Grid.Row="3" X1="0" Y1="0" X2="400" Y2="0" Stroke="Red" StrokeThickness="10"
　　　　　　　　　StrokeDashArray="2,4,6" StrokeDashCap="Square" />
　　　　　　<Line Grid.Row="3" X1="0" Y1="0" X2="400" Y2="0" Stroke="Black" StrokeThickness="10"
　　　　　　　　　StrokeDashArray="2,4,6" StrokeDashCap="Flat" />

　　　　　　<Line Grid.Row="4" X1="0" Y1="0" X2="400" Y2="0" Stroke="Red" StrokeThickness="10"
　　　　　　　　　StrokeDashArray="2,4,6" StrokeDashCap="Triangle" />
　　　　　　<Line Grid.Row="4" X1="0" Y1="0" X2="400" Y2="0" Stroke="Black" StrokeThickness="10"
　　　　　　　　　StrokeDashArray="2,4,6" StrokeDashCap="Flat" />

　　　　　　<!--
　　　　　　StrokeStartLineCap - 虚线起始端（线帽）的类型 [System.Windows.Media.PenLineCap 枚举]
　　　　　　StrokeEndLineCap - 虚线终结端（线帽）的类型 [System.Windows.Media.PenLineCap 枚举]
　　　　　　-->
　　　　　　<Line Grid.Row="5" X1="0" Y1="0" X2="400" Y2="0" Stroke="Red" StrokeThickness="10"
　　　　　　　　　StrokeDashArray="2,4,6" StrokeStartLineCap="Square" StrokeEndLineCap="Triangle" />
　　　　　　<Line Grid.Row="5" X1="0" Y1="0" X2="400" Y2="0" Stroke="Black" StrokeThickness="10"
　　　　　　　　　StrokeDashArray="2,4,6" StrokeDashCap="Flat" />

　　　　　　<!--
　　　　　　StrokeDashOffset - 虚线的起始位置。从虚线的起始端的 StrokeDashOffset 距离处开始描绘虚线
　　　　　　-->
　　　　　　<Line Grid.Row="6" X1="0" Y1="0" X2="400" Y2="0" Stroke="Red" StrokeThickness="10"
　　　　　　　　　StrokeDashArray="2,4,6" StrokeDashOffset="1" />

　　　　</Grid>

　　　　<Grid Margin="10" HorizontalAlignment="Left" ShowGridLines="True">
　　　　　　<Grid.ColumnDefinitions>
　　　　　　　　<ColumnDefinition Width="120" />
　　　　　　　　<ColumnDefinition Width="120" />
　　　　　　　　<ColumnDefinition Width="120" />
　　　　　　</Grid.ColumnDefinitions>

　　　　　　<!--StrokeLineJoin属性 - 图形连接点处的连接类型 [System.Windows.Media.PenLineJoin 枚举]-->

　　　　　　<!--
　　　　　　StrokeLineJoin.Bevel - 线形连接
　　　　　　-->
　　　　　　<Polyline Grid.Column="0"
　　　　　　　　　　　Points="10,100 50,10 100,100" Stroke="Red" StrokeThickness="20" HorizontalAlignment="Center"
　　　　　　　　　　　StrokeLineJoin="Bevel" />

　　　　　　<!--
　　　　　　StrokeLineJoin.Miter - 角形连接。默认值
　　　　　　-->
　　　　　　<Polyline Grid.Column="1"
　　　　　　　　　　　Points="10,100 50,10 100,100" Stroke="Red" StrokeThickness="20" HorizontalAlignment="Center"
　　　　　　　　　　　StrokeLineJoin="Miter" />

　　　　　　<!--
　　　　　　StrokeLineJoin.Round - 弧形连接
　　　　　　-->
　　　　　　<Polyline Grid.Column="2"
　　　　　　　　　　　Points="10,100 50,10 100,100" Stroke="Red" StrokeThickness="20"　HorizontalAlignment="Center"
　　　　　　　　　　　StrokeLineJoin="Round" />

　　　　</Grid>

　　　　<Grid Margin="10" HorizontalAlignment="Left"　ShowGridLines="True">
　　　　　　<Grid.ColumnDefinitions>
　　　　　　　　<ColumnDefinition Width="120" />
　　　　　　　　<ColumnDefinition Width="120" />
　　　　　　　　<ColumnDefinition Width="120" />
　　　　　　</Grid.ColumnDefinitions>

　　　　　　<!--StrokeMiterLimit属性 - 斜接长度（蓝色线部分）与 StrokeThickness/2 的比值。默认值 10，最小值 1-->

　　　　　　<Polyline Grid.Column="0"
　　　　　　　　　　　Points="0,100 50,10 100,100" Stroke="Red" StrokeThickness="20"
　　　　　　　　　　　StrokeMiterLimit="1" />
　　　　　　<Line Grid.Column="0" X1="0" Y1="100" X2="50" Y2="10" Stroke="Yellow" />
　　　　　　<Line Grid.Column="0" X1="50" Y1="10" X2="100" Y2="100" Stroke="Yellow" />
　　　　　　<Line Grid.Column="0" X1="50" Y1="10" X2="50" Y2="0" Stroke="Blue" />

　　　　　　<Polyline Grid.Column="1"
　　　　　　　　　　　Points="0,100 50,10 100,100" Stroke="Red" StrokeThickness="20"
　　　　　　　　　　　StrokeMiterLimit="2.0" />
　　　　　　<Line Grid.Column="1" X1="0" Y1="100" X2="50" Y2="10" Stroke="Yellow" />
　　　　　　<Line Grid.Column="1" X1="50" Y1="10" X2="100" Y2="100" Stroke="Yellow" />
　　　　　　<Line Grid.Column="1" X1="50" Y1="10" X2="50" Y2="-10" Stroke="Blue" />

　　　　　　<Polyline Grid.Column="2"
　　　　　　　　　　　Points="0,100 50,10 100,100" Stroke="Red" StrokeThickness="20"
　　　　　　　　　　　/>
　　　　　　<Line Grid.Column="2" X1="0" Y1="100" X2="50" Y2="10" Stroke="Yellow" />
　　　　　　<Line Grid.Column="2" X1="50" Y1="10" X2="100" Y2="100" Stroke="Yellow" />
　　　　　　<Line Grid.Column="2" X1="50" Y1="10" X2="50" Y2="-10" Stroke="Blue" />

　　　　</Grid>

　　</StackPanel>
</UserControl>

OK

源码下载地址：http://files.cnblogs.com/webabcd/Silverlight.rar

返回“稳扎稳打Silverlight 2.0系列教程”目录页

时间： 2024-02-25 01:27:44

稳扎稳打Silverlight(8)的相关文章

稳扎稳打Silverlight(4)

稳扎稳打Silverlight(4) - 2.0控件之DataGrid,DatePicker,Grid,GridSplitter,HyperlinkButton,Image 在线DEMO http://www.cnblogs.com/webabcd/archive/2008/10/09/1307486.html 示例 1.DataGrid.xaml <UserControl xmlns:data="clr-namespace:System.Windows.Controls;assembly

稳扎稳打Silverlight(36)

返回"稳扎稳打Silverlight 3.0系列文章索引" 稳扎稳打Silverlight(36) - 3.0控件之TreeView,ListBox增强,DataGrid增强,MediaElement增强 介绍 Silverlight 3.0 控件一览: TreeView - 树控件 ListBox - 改进:支持多选 DataGrid - 改进:结合 PagedCollectionView 实现数据分组, 增加了一些编辑数据的相关事件, 结合 DataAnnotations 实现数据

稳扎稳打Silverlight(51)

稳扎稳打Silverlight(51) - 4.0绑定之数据验证IDataErrorInfo,INotifyDataErrorInfo 介绍 Silverlight 4.0 数据验证: * IDataErrorInfo - 对数据实体类提供自定义验证支持..NET Framework 也有此接口,可以方便移植 * INotifyDataErrorInfo - 对数据实体类提供自定义验证支持,比 IDataErrorInfo 功能更强大.INotifyDataErrorInfo 支持异步验证,这就

稳扎稳打Silverlight(47)

稳扎稳打Silverlight(47) - 4.0UI之操作剪切板,隐式样式,CompositeTransform,拖放外部文件到程序中 介绍 Silverlight 4.0 用户界面(UI)相关: * 操作剪切板 - 支持获取或设置剪切板中的文本信息 * 隐式样式(Implicit Style) - 将某种样式应用到某种类型的所有元素,即全局样式 * CompositeTransform - 将多种转换方式合而为一 * 拖动(Drag)外部文件,并将其放到(Drop) Silverlight

稳扎稳打Silverlight(46)

稳扎稳打Silverlight(46) - 4.0UI之FlowDirection,TextTrimming,响应鼠标滚轮事件,响应鼠标右键事件,全屏的新特性 介绍 Silverlight 4.0 用户界面(UI)相关: * FlowDirection - 指定文本或界面元素在它们的父元素中的流动方向 * TextTrimming - 文字溢出时的显示方式 * 响应鼠标的滚轮事件 * 响应鼠标的右键事件 * 全屏的新特性 - 当其他程序获得焦点时,是否退出全屏模式 在线DEMO http://w

稳扎稳打Silverlight(45)

稳扎稳打Silverlight(45) - 4.0浏览器外运行(Out Of Browser)之被信任的应用程序(Trusted Application) 介绍 Silverlight 4.0 OOB 之 被信任的应用程序: * 概述 * 访问本地文件系统 * 调用 COM 接口 * 自定义窗口样式和行为 在线DEMO http://www.cnblogs.com/webabcd/archive/2010/08/09/1795417.html 示例 1.关于"被信任的应用程序"的简要概

稳扎稳打Silverlight(44)

稳扎稳打Silverlight(44) - 4.0浏览器外运行(Out Of Browser)之OOB的增强及其新增的NotificationWindow 介绍 Silverlight 4.0 OOB 模式的新特性: * 新增了 Closing 事件 * 实现程序在 OOB 模式下的自动更新 * NotificationWindow - 在 OOB 模式下显示通知窗口,也就是 toast * 实现自定义的 NotificationWindow 在线DEMO http://www.cnblogs.

稳扎稳打Silverlight(41)

返回"稳扎稳打Silverlight 3.0系列文章索引" 稳扎稳打Silverlight(41) - 3.0Tip/Trick之GPU加速,Out-Of-Browser,应用程序库缓存,合并ResourceDictionary,应用程序扩展服务,Silverlight插件对象 介绍 Silverlight 3.0 提示和技巧系列 GPU 加速 - 对 GPU 加速的支持 Out-Of-Browser -浏览器外运行,即支持脱离浏览器运行 应用程序库缓存 - 将 dll(zip) 缓存

稳扎稳打Silverlight(40)

返回"稳扎稳打Silverlight 3.0系列文章索引" 稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding,RelativeSource,样式之动态修改样式,样式继承,自定义光标 介绍 Silverlight 3.0 绑定的新增功能,样式相关的新增功能 Element to Element Binding - Element 到 Element 之间的绑定 RelativeSource - 一个扩展标记,用于指定关联数据源为

稳扎稳打Silverlight(39)

返回"稳扎稳打Silverlight 3.0系列文章索引" 介绍 Silverlight 3.0 通信的新增功能 二进制XML通信 - 与 WCF 服务间通信,可以使用二进制 XML 传递数据(提高传输性能) 本地连接 - 允许客户端的两个 Silverlight 程序之间直接进行通信(不用通过服务端) 在线DEMO http://www.cnblogs.com/webabcd/archive/2009/08/04/1538238.html 示例 1.以二进制 XML 传递数据的演示