Canvas In Wpf

Canvas is very simple panel in wpf. Arranging elements inside canvas is very easy. You can positioning element in canvas by using canvas properties: Canvas.Left, Canvas.Right, Canvas.Top and Canvas.Bottom.

Canvas enable you to specify coordinates of any element. If you not specify any coordinates of any element then that element place on default position i.e. top-left corner.

You can not specify more than two corner properties position of any element, means you can use one of the combination of properties when you specify any element position using two corner: Canvas.Left and Canvas.Top, Canvas.Left and Canvas.Bottom, Canvas.Right and Canvas.Top, Canvas.Right and Canvas.Bottom.

If you specify Canvas.Left as well Canvas.Right then Canvas.Right will ignored, similarly if you specify Canvas.Top as well as Canvas.Bottom then Canvas.Bottom will ignored.

Below example demonstrate that how to set corner position of any element inside canvas.

<Window x:Class="CanvasDemo.Canvas"



        Title="Canvas" Height="300" Width="300">


        <Ellipse Width="50" Height="50" Fill ="Red" />

        <Ellipse Width="50" Height="50" Fill="DodgerBlue" Canvas.Top="37" Canvas.Left ="36" />

        <Ellipse Width="50" Height="50" Fill="DeepPink" Canvas.Top="73" Canvas.Left ="74" />

        <Ellipse Width="50" Height="50" Fill="DarkViolet" Canvas.Top="108" Canvas.Left ="114" />

        <Ellipse Width="50" Height="50" Fill="DarkOrange" Canvas.Top="144" Canvas.Left ="153" />

        <Ellipse Width="50" Height="50" Fill="Green" Canvas.Left="191" Canvas.Top ="179" />

        <Ellipse Width="50" Height="50" Fill="Yellow" Canvas.Right="0" Canvas.Bottom ="0" />



Canvas default z order

Default z order of elements in canvas is defined by order of elements in canvas. You can overlap one element on other elements by using default z order.

Below example demonstrate that default z order of elements inside canvas that depends on order of element.

<Window x:Class="CanvasDemo.Canvas"



        Title="Default z order" Height="300" Width="300">   

        <!--Default Z order-->


    <Ellipse Width="70" Height="70" Fill="DarkViolet" Canvas.Top="106" Canvas.Left ="114" />

    <Ellipse Width="80" Height="80" Fill="Red" Canvas.Top="42" Canvas.Left ="108" />

    <Ellipse Width="80" Height="80" Fill="DarkOrange" Canvas.Top="73" Canvas.Left ="164" />

    <Ellipse Width="80" Height="80" Fill="Green" Canvas.Top="133" Canvas.Left ="164" />

    <Ellipse Width="80" Height="80" Fill="Yellow" Canvas.Left="104" Canvas.Top ="162" />

    <Ellipse Width="80" Height="80" Fill="DodgerBlue" Canvas.Left="53" Canvas.Top ="133" />            

    <Ellipse Width="80" Height="80" Fill="DeepPink" Canvas.Top="73" Canvas.Left ="53" />         



Canvas ZIndex property

You can define z order by positioning as well as ZIndex.

Below example demonstrate that how to specify ZIndex.

<Window x:Class="CanvasDemo.Canvas"



        Title="Z Index" Height="300" Width="300">

        <!--Z Index-->


            <Ellipse Width="70" Height="70" Fill="DarkViolet"

                                            Canvas.Top="106" Canvas.Left="114" Panel.ZIndex="6" />

            <Ellipse Width="80" Height="80" Fill="Red" 

                                            Canvas.Top="42" Canvas.Left="108" Panel.ZIndex="5" />

            <Ellipse Width="80" Height="80" Fill="DarkOrange" 

                                            Canvas.Top="73" Canvas.Left="164" Panel.ZIndex="0" />

            <Ellipse Width="80" Height="80" Fill="Green" 

                                            Canvas.Top="133" Canvas.Left="164" Panel.ZIndex="1" />

            <Ellipse Width="80" Height="80" Fill="Yellow" 

                                            Canvas.Left="104" Canvas.Top="162" Panel.ZIndex="2" />

            <Ellipse Width="80" Height="80" Fill="DodgerBlue" 

                                            Canvas.Left="53" Canvas.Top="133" Panel.ZIndex="3" />

            <Ellipse Width="80" Height="80" Fill="DeepPink" 

                                            Canvas.Top="73" Canvas.Left="53" Panel.ZIndex="4" />