windows phone (24) Canvas元素A

來源:互聯網
上載者:User

 

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.