[索引頁]
[×××]


穩扎穩打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://webabcd.blog.51cto.com/1787395/342779?


示例
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
[×××]

轉載于:https://blog.51cto.com/webabcd/342834

總結

以上是生活随笔為你收集整理的稳扎稳打Silverlight(8) - 2.0图形之基类System.Windows.Shapes.Shape的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。