簡単な WPF アプリケーション サンプル

ちまたにいくらでもありますが… WPF の 簡単な サンプルアプリケーション を作成します。 最も単純化された アプリケーション なので、実用に耐えられるものではないと思いますが、基本を押さえるには参考になると思います。

目次

• 概要
• プロジェクトの修正
• Model の作成
• Command の作成
• ViewModel の作成
• View の修正
• 最終的にできあがったプロジェクト

サンプルコード

ダウンロード

概要

画面にはテキストボックスとボタンを配置します。 テキストボックスに名前を入れ、ボタンを押すと「こんにちは、○○さん」というメッセージを表示する、簡単なアプリを作ってみます。

作成されるクラスとその関係は次のクラス図の通りです。

プロジェクトの修正

デフォルト で作成される プロジェクトファイル は名前、配置が何となく違う気がするので修正します。 気にならなければこのセクションは飛ばしてください…

編集前(デフォルト)		編集後
	⇒

1. Commands、Models、ViewModels、Views フォルダの作成します。
2. MainWindow を MainView に変更します。ファイル名を変更してもクラス名が変更されていないので、手動でクラス名も変更します。
3. MainView を Views フォルダ配下 へ移動します。
4. App.xaml の xml(//Application/@StartupUri) を "Views/MainView.xaml" に修正します。

この状態でのプロジェクトファイルのダウンロードは以下のリンクから取得できます。

ダウンロード

Model の作成

Models フォルダ以下に UserModel を作成します。 UserModel は テキスト入力に対応するユーザー情報を表現します。

Models/UserModel.cs

namespace WpfApplication.Models
{
    public class UserModel
    {
        public string Id { get; set; }

        public string Name { get; set; }

        public string Password { get; set; }
    }
}

Command の作成

Commands フォルダ以下に OpenMessageDialogCommand を作成します。 コマンド は System.Windows.Input.ICommand を実装します。 ICommand を実装することで ICommandSource を実装した オブジェクト(Button等) の Commandイベント に関連付けて呼び出せるようになります。 MainView で ボタン を押下されたとき実行される処理を Executeメソッド に記述します。

Commands/OpenMessageDialogCommand.cs

namespace WpfApplication.Commands
{
    using System;
    using System.Windows;
    using System.Windows.Input;

    public class OpenMessageDialogCommand : ICommand
    {
        public event EventHandler CanExecuteChanged;

        public bool CanExecute(object parameter)
        {
            return true;
        }

        public void Execute(object parameter)
        {
            var name = parameter as string;

            var message = "こんにちは、" + name + "さん";

            MessageBox.Show(message);
        }
    }
}

ViewModel の作成

ViewModels フォルダ以下に MainViewModel を作成します。 このクラスは、モデル と コマンド を集約し、 View へ公開します。

ViewModels/MainViewModel.cs

namespace WpfApplication.ViewModels
{
    using WpfApplication.Commands;
    using WpfApplication.Models;

    public class MainViewModel
    {
        public MainViewModel()
        {
            this.OpenMessageDialogCommand = new OpenMessageDialogCommand();
            this.UserModel = new UserModel();
        }

        public OpenMessageDialogCommand OpenMessageDialogCommand { get; set; }

        public UserModel UserModel { get; set; }
    }
}

View の修正

xaml 上から Window の DataContext に MainViewModel を参照する設定を行います。 xaml 上で MainViewModel を参照するために、まずは名前空間の追加を行います。 その上で、テキストボックスには関連するプロパティを、ボタンには関連するコマンドを関連付けます。

<Window x:Class="WpfApplication.MainView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:WpfApplication.ViewModels"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <vm:MainViewModel />
    </Window.DataContext>
    <Grid>
        <TextBox Text="{Binding UserModel.Name}" HorizontalAlignment="Center" Height="23" Margin="0,-33,0,0" TextWrapping="Wrap" VerticalAlignment="Center" Width="240"/>
        <Button Content="Button" HorizontalAlignment="Center" Margin="0,30,0,0" Width="75" Height="20" VerticalAlignment="Center" Command="{Binding Path=OpenMessageDialogCommand}" CommandParameter="{Binding Path=UserModel.Name}"/>
    </Grid>
</Window>

名前空間の追加では、 Window 要素に xmlns:vm="clr-namespace:WpfApplication.ViewModels" を追加します。

DataContext は xaml 上の要素 Window/Window.DataContext/MainViewModel を追加します。

TextBox に表示される文字列は MainViewModel.UserModel.Name と同期をとるよう設定します。 具体的には Text属性 に {Binding UserModel.Name} を指定しています。

Button 要素をクリックした際に実行される コマンド および コマンド引数は Command および CommandParameter で指定します。

最終的にできあがったプロジェクト

出来上がったプロジェクトをビルド、実行するとテキストボックスに入力した文字列を受け取ってメッセージを表示するアプリが動作するハズです。 xaml を編集時にエラーが出るかもしれませんが、一度ビルドを行うと参照情報が更新されて正しく読み取ってくれるようになると思います。

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！

• Facebook ページ
• twitter