稳扎稳打Silverlight(8) - 2.0图形之基类System.Windows.Shapes.Shape

[索引页]
[源码下载]

稳扎稳打Silverlight(8) - 2.0图形之基类System.Windows.Shapes.Shape

作者： webabcd


介绍
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,6"  strokeDashCap ="Round"   />

             < Line  Grid.Row ="2"  X1 ="0"  Y1 ="0"  X2 ="400"  Y2 ="0"  stroke ="Black"  strokeThickness ="10"  

                  strokeDashArray ="2,6"  strokeDashCap ="Flat"   />

             < Line  Grid.Row ="3"  X1 ="0"  Y1 ="0"  X2 ="400"  Y2 ="0"  stroke ="Red"  strokeThickness ="10"  

                  strokeDashArray ="2,6"  strokeDashCap ="Square"   />

             < Line  Grid.Row ="3"  X1 ="0"  Y1 ="0"  X2 ="400"  Y2 ="0"  stroke ="Black"  strokeThickness ="10"  

                  strokeDashArray ="2,6"  strokeDashCap ="Flat"   />

             < Line  Grid.Row ="4"  X1 ="0"  Y1 ="0"  X2 ="400"  Y2 ="0"  stroke ="Red"  strokeThickness ="10"  

                  strokeDashArray ="2,6"  strokeDashCap ="Triangle"   />

             < Line  Grid.Row ="4"  X1 ="0"  Y1 ="0"  X2 ="400"  Y2 ="0"  stroke ="Black"  strokeThickness ="10"  

                  strokeDashArray ="2,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,6"  strokeStartLineCap ="Square"  strokeEndLineCap ="Triangle"   />

             < Line  Grid.Row ="5"  X1 ="0"  Y1 ="0"  X2 ="400"  Y2 ="0"  stroke ="Black"  strokeThickness ="10"  

                  strokeDashArray ="2,6"  strokeDashCap ="Flat"   />

            

             <!--

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

             -->

             < Line  Grid.Row ="6"  X1 ="0"  Y1 ="0"  X2 ="400"  Y2 ="0"  stroke ="Red"  strokeThickness ="10"  

                  strokeDashArray ="2,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"  stroke ="Red"  strokeThickness ="20"  HorizontalAlignment ="Center"  

                      strokeLineJoin ="Miter"   />

             <!--

            strokeLineJoin.Round - 弧形连接

             -->

             < polyline  Grid.Column ="2"  

                      Points ="10,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"  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"  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"  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
[源码下载]