天天看點

windows phone (24) Canvas元素A

windows phone (24) Canvas元素A

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的距離

顯示的效果:

windows phone (24) Canvas元素A

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

 下面的示例是示範代碼怎麼設定附加屬性

xaml檔案代碼如下:

            <Canvas Name="cav" SizeChanged="cav_SizeChanged">

 顯然這裡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

繼續閱讀