Windows Phone開發（30）：圖形

圖形如矩形、橢圓、路徑等都從Shape類派生，它們一般表示規則或不規則圖形，這些圖形都是簡單的二維圖形，我相信大家都能理解的。

例一：矩形。

請看下面的XAML代碼。

 

<Rectangle RadiusX="20" RadiusY="35"<br /> Fill="Blue"<br /> Canvas.Left="32" Canvas.Top="28"<br /> Width="200" Height="156"/>

圖形比較適合在Canvas中定位，所以一系列圖形的樣本我都會放到Canvas中，對於Canvas的布局方式，我前面的文章中已經介紹過了。
Rectangle類表示一個矩形，RadiusX表示矩形圓角在X軸上的半徑，RadiusY一樣道理，Fill即填充畫刷。
Rectangle類還是比較好理解，畢竟它簡單。

下面我們再來看一個帶輪廓的，並且用漸層畫刷填充的矩形。

<Rectangle Canvas.Left="12" Canvas.Top="210"<br /> Stroke="Green"<br /> Height="112" Width="223"<br /> StrokeThickness="8.5"><br /> <Rectangle.Fill><br /> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"><br /> <GradientStop Color="#FF408764" Offset="0"/><br /> <GradientStop Color="Gold" Offset="0.65"/><br /> <GradientStop Color="#FFC697E0" Offset="1"/><br /> </LinearGradientBrush><br /> </Rectangle.Fill><br /> </Rectangle>

 

Stroke是輪廓的畫刷，StrokeThickness是輪廓的大小，這些屬性是從Shape類派生的，因此通用於所有子類。

例二：橢圓。

Ellipse表示橢圓，同樣包括正圓這一特例（高度和寬度相等），這個類的使用也是非常簡單，它的所有屬性都是從共同基類Shape繼承而來的。
請看下面的例子。

<Ellipse Canvas.Left="25" Canvas.Top="370"<br /> Width="145" Height="135"<br /> Stroke="Blue"<br /> StrokeThickness="3.8"<br /> Fill="Silver"/>

顯示以上例子的運行效果。

 

 

 

例三：用Line繪製線段。

嚴格上講，應該叫線段，因為直線是沒有端點，無限延展的，而Line是有兩個端點的，即開始點和結果點。
Line的使用也是很簡單的，就是兩個點（4個座標），請看執行個體。

<Grid><br /> <Line X1="60" Y1="35"<br /> X2="480" Y2="450"<br /> Stroke="Yellow"<br /> StrokeThickness="9.2"/><br /> </Grid>

Line放在Grid中效果比較明顯，因為Canvas中要設定Left，Top等屬性，這樣會干擾X1，Y1，X2，Y2的設定。
運行效果如所示。

 

例四：Polygon和Polyline

我們看到，這兩個傢伙長得很像，應該是親兄弟。
它們具有相同的屬性。

Points：就是構成該圖形的所有點的集合。

這兩個傢伙可能你覺得有些頭暈，文檔的解釋可能你看不懂，但是，看不懂不等於不能用，沒關係，我們先來比較一下這兩兄弟有啥不同。

<Grid><br /> <Grid.ColumnDefinitions><br /> <ColumnDefinition Width="*"/><br /> <ColumnDefinition Width="*"/><br /> </Grid.ColumnDefinitions><br /> <Grid.RowDefinitions><br /> <RowDefinition Height="*"/><br /> <RowDefinition Height="Auto"/><br /> </Grid.RowDefinitions><br /> <TextBlock Grid.Column="0" Grid.Row="1" Text="Polygon" HorizontalAlignment="Center" Margin="0,20" FontSize="35"/><br /> <TextBlock Grid.Column="1" Grid.Row="1" Text="Polyline" HorizontalAlignment="Center" Margin="0,20" FontSize="35"/><br /> <Polygon Grid.Column="0" Grid.Row="0"<br /> Margin="50"<br /> Stroke="Yellow"<br /> StrokeThickness="6.8"<br /> Stretch="Fill"><br /> <Polygon.Points><br /> <Point X="2" Y="6"/><br /> <Point X="65" Y="37"/><br /> <Point X="160" Y="120"/><br /> <Point X="22" Y="390"/><br /> </Polygon.Points><br /> </Polygon><br /> <Polyline Grid.Column="1" Grid.Row="0"<br /> Margin="50"<br /> Stroke="Yellow"<br /> StrokeThickness="6.8"<br /> Stretch="Fill"><br /> <Polyline.Points><br /> <Point X="2" Y="6"/><br /> <Point X="65" Y="37"/><br /> <Point X="160" Y="120"/><br /> <Point X="22" Y="390"/><br /> </Polyline.Points><br /> </Polyline><br /> </Grid>

 

看到了吧，一個是閉合的，一個是不閉合的，如果看不清楚，自己動手，豐衣足食。

 

 

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

意見，博 客編輯器經常死掉，點發布沒響應，望 CSDN早點修複漏洞。