稳扎稳打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.voidcn.com/article/p-ounmxjds-tq.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
[源码下载]