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>
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"/>
この場合は「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"/>
サンプルコード全体
<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>