WPF アプリケーションのユーザー インターフェイスのデザイン (Visual Basic)

  • [アーティクル]

更新 : 2007 年 11 月

このレッスンでは、WPF アプリケーションを作成する方法と、ユーザー インターフェイスにコントロールを追加する方法について説明します。

Windows Presentation Foundation (WPF) アプリケーションをデザインするときは、Windows フォーム アプリケーションをデザインするときのように、デザイン サーフェイスにコントロールを追加します。ただし、いくつかの違いがあります。デザイナ、[プロパティ] ウィンドウ、ツールボックスに加えて、XAML が表示されるウィンドウがあります。XAML とは、Extensible Application Markup Language の略語です。これは、ユーザー インターフェイスを作成するために使用されるマークアップ言語です。次の図は、XAML エディタの既定の場所を示しています。詳細については、「チュートリアル : WPF デザイナでの XAML の編集」を参照してください。

XAML エディタ
XAML ウィンドウ

従来の Windows フォーム アプリケーションを作成するときは、ツールボックスからコントロールを Windows フォームにドラッグします。コードを記述してコントロールを作成することもできます。コントロールをフォームにドラッグすると、コードが自動的に生成されます。同様に、WPF アプリケーションを作成するときも、XAML マークアップを記述してコントロールを作成したり、コントロールを WPF ウィンドウにドラッグしたりできます。

XAML マークアップは、階層形式で表される要素に編成されます。要素は山かっこで囲まれ、通常、開始要素と終了要素があります。たとえば、簡単な Button 要素の場合、<Button></Button> のようになります。通常、要素の外観は、その位置、高さ、幅などの属性を定義することで記述します。要素の属性は、物理的な外観や状態を説明するという点でオブジェクトのプロパティに似ています。属性は、開始要素の左山かっこと右山かっこの間に記述します。属性は、属性の名前、等号 (=)、および引用符で囲まれた属性の値から構成されます。たとえば Button 要素の高さは <Button Height="23"></Button> のように指定できます。

WPF コントロールをツールボックスからデザイナにドラッグすると、Visual Basic Express Edition によってコントロールの XAML マークアップが自動的に生成されます。たとえば、System.Windows.Controls.Button コントロールをダブルクリックして WPF ウィンドウに追加すると、次のような XAML マークアップが生成されます。

<Button Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" 
    Name="Button1" VerticalAlignment="Top" Width="75">Button</Button>

Button 要素の Height 属性が "23" に、HorizontalAlignment 属性が "Left" に設定されていることに注意します。他にも、この要素を記述している属性がいくつかあります。これらの属性を変更するには、XAML マークアップ内で値を直接変更します (既定では、これらの属性は赤のフォントで表示されます)。[プロパティ] ウィンドウを使用して、コントロールのプロパティを変更することもできます。

やってみよう

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

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

  2. [新しいプロジェクト] ダイアログ ボックスの [テンプレート] ペインで、[WPF アプリケーション] をクリックします。

  3. [プロジェクト名] ボックスに「WPFWindow」と入力し、[OK] をクリックします。

    新しい Windows Presentation Foundation プロジェクトが作成されます。[Window1] という名前の新しいウィンドウが表示されます。その XAML マークアップが、Visual Basic 統合開発環境 (IDE: Integrated Development Environment) の XAML エディタに次のように表示されます。

    <Window x:Class="Window1"

xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>

    </Grid>
</Window>

  4. [Window1] をクリックして選択します。

  5. XAML エディタで、Window 要素の Title 属性を Window1 から WPF Application に変更します。

    これにより XAML マークアップは次のように表示されます。

    <Window x:Class="Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="WPF Application" Height="300" Width="300">
    <Grid>

    </Grid>
</Window>

    [Window1] のタイトル バーのテキストが [WPF Application] に変わります。

    Width や Height など、Window の他の属性も変更して試してください。準備ができたら、次の手順に進みます。

WPF ウィンドウへのコントロールの追加

この手順では、アプリケーションにコントロールを追加します。この操作は、ツールボックス (通常は Visual Basic IDE の左側に表示されます) にあるコントロールをクリックし、WPF ウィンドウにドラッグすることで行います。コントロールのいくつかのプロパティを設定してから、XAML マークアップを調整してコントロールのテキストとサイズを変更します。

WPF ウィンドウにコントロールを追加するには

  1. ツールボックスから TextBox コントロールを WPF ウィンドウの右側上へドラッグします。

  2. TextBox コントロールを選択します。

  3. 次の図に示すように、[プロパティ] ウィンドウで、HorizontalAlignment プロパティの最初の矢印 ([左]) をクリックします。

    HorizontalAlignment プロパティ
    HorizontalAlignment プロパティ

    これにより、TextBox が WPF ウィンドウの右側から左側に移動します。

  4. TextBox の以下のプロパティを設定します。

    プロパティ

    値

    VerticalAlignment

    Top

    Width

    75

    Height

    26

  5. XAML エディタで、次の例のように、TextBox 要素の Width 属性を 140 に変更し、Margin 要素を 30, 56, 0, 0 に変更します。

    <TextBox Height="26" HorizontalAlignment="Left" Margin="30,56,0,0" 
    Name="TextBox1" VerticalAlignment="Top" Width="140" />

    これらの新しい値を入力すると、TextBox の幅と位置が変わります。

  6. Button コントロールを WPF ウィンドウの TextBox の横に追加します。

  7. 次の例のように、Button の開始タグと終了タグの間にあるテキストを Button から Submit に変更します。

    <Button Height="23" HorizontalAlignment="Right" Margin="0,59,35,0" 
    Name="Button1" VerticalAlignment="Top" 
    Width="75">Submit</Button>

    この新しい値を入力すると、ボタンのテキストが変わります。

  8. F5 キーを押してプログラムを実行します。先ほど追加したテキスト ボックスとボタンを含むウィンドウが表示されます。ボタンをクリックしたり、テキスト ボックスに入力したりできます。コントロールにイベント ハンドラを追加し、ボタンがクリックされたときの処理を行うコードを記述する必要があります。

次の手順

このレッスンでは、WPF アプリケーションを作成してコントロールを追加する方法を説明しました。[プロパティ] ウィンドウでコントロールのプロパティを設定する方法と、XAML ビューで WPF ウィンドウとコントロールの属性を変更する方法についても説明しました。次のレッスンでは、ツールボックスに用意されている他のコントロールのいくつかについて説明します。

次のレッスン : 「一般的な WPF コントロールの使用」

参照

処理手順

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

方法 : 新しい項目を WPF プロジェクトに追加する

その他の技術情報

プログラムの外観の作成 : Windows Presentation Foundation の概要