VB のたまご

作成日: 2017/03/05, 更新日: 2017/03/05



Canvas

    イメージ
  •  Canvas は、Canvas 内に配置したコントロールに対して、相対的な距離関係を保つレイアウトコントロールです。 とりあえずどういう風に動くのか見てみましょう。 以下サンプルです。「CanvasWindow1」という画面で作成していますが、「MainWindow」に書いても構いません。

  • スポンサーリンク


    <Window x:Class="CanvasWindow1"
            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:w02_LayoutControls"
            mc:Ignorable="d"
            Title="CanvasWindow1" Height="300" Width="300">
        
        <Canvas>
    
            <Button x:Name="button1" Content="Top=50" Width="80" Height="20"
                    Canvas.Top="50" />
    
            <Button x:Name="button2" Content="Left=50" Width="80" Height="20"
                    Canvas.Left="50" />
    
            <Button x:Name="button3" Content="Right=50" Width="80" Height="20"
                    Canvas.Right="50" />
    
            <Button x:Name="button4" Content="Bottom=50" Width="80" Height="20"
                    Canvas.Bottom="50" />
    
        </Canvas>
        
    </Window>
    

  •  書いたら実行しましょう。画面をリサイズしてみて、ボタンコントロールがどう動くのか確認しましょう。

  •  Canvas はこんな感じで内部のコントロールを管理します。 ポイントは、「Canvas.Top」、「Canvas.Left」、「Canvas.Right」、「Canvas.Bottom」ですね。

  • イメージ
  •  以下のように、複数設定も可能です。 余談ですが、WPF では必ずしもコントロールに対してコントロール名を割り当てなくても動作することができます(ただし、一意のコントロールを指定することはできなくなります)。 また、同様にサイズを記載しない場合、Auto というサイズ指定になり自動計算されて設定されます。

  • <Window x:Class="CanvasWindow2"
            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:w02_LayoutControls"
            mc:Ignorable="d"
            Title="CanvasWindow2" Height="300" Width="300">
        
        <Canvas>
    
            <Button Content="Top=10, Left=10" Canvas.Top="10" Canvas.Left="10" />
            <Button Content="Top=10, Right=10" Canvas.Top="10" Canvas.Right="10" />
            <Button Content="Bottom=10, Left=10" Canvas.Bottom="10" Canvas.Left="10" />
            <Button Content="Bottom=10, Right=10" Canvas.Bottom="10" Canvas.Right="10" />
    
        </Canvas>
        
    </Window>