[Windows 8 App]介面介紹-----Canvas(Canvas設置邊框與背景顏色)

2013-12-20

第三種：Canvas設置邊框與背景顏色

可以使用Canvas的BackGround來設定背景的顏色

但是，Canvas並沒有專屬用來設定邊寬與顏色的屬性

所以，我們將Canvas放進Border元素中就可以達到這效果了!!

我們為Border元素設定一些屬性，BorderThickness屬性和BorderBrush屬性來設定邊框與顏色

同時還可以使用CornerRadius屬性來把邊框定義成圓角

我們繼續使用上面的範例做介紹

在Grid元素內放進一個Border的元素

這是Border元素的程式碼：

<Border BorderThickness="20" BorderBrush="Green" CornerRadius="20" Height="250" Width="250" Margin="972,241,134,327">

<Border BorderThickness="20" BorderBrush="Green" CornerRadius="20" Height="250" Width="250" Margin="972,241,134,327">

設定Border寬度為20，Border的顏色為綠色，Border的寬與高均為250像素

Border裡面放置一個Canvas元素

在Border內的Canvas程式碼很簡單，下面這行，只是設置Canvas的背景顏色

<Canvas Background="Yellow"/>

<Canvas Background="Yellow"/>

完整的Grid元素程式碼

<Border BorderThickness="20" BorderBrush="Green" CornerRadius="20" Height="250" Width="250" Margin="985,210,131,308">
<Canvas Background="Yellow"/>
</Border>

<Border BorderThickness="20" BorderBrush="Green" CornerRadius="20" Height="250" Width="250" Margin="985,210,131,308">
   <Canvas Background="Yellow"/>
</Border>

專案的設計畫面：

完整的【MainPage.xaml】程式碼

<Page
x:Class="Canvas.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Canvas"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Canvas Width="280" Height="280" Margin="83,210,1003,278">
<Canvas Width="240" Height="240" Canvas.Left="30" Canvas.Top="30">
<Rectangle Width="150" Height="150" Fill="Red" Canvas.Left="30" Canvas.Top="30" />
</Canvas>
</Canvas>
<Canvas>
<Ellipse Canvas.ZIndex="4" Canvas.Left="525" Canvas.Top="220" Width="100" Height="100" Fill="Red"/>
<Ellipse Canvas.ZIndex="3" Canvas.Left="545" Canvas.Top="240" Width="150" Height="150" Fill="Yellow"/>
<Ellipse Canvas.ZIndex="2" Canvas.Left="565" Canvas.Top="260" Width="200" Height="200" Fill="Green"/>
</Canvas>
<Border BorderThickness="20" BorderBrush="Green" CornerRadius="20" Height="250" Width="250" Margin="985,210,131,308">
<Canvas Background="Yellow"/>
</Border>
</Grid>
</Page>

<Page
    x:Class="Canvas.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Canvas"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        
        <!--這是第一個Canvas範例-->
        <Canvas Width="280" Height="280" Margin="83,210,1003,278">
            <Canvas Width="240" Height="240" Canvas.Left="30" Canvas.Top="30">
                <Rectangle Width="150" Height="150" Fill="Red" Canvas.Left="30" Canvas.Top="30" />
            </Canvas>
        </Canvas>

        <!--這是第二個Canvas範例-->
        <Canvas>
            <Ellipse Canvas.ZIndex="4" Canvas.Left="525" Canvas.Top="220" Width="100" Height="100" Fill="Red"/>
            <Ellipse Canvas.ZIndex="3" Canvas.Left="545" Canvas.Top="240" Width="150" Height="150" Fill="Yellow"/>
            <Ellipse Canvas.ZIndex="2" Canvas.Left="565" Canvas.Top="260" Width="200" Height="200" Fill="Green"/>
        </Canvas>

        <!--這是第三個Canvas範例-->
        <Border BorderThickness="20" BorderBrush="Green" CornerRadius="20" Height="250" Width="250" Margin="985,210,131,308">
            <Canvas Background="Yellow"/>
        </Border>
    </Grid>
</Page>

完整的設計畫面：

回首頁