Windows Phone (24) Canvas Element

 

Canvas
The element indicates that a region can be customized, and the position of the child element can be defined through relative coordinates. In this case, the canvas is invisible.

 

• The height attribute is equal to 0.

• The width attribute is equal to 0.

• The opacity property is equal to 0.

• A parent object of canvas is invisible.

• Background equals null
• Visiblity attribute is equal to collapsed

The following is an example of the effect of drawing the Olympic five-ring flag.

Main Code of XAML:

<!-ContentPanel-place additional content here->
        <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>

From the code above, we can see that we have defined a style object in canvas. resources set, defines the width and height for each elliips, and the width and height are the same, so it is a circle, and defines the color and width of 9, obviously, the stroke attribute is used after this style object is used, so the stroke attribute setting in the style object is useless. We can see the attribute canvas in ellipse. left and canvas. top, lefe indicates the distance between the left-side canvas of the child element, and top indicates the distance between the canvas at the top of the child element.

Display Effect:

 

If the background color is black, the black circle in the fifth ring is invisible, so the background is set to a light color. In fact, a strange thing is that canvas is used in ellipse. left and canvas. right, which is an additional attribute. Left and top are actually defined in the canvas class, but these attributes can be set in their elements (if they are set in a non-child element, this setting will be ignored). In fact, we have used it before, such as grid. row

The following example shows how to set additional attributes in the code.

The code of the XAML file is as follows:

<!-ContentPanel-place additional content here->
         <Grid x: Name = "ContentPanel" Grid.Row = "1" Margin = "12,0,12,0">
             <Canvas Name = "cav" SizeChanged = "cav_SizeChanged">
             </ Canvas>
         </ Grid>

Obviously, canvas does not occupy the actual space, because we do not see the top attributes and the grid is also displayed, but it still has a specific size and sizechange event, when the sizechange event is triggered, first all the child elements should be involved, and then a new ellipse object should be created through a loop and added to the canvas.

// Constructor
         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;
                     // Code reads custom style
                     el.Stroke = this.Resources ["PhoneAccentBrush"] as Brush;
                     el.StrokeThickness = 9;
                     Canvas.SetLeft (el, x);
                     Canvas.SetTop (el, y);

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

Set additional properties left and top

 

Canvas. setleft (El, X );
Canvas. settop (El, y );

These two methods are static methods defined in the canvas. They can be called when no child elements are added or child elements are added, or when the canvas object does not exist; you can also change the static method

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

The setvalue method is used to access an internal dictionary table created and maintained by dependencyobject. The first parameter is key and the second parameter is value.