windows phone (24) Canvas元素A

 

Canvas 元素表示定製一個區域，並可以通過相對座標定義子元素位置，在一下情況下Canvas是不可見的

 

• Height 屬性等於 0。

• Width 屬性等於 0。

• Opacity 屬性等於 0。

• Canvas 的某個上級對象不可見。

• Background等於null
• Visiblity屬性等於Collapsed

 下面是一個的示例是一個繪製奧運五環旗的效果

xaml主要代碼：

<!--ContentPanel - 在此處放置其他內容-->
       <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
           <Canvas>
               <Canvas.Resources>
                   <Style x:Key="ellipseStyle" TargetType="Ellipse">
                       <Setter Property="Width" Value="100"></Setter>
                       <Setter Property="Height" Value="100"></Setter>
                       <Setter Property="Stroke" Value="{StaticResource PhoneAccentBrush}"></Setter>
                       <Setter Property="StrokeThickness" Value="9"></Setter>
                   </Style>
               </Canvas.Resources>
               <Ellipse Style="{StaticResource ellipseStyle }" Stroke="Blue" Canvas.Left="50" Canvas.Top="0"></Ellipse>
               <Ellipse Style="{StaticResource ellipseStyle }" Stroke="Yellow" Canvas.Left="150" Canvas.Top="0"></Ellipse>
               <Ellipse Style="{StaticResource ellipseStyle }" Stroke="Black" Canvas.Left="250" Canvas.Top="0"></Ellipse>
               <Ellipse Style="{StaticResource ellipseStyle }" Stroke="Green" Canvas.Left="100" Canvas.Top="50"></Ellipse>
               <Ellipse Style="{StaticResource ellipseStyle }" Stroke="Red" Canvas.Left="200" Canvas.Top="50"></Ellipse>
           </Canvas>
       </Grid>

從上面代碼中可以看到我們定義了一個Style對象，定義在Canvas.Resources集合中，爲每一個Elliips定義了寬和高，並且寬 和高相同，所以就是圓了，並且定義了顏色和粗細爲9，顯然我們在用到這個這個Style對象後，有使用了Stroke屬性，所以Style對象中的 Stroke屬性設置的也就沒有用了；我們看以看到在Ellipse中的屬性Canvas.Left和Canvas.Top，Lefe表示該子元素左側位 置Canvas的距離，Top表示子元素頂部位置Canvas的距離

顯示的效果：

 

如果背景色是黑的，五環中的黑色圈就像是不出來，所以背景設置成了淺色。其實有個蹊蹺的地方，就是在Ellipse 中使用Canvas.Left和Canvas.right,這就是附加屬性，Left和Top實際上是定義在Canvas類中的，但是這些屬性可以在其元 素進行設置（如果設置在非子元素，該設置將被忽略），其實之前我們已經用到了，比如Grid.Row

 下面的示例是演示代碼怎麼設置附加屬性

xaml文件代碼如下：

<!--ContentPanel - 在此處放置其他內容-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Canvas Name="cav" SizeChanged="cav_SizeChanged">
            </Canvas>
        </Grid>

顯然這裏canvas並沒有佔有實際的空間，因爲我們並沒有看到最上面那些屬性，並且grid也是顯示的，但是它仍然有具體的大小和SizeChange 事件，當SizeChange事件觸發是，首先要情況所有的子元素，然後再通過循環創建新的Ellipse對象，並添加到Canvas中去

// 構造函數
        public MainPage()
        {
            InitializeComponent();
        }

        private void cav_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            cav.Children.Clear();
            for (double y = 0; y < e.NewSize.Height; y++)
            {
                for (int x = 0; x < e.NewSize.Width; x++)
                {
                    Ellipse el = new Ellipse();
                    el.Width = 100;
                    el.Height = 100;
                    //代碼讀取自定義樣式
                    el.Stroke = this.Resources["PhoneAccentBrush"] as Brush;
                    el.StrokeThickness = 9;
                    Canvas.SetLeft(el, x);
                    Canvas.SetTop(el, y);

                    cav.Children.Add(el);
                }
            }
        }

 設置附加屬性Left和Top

Canvas.SetLeft(el, x);
Canvas.SetTop(el, y);

這兩個方法是在Canvas中定義的靜態方法，可以在未添加子元素和添加子元素後使用這些方法，或者在Canvas對象不存在的時候調用；也可以把靜態方法換成

el.SetValue(Canvas.LeftProperty,x);
el.SetValue(Canvas.TopProperty,y);

 SetValue方法是訪問一個有DependencyObject創建和維護的內部字典表，第一個參數是key，第二個是value