WPF4.5入門その3 「Hello world」 - かずきのBlog@hatena

過去記事

Hello world

ここでは、Visual Studio 2012を使って簡単なHello worldアプリケーションを作成して、WPFのアプリケーション作成の流れと、アプリケーションの構成要素がどんなものか実際に見て行こうと思います。
Visual Studio 2012でWPFアプリケーションを新規作成すると以下のような画面になります。

参照設定に、PresentationCoreとPresentationFrameworkとWindowsBaseとSystem.Xamlという4つが追加されています。この4つがWPFのクラスを含むアセンブリになります。そのほかに、App.xaml(xaml.csとペア)やMainWindow.xaml(xaml.csとペア)が作成されています。

Appクラス

App.xamlは、以下のような内容のXAMLで書かれたファイルになります。XAMLは、WPFでは主にGUIを記述するための言語として使われますがApp.xamlでは、GUIではなくアプリケーション全体を制御するクラスを定義しています。App.xamlのコードを以下に示します。

<Application x:Class="HelloWorld.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
         
    </Application.Resources>
</Application>

見ていただければわかると思いますがXAMLはXMLをベースとして作られています。XML名前空間やXMLの開始タグや閉じタグがあります。x:Classは、このXAMLと対になるコードビハインドのクラスを表しています。HelloWorld.Appクラスは、App.xaml.csの中に以下のように定義されています。

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Threading.Tasks;
using System.Windows;
 
namespace HelloWorld
{
    /// <summary>
    /// App.xaml の相互作用ロジック
    /// </summary>
    public partial class App : Application
    {
    }
}

初期状態では、何も定義されていません。このApp.xamlとApp.xaml.csは、コンパイル時に1つのクラスとして解釈されます。そのため、App.xamlで定義してあることと、App.xaml.csで記述したコードが1つAppクラスになります。Appクラスは、従来のアプリケーションでいうところのMainメソッドを持つエントリポイントのクラスになります。
App.xamlで重要な点は、StartupUri属性でMainWindow.xamlを指定している点です。StartupUriで指定したウィンドウを起動時に表示するようになっているため、このアプリケーションを実行するとMainWindow.xamlが表示されます。

MainWindow.xaml

MainWindow.xamlは、Windowを定義したXAMLになります。

<Window x:Class="HelloWorld.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        
    </Grid>
</Window>

Windowタグが、WPFのウィンドウを表します。そしてタイトルにMainWindowと設定してあり、高さと幅が350と525に設定されていることが確認できます。Windowの中にはGridというタグが定義されています。App.xamlと同様にx:Classという属性でコードビハインドのクラスが指定されています。HelloWorld.MainWindowクラスのコードを以下に示します。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
 
namespace HelloWorld
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

コンストラクタで呼び出されているInitializeComponentメソッドは、XAMLで定義された情報を使用するために必須のメソッドです。このメソッドの呼び出しを忘れると、XAMLで定義した情報が使用できなくなるので気を付けてください。

デザイナによる画面の設計

Visual Studio 2012には、WPFアプリケーションの画面デザインを行うためのデザイナがついています。主にツールボックスとデザイナとドキュメントアウトラインとプロパティを使用します。

ツールボックスからボタンを画面にドラッグアンドドロップして、位置と大きさを調整して以下のように画面に配置します。

ボタンのプロパティを以下のように設定しています。

プロパティ名	説明
x:Name	コントロールをコードビハインドから利用するための変数名。プロパティの名前か、ドキュメントアウトラインで対象をダブルクリックすることで設定可能。helloWorldButtonと設定しています。
Content	表示文字列。Hello worldと設定しています。

その他のHorizontalAlignmentプロパティなどはデザイナ上などで自動的に設定されたものなので、ここでは割愛します。

イベントハンドラの追加とコードの記述

作成したボタンをダブルクリックすると、ボタンのクリックイベントが作成されます。プロパティのイベントからもWindows Formアプリと同じ要領でイベントを作成できます。helloWorldButton_Clickというメソッドが作成されるので以下のようにメッセージボックスを表示するコードを追加してください。

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }
 
    private void helloWorldButton_Click(object sender, RoutedEventArgs e)
    {
        MessageBox.Show("Hello world");
    }
}

コンパイルして実行

アプリケーションを実行すると、以下のようにボタンの置いてある画面が表示されます。ボタンを押すとメッセージボックスが表示されます。