Windows Phone開發(fā)(30):圖形
圖形如矩形、橢圓、路徑等都從Shape類派生,它們一般表示規(guī)則或不規(guī)則圖形,這些圖形都是簡單的二維圖形,我相信大家都能理解的。
例一:矩形。
請看下面的XAML代碼。
- <Rectangle RadiusX="20" RadiusY="35"
- Fill="Blue"
- Canvas.Left="32" Canvas.Top="28"
- Width="200" Height="156"/>
圖形比較適合在Canvas中定位,所以一系列圖形的示例我都會放到Canvas中,對于Canvas的布局方式,我前面的文章中已經(jīng)介紹過了。
Rectangle類表示一個矩形,RadiusX表示矩形圓角在X軸上的半徑,RadiusY一樣道理,F(xiàn)ill即填充畫刷。
Rectangle類還是比較好理解,畢竟它簡單。
下面我們再來看一個帶輪廓的,并且用漸變畫刷填充的矩形。
- <Rectangle Canvas.Left="12" Canvas.Top="210"
- Stroke="Green"
- Height="112" Width="223"
- StrokeThickness="8.5">
- <Rectangle.Fill>
- <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
- <GradientStop Color="#FF408764" Offset="0"/>
- <GradientStop Color="Gold" Offset="0.65"/>
- <GradientStop Color="#FFC697E0" Offset="1"/>
- </LinearGradientBrush>
- </Rectangle.Fill>
- </Rectangle>
Stroke是輪廓的畫刷,StrokeThickness是輪廓的大小,這些屬性是從Shape類派生的,因此通用于所有子類。
例二:橢圓。
Ellipse表示橢圓,同樣包括正圓這一特例(高度和寬度相等),這個類的使用也是非常簡單,它的所有屬性都是從共同基類Shape繼承而來的。請看下面的例子。
- <Ellipse Canvas.Left="25" Canvas.Top="370"
- Width="145" Height="135"
- Stroke="Blue"
- StrokeThickness="3.8"
- Fill="Silver"/>
下圖顯示以上例子的運行效果。
例三:用Line繪制線段。
嚴格上講,應該叫線段,因為直線是沒有端點,無限延展的,而Line是有兩個端點的,即開始點和結果點。
Line的使用也是很簡單的,就是兩個點(4個坐標),請看實例。
- <Grid>
- <Line X1="60" Y1="35"
- X2="480" Y2="450"
- Stroke="Yellow"
- StrokeThickness="9.2"/>
- </Grid>
Line放在Grid中效果比較明顯,因為Canvas中要設置Left,Top等屬性,這樣會干擾X1,Y1,X2,Y2的設置。
運行效果如下圖所示。
例四:Polygon和Polyline
我們看到,這兩個家伙長得很像,應該是親兄弟。它們具有相同的屬性。
Points:就是構成該圖形的所有點的集合。
這兩個家伙可能你覺得有些頭暈,文檔的解釋可能你看不懂,但是,看不懂不等于不能用,沒關系,我們先來比較一下這兩兄弟有啥不同。
- <Grid>
- <Grid.ColumnDefinitions>
- <ColumnDefinition Width="*"/>
- <ColumnDefinition Width="*"/>
- </Grid.ColumnDefinitions>
- <Grid.RowDefinitions>
- <RowDefinition Height="*"/>
- <RowDefinition Height="Auto"/>
- </Grid.RowDefinitions>
- <TextBlock Grid.Column="0" Grid.Row="1" Text="Polygon" HorizontalAlignment="Center" Margin="0,20" FontSize="35"/>
- <TextBlock Grid.Column="1" Grid.Row="1" Text="Polyline" HorizontalAlignment="Center" Margin="0,20" FontSize="35"/>
- <Polygon Grid.Column="0" Grid.Row="0"
- Margin="50"
- Stroke="Yellow"
- StrokeThickness="6.8"
- Stretch="Fill">
- <Polygon.Points>
- <Point X="2" Y="6"/>
- <Point X="65" Y="37"/>
- <Point X="160" Y="120"/>
- <Point X="22" Y="390"/>
- </Polygon.Points>
- </Polygon>
- <Polyline Grid.Column="1" Grid.Row="0"
- Margin="50"
- Stroke="Yellow"
- StrokeThickness="6.8"
- Stretch="Fill">
- <Polyline.Points>
- <Point X="2" Y="6"/>
- <Point X="65" Y="37"/>
- <Point X="160" Y="120"/>
- <Point X="22" Y="390"/>
- </Polyline.Points>
- </Polyline>
- </Grid>
看到了吧,一個是閉合的,一個是不閉合的,如果看不清楚,自己動手,豐衣足食。
意見,博 客編輯器經(jīng)常死掉,點發(fā)布沒響應,望 CSDN早點修復漏洞。