windows phone (14) 簡單瞭解Ellipse元素和Rectangle元素

 System.Windows.Shapes命名空間中包含了顯示向量圖形的元素分別為ellipse和rectangle；

Ellipse類

表示繪製一個橢圓，是派生自Shapes命名空間，比如下面的例子：

        <!--ContentPanel - 在此處放置其他內容-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Ellipse Fill="b" Stroke="WhiteSmoke" StrokeThickness="70" 
                ></Ellipse>
        </Grid>

 上面代碼的Fill屬性工作表明是填充的顏色，Stroke屬性是表示描邊的顏色，StrokeThickness是表示輪廓的寬度，單位是像素，其中Fill和Stroke屬性都是Brush類型的，所以我們自訂他們的顏色，比如實現漸層效果；他的顯示效果比較像雞蛋切片，有木有

 

 但是如果你在textblock標籤中添加這兩個屬性

 

 VerticalAlignment="Center" HorizontalAlignment="Center"

 整個揮之地區都不見了，原因是當ellipse所在的容器允許的情況下，ellipse會填充滿這個容器地區，但是如果被強制縮小，比如加上上面兩個屬性，那麼繪製地區就會無限制的縮小，直至看不到，所以對繪製地區限制大小就變為必須的，限制大小的屬性就是寬（width）和高（height），當我們設定寬和高的時候，整個繪製地區就會變為圓形，比如：

 <!--ContentPanel - 在此處放置其他內容-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Ellipse Fill="Fuchsia" Stroke="WhiteSmoke" StrokeThickness="50" Width="400" Height="400"
                ></Ellipse>
        </Grid>

 效果：

 

 下面用ellipse做出的效果是類似於三維圖形的一個圓，前提是設定寬和高相同：

    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Ellipse  Width="400" Height="400">
                <Ellipse.Fill>
                    <RadialGradientBrush  GradientOrigin="0.4 0.4" >
                        <GradientStop Offset="0" Color="White"></GradientStop>
                        <GradientStop Offset="1" Color="Red"></GradientStop>
                    </RadialGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
        </Grid>

 效果：

 

 由於設定的白色中心點是座標 0.4 0.4 ，位移離與中心座標0.5 .05 所以顯示看起來有種立體感。

 Rectangle類

 是繪製成一個矩形，也是繼承自shape類，比如下面的例子

            <Rectangle Height="400" Width="400" Fill="Brown" Stroke="Beige" StrokeThickness="50"></Rectangle>

上面代碼中的屬性和ellipse中的用法一樣，效果：

 

 rectang還有ellipse不具有的兩個屬性，RadiusX和RadiusY

<Rectangle Height="500" Width="400" Fill="Brown"
                       RadiusX="190"
                       RadiusY="200"
                       Stroke="Beige" StrokeThickness="50">
                
            </Rectangle>

 其中RadiusX表示在X軸方向使矩形的角變圓的橢圓的 x 軸半徑，RadiausY表示是矩形的角變圓的橢圓的Y軸半徑，注意，如果要使矩形的角變圓，這兩個值都不可為空，因為圓角的形成是通過X軸和Y軸根據定義的長度進行畫橢圓得到，然後通過交匯形成圓角，還有就是裡的RadiausX設定的值一定是小於或等於設定的寬度值，如果設定的是負值，系統也會認為值為正值；

：

 

 

 

                                                                                          
跬步積千裡 堅持 建立群：42182428