方法 : C# WPF アプリケーションを作成する

  • [アーティクル]

更新 : 2007 年 11 月

このトピックの目的は、簡単な Windows Presentation Foundation (WPF) アプリケーションを作成し、Visual C# Express Edition 統合開発環境 (IDE: Integrated Development Environment) の理解を深める方法を示すことです。Windows フォーム アプリケーションと同じように、WPF アプリケーションも、ツールボックスからデザイン画面にコントロールをドラッグしてデザインすることができます。WPF プロジェクトの IDE には、デザイナ、[プロパティ] ウィンドウ、ツールボックスに加えて、XAML が表示されるウィンドウがあります。XAML は、Extensible Application Markup Language の頭字語です。これは、ユーザー インターフェイスの作成に使用されます。次の図は、XAML エディタの場所を示しています。

XAML エディタ
XAML ウィンドウ

この例では、図形を描画できる独自の Ink アプリケーションの作成方法を示します。

ここでは、以下の方法について説明します。

  • WPF アプリケーションを作成する。

  • コード ビューとデザイナ ビューを切り替える。

  • WPF ウィンドウのプロパティを変更する。

  • XAML エディタを使用する。

  • System.Windows.Controls.InkCanvas コントロールを追加します。

  • System.Windows.Controls.Button コントロールを追加します。

  • コントロールのイベント ハンドラを作成する。

ビデオへのリンク ビデオ デモについては、「Video How to: Create a C# WPF Application」を参照してください。

WPF アプリケーションを作成するには

  1. [ファイル] メニューの [新規作成] をポイントし、[プロジェクト] をクリックします。

    [新しいプロジェクト] ダイアログ ボックスが表示されます。このダイアログ ボックスには、Visual C# Express Edition で作成できるさまざまな種類の既定のアプリケーションが一覧表示されます。

  2. [WPF アプリケーション] をクリックします。

  3. アプリケーション名を「Ink Pad」に変更します。

  4. [OK] をクリックします。

    Visual C# Express Edition によって、プロジェクトの新しいフォルダが作成されます。このフォルダ名は、プロジェクトのタイトルに合わせて付けられます。また、デザイナ ビューに Window1 というタイトルの新しい WPF ウィンドウが表示されます。デザイナ画面またはコード ウィンドウを右クリックし、[コードの表示] をクリックすると、いつでもコード ビューに切り替えることができます。既定では、XAML エディタはデザイナの下に表示されますが、デザイナ画面を右クリックし、[XAML の表示] をクリックすると、XAML マークアップを全画面表示モードで表示できます。

    WPF ウィンドウをデザイナ ビューで表示すると、アプリケーションの起動時に表示されるウィンドウのビジュアル表現を確認できます。デザイナ ビューでは、ツールボックスから WPF ウィンドウにさまざまなコントロールをドラッグできます。コントロールを WPF ウィンドウにドロップすると、Visual C# によってコードが自動的に作成されます。このコードにより、プログラムの実行時にコントロールが適切な位置に配置されます。

  5. [プロパティ] ウィンドウが表示されていない場合は、[表示] メニューの [プロパティ ウィンドウ] をクリックします。このウィンドウには、現在選択されている WPF ウィンドウまたはコントロールのプロパティが表示されます。また、既存の値を変更することもできます。

  6. [プロパティ] ウィンドウで、Height プロパティを「550」に、Width プロパティを「370」に設定して、WPF ウィンドウのサイズを変更します。

  7. WPF ウィンドウのタイトルを「Ink Pad」に変更します。

  8. WPF ウィンドウの Background プロパティを茶色に変更するために、ボックスの一覧で [Brown] をクリックし、Enter キーを押します。

    Bb655895.alert_note(ja-jp,VS.90).gifメモ :

    もう 1 つの方法として、XAML マークアップを直接変更することもできます。この場合は、Background 属性を追加し、その値を Background="Brown" に設定します。

  9. ツールボックスを開くには、[表示] メニューをクリックし、[ツールボックス] をクリックします。

  10. ツールボックスを右クリックし、[アイテムの選択] をクリックします。

    [ツールボックス アイテムの選択] ダイアログ ボックスが表示されます。

  11. [ツールボックス アイテムの選択] ダイアログ ボックスの [WPF コンポーネント] タブで、[InkCanvas] チェック ボックスまでスクロール ダウンし、これをオンにします。

  12. [OK] をクリックすると、InkCanvas コントロールがツールボックスに追加されます。

  13. ツールボックスから InkCanvas コントロールを WPF ウィンドウにドラッグします。

  14. [プロパティ] ウィンドウで、InkCanvas コントロールの次のプロパティを設定します。

    プロパティ

    値

    Width

    Auto

    Height

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    9, 9, 9, 68

  15. InkCanvas コントロールの色を黄色に変更するために、Background プロパティを LightYellow に設定します。

    実行時には、InkCanvas コントロールの背景色が明るい黄色として表示されます。

  16. 2 つの Button コントロールを WPF ウィンドウにドラッグし、InkCanvas の下に配置します。button1 を左側に、button2 を右側に配置します。

  17. button1 を選択し、XAML ビューで、XAML マークアップを次のように変更します。このマークアップは、テキストを Clear に設定します。

    <Button Height="23" HorizontalAlignment="Left" Margin="85,0,0,24" 
    Name="button1" VerticalAlignment="Bottom"
    Width="75">Clear</Button>

  18. button2 を選択し、XAML マークアップを次のように変更します。このマークアップは、テキストを Close に設定します。

    <Button Height="23" HorizontalAlignment="Right" Margin="0,0,72,24" 
    Name="button2" VerticalAlignment="Bottom" Width="75"
    Click="ButtonCloseClicked">Close</Button>

    この WPF アプリケーションは、次の図の Ink Pad アプリケーションのようになります。

    WPF Ink アプリケーション
    WPF インク アプリケーション

イベント ハンドラを作成するには

  1. [Clear] をダブルクリックし、生成された Click イベント ハンドラに次のコードを追加します。

        this.inkCanvas1.Strokes.Clear();

  2. コード エディタを右クリックし、[デザイナ] をクリックしてデザイナ ビューに戻ります。

  3. [Close] をダブルクリックし、生成された Click イベント ハンドラに次のコードを追加します。

        this.Close();

  4. F5 キーを押してプロジェクトを実行します。

  5. アプリケーションが起動したら、InkCanvas コントロールにピクチャを描画します。間違った場合でも、[Clear] をクリックしてやり直すことができます。

  6. [Close] をクリックしてアプリケーションを閉じます。

参照

処理手順

方法 : 新しい WPF アプリケーション プロジェクトを作成する

方法 : C# コンソール アプリケーションを作成する

方法 : C# Windows フォーム アプリケーションを作成する

その他の技術情報

初めての Visual C# アプリケーションの作成