Ugrás a tartalomhoz

.NET Programming Technologies

Gergely Kovásznai, Csaba Biró

Eszterházy Károly College

Canvas

Canvas

The Canvas pixel delivers precise layout for ideal fixed-size applications. The elements’ position on Canvas can be done by setting features Top-Left, and the Bottom-Right. It is important to note that Canvas is designed to accommodate drawings - controls have to be avoided here.

Example IV.8 Canvas

IV.9. Canvas

<Window x:Class="Canvas.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="Canvas" Height="400" Width="400">

    <Grid>

        <Canvas Height="200" Width="200" Background="Aqua">

                  <Rectangle Canvas.Left="23" Canvas.Top="38" Width="63" Height="41"                             Fill="Blue"/>

            <Ellipse Canvas.Left="112" Canvas.Top="76" Width="58" Height="58"                           Fill="Red"  />

            <Line Canvas.Right="40" Canvas.Top="30" X2="50" Y2="40"

                  Stroke="Yellow" StrokeThickness="4"/>

            <Button Canvas.Bottom="20" Canvas.Left="40" Width="130"

                    Height="30" Content="This is a button!"></Button>

        </Canvas>

    </Grid>

</Window>

We have an opportunity a Z coordinate assignment for each item with the Zindex feature. A higher index elements appear above the indices are lower.

IV.10. ZIndex

     <Canvas Height="200" Width="200" Background="Aqua">

        <Rectangle Canvas.Left="25" Canvas.Top="40" Width="63" Height="41" Fill="Blue"

                   Canvas.ZIndex="1"/>

        <Ellipse Canvas.Left="45" Canvas.Top="60" Width="58" Height="58" Fill="Red" 

                 Canvas.ZIndex="2"/>

        <Line Canvas.Right="40" Canvas.Top="30" X2="50" Y2="40" 

              Stroke="Yellow" StrokeThickness="4"

              Canvas.ZIndex="3"/>

        <Button Canvas.Bottom="120" Canvas.Left="55" Width="130"

                Height="30" Content=" This is a button!"/>

    </Canvas>