図形1

WPFで、円や四角形や線分などを描く方法についてまとめる。

WPFアプリの構成

WPFでは、初めから、二つのファイル

MainWindow.xaml (XAMLファイル)

MainWindow.xaml.cs (C#ファイル)

が用意されている。ファイル名が紛らわしいが、後者はC#のファイルとなっている。

二つのファイルを編集してWPFアプリは作られるが、今回はXAMLファイルはほとんどふれず、 C#を中心に基本的な図形を描くアプリを作成する。

準備

XAMLファイルにはあまり触れないと宣言したが、少しだけ変更を加える。最初、MainWindow.xamlを開くと

<Window x:Class="WpfZukei.MainWindow"
        ~省略~
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        
    </Grid>
</Window>

となっているが、Gridに次のように名前を付ける。

<Window x:Class="WpfZukei.MainWindow"
        ~省略~
        Title="MainWindow" Height="450" Width="800">
    <Grid Name="grid1">
        
    </Grid>
</Window>

Gridは各種GUIの部品を「格子の上に配置する」ためのものであるが、今はその「格子的」機能をほとんど使用しない(1×1の格子とみなす)ので、「GUI部品を配置する土台となるもの」という理解だけをしておく。

このグリッドの中に、図形を描くためのキャンバスを入れて、その中に図形を描く。

Canvas(キャンバス)

以下は、MainWindow.xaml.csという「C#」ファイルに変更を加えていく。

MainWindowクラスのコンストラクタに注目し、この部分を次のように変更する。

public MainWindow(){
    InitializeComponent();
    Canvas canvas1 = new Canvas();
    canvas1.Background = Brushes.LightBlue;
    grid1.Children.Add(canvas1);
}

実行結果.

ライトブルーのWindowが出現する。
（正確にいえば、ライトブルーのキャンバスを持ったWindowが表示される。)

楕円

楕円を描くには、Ellipseというクラスを用いる。この楕円は、canvas1の中の子要素として追加する。

public MainWindow()
{
    InitializeComponent();
    Canvas canvas1 = new Canvas();
    grid1.Children.Add(canvas1);
    Ellipse ellipse1 = new Ellipse();
    ellipse1.Width = 60;
    ellipse1.Height = 60;
    ellipse1.Stroke = Brushes.Black;
    Canvas.SetLeft(ellipse1, 100);
    Canvas.SetTop(ellipse1, 100);
    canvas1.Children.Add(ellipse1);
}

実行結果.

解説

最初の「InitializeComponent()」は初めから入力されいてるもので、Windowの初期化処理を行う部分である。

grid1.Children.Add(canvas1);

では、土台となるgrid1にcanvas1を子要素として追加している。

ellipse1.Width = 60;
ellipse1.Height = 60;

では、楕円の横と縦の幅を指定している。

ellipse1.Stroke = Brushes.Black;

では、楕円の境界の色を定めている。

Canvas.SetLeft(ellipse1, 100);
Canvas.SetTop(ellipse1, 100);

では、ellipse1のcanvas1上での位置を「左から100」「上から100」に設定している。ただし、このellipse1の座標は、楕円の中心座標ではなく、外接する長方形の左上の座標となるので注意が必要。

四角形

四角形を描くには、Rectangleというクラスを用いる。使用法は楕円とほぼ同じ。

public MainWindow()
{
    InitializeComponent();
    Canvas canvas1 = new Canvas();
    grid1.Children.Add(canvas1);
    Rectangle rectangle1 = new Rectangle();
    rectangle1.Width = 160;
    rectangle1.Height = 130;
    rectangle1.Fill = Brushes.Gray;
    Canvas.SetLeft(rectangle1, 100);
    Canvas.SetTop(rectangle1, 100);
    canvas1.Children.Add(rectangle1);
}

実行結果.