C#WPFの道#30！Canvasの書き方と使い方をわかりやすく解説！

Canvasとは？
Canvasの使い方
Canvasの中でコントロールが重なり合うとき
サンプルコード全体

Canvasとは？

Canvasとは，コントロールを座標指定で設置していくときに使うものです。「左から20ピクセル」「上から30ピクセル」の位置にButtonを設置する…などと使うことができます。

Canvasの使い方

Canvasを使う場合は，Canvasの中に任意のコントロールを設置して，Canvas.Left，Canvas.Topなどの値を指定することで，座標を指定します。

座標の指定はCanvas.Left，Canvas.Top 以外にもCanvas.RightとCanvas.Bottomがあります。

通常はCanvas.LeftとCanvas.Topを使用することで，左から何ピクセル，上から何ピクセルという形で指定します。右から指定したい場合はCanvas.Right，下から指定したい場合はCanvas.Bottomを使用しても問題ありません。

<Canvas>
    <Rectangle Canvas.Left="20"
               Canvas.Top="20"
               Width="100" 
               Height="100" 
               Fill="Red"/>
</Canvas>

<Rectangle Canvas.Left="20"

Canvas.Top="20"

Width="100"

Height="100"

Fill="Red"/>

</Canvas>

Canvasの中でコントロールが重なり合うとき

Canvasの中でコントロールが重なりあう場合は，コントロールごとに，Panel.ZIndexを指定することで，前面や背面の制御をすることができます。Panel.ZIndexの値が大きければ大きいほど，前面に表示されます。

<Rectangle Canvas.Left="20"
           Canvas.Top="20"
           Width="100" 
           Height="100" 
           Fill="Red"
           Panel.ZIndex="0"/>
<Rectangle Canvas.Left="20"
           Canvas.Bottom="30"
           Width="100" 
           Height="100" 
           Fill="Blue"
           Panel.ZIndex="2"/>
<Rectangle Canvas.Right="100"
           Canvas.Bottom="100"
           Width="100" 
           Height="100" 
           Fill="Yellow"
           Panel.ZIndex="1"/>

<Rectangle Canvas.Left="20"

Canvas.Top="20"

Width="100"

Height="100"

Fill="Red"

Panel.ZIndex="0"/>

<Rectangle Canvas.Left="20"

Canvas.Bottom="30"

Width="100"

Height="100"

Fill="Blue"

Panel.ZIndex="2"/>

<Rectangle Canvas.Right="100"

Canvas.Bottom="100"

Width="100"

Height="100"

Fill="Yellow"

Panel.ZIndex="1"/>

この場合は「Blue」「Yellow」「Red」の順で表示されます。 Rectangle以外にも，普通にButtonを設置することももちろんできます。

<Rectangle Canvas.Left="20"
           Canvas.Top="20"
           Width="100" 
           Height="100" 
           Fill="Red"
           Panel.ZIndex="0"/>
<Rectangle Canvas.Left="20"
           Canvas.Bottom="30"
           Width="100" 
           Height="100" 
           Fill="Blue"
           Panel.ZIndex="2"/>
<Rectangle Canvas.Right="100"
           Canvas.Bottom="100"
           Width="100" 
           Height="100" 
           Fill="Yellow"
           Panel.ZIndex="1"/>
<Button Canvas.Left="40" Canvas.Top="40"
        Content="AAA" FontSize="20"/>

<Rectangle Canvas.Left="20"

Canvas.Top="20"

Width="100"

Height="100"

Fill="Red"

Panel.ZIndex="0"/>

<Rectangle Canvas.Left="20"

Canvas.Bottom="30"

Width="100"

Height="100"

Fill="Blue"

Panel.ZIndex="2"/>

<Rectangle Canvas.Right="100"

Canvas.Bottom="100"

Width="100"

Height="100"

Fill="Yellow"

Panel.ZIndex="1"/>

<Button Canvas.Left="40" Canvas.Top="40"

Content="AAA" FontSize="20"/>

サンプルコード全体

<Window x:Class="WPF030.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPF030"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="300">
    <Grid>
        <Canvas>
            <Rectangle Canvas.Left="20"
                       Canvas.Top="20"
                       Width="100" 
                       Height="100" 
                       Fill="Red"
                       Panel.ZIndex="0"/>
            <Rectangle Canvas.Left="20"
                       Canvas.Bottom="30"
                       Width="100" 
                       Height="100" 
                       Fill="Blue"
                       Panel.ZIndex="2"/>
            <Rectangle Canvas.Right="100"
                       Canvas.Bottom="100"
                       Width="100" 
                       Height="100" 
                       Fill="Yellow"
                       Panel.ZIndex="1"/>
            <Button Canvas.Left="40" Canvas.Top="40"
                    Content="AAA" FontSize="20"/>
        </Canvas>
    </Grid>
</Window>