VB のたまご

作成日: 2017/03/04, 更新日: 2017/03/04



WPFアプリケーションの構成

  •  それでは、Visual Studio を開いて WPF アプリケーションを作ってみます。 「ファイル」→「新規作成」→「プロジェクト」→(テンプレートが Visual Basic を選択していることを確認して)→「WPF アプリケーション」を選択して、名前はデフォルト名のまま、「OK」ボタンを押します。

  • イメージ
  •  その後、以下のような画面デザインが表示されます。

  • イメージ
  •  WPF では、画面デザインペインと Xaml (ザムル)ペインに分かれています。画面は Xaml と同期しており、どちらかを変更すると残りの片方も変更されます。 コントロールを配置するたびに、Xaml に書き込まれていきます。

  •  WinForms の時は、「ツールボックス」からコントロールを選択して、画面に配置していましたが、 WPF では Xaml を直接タグ打ちした方が手っ取り早くデザインできるため、私はいつもタグ打ちして画面設計しています。 (もちろん WinForms の時と同じくマウスでコントロールを選択して、画面に配置することも可能なのでお好きな方で)。

  • スポンサーリンク


  •  それでは、最初のアプリケーションとして、HelloWorld なアプリを作ってみます。 MainWindow.xaml の Xaml ペインに以下を手打ちしていきます。 実際には、Window タグに挟まれている Grid タグ内に、Button タグ一式を追記していきます。

  • MainWindow.xaml
    <Window x:Class="MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:WpfApplication1"
            mc:Ignorable="d"
            Title="MainWindow" Height="350" Width="525">
        <Grid>
            
            <Button Content="button1" Click="Button_Click" Width="120" Height="30" />
            
        </Grid>
    </Window>
    

  •  そして、MainWindow.xaml.vb タブを選択してボタンのイベントハンドラを記載します。

  • MainWindow.xaml.vb
    Class MainWindow
    
        Private Sub Button_Click(sender As Object, e As RoutedEventArgs)
            MessageBox.Show("Hello, World!")
        End Sub
    
    End Class
    

  •  それではビルドして実行してみます。

  • イメージ
  •  白い画面が表示されて、中央にボタンが配置されていて、ボタンを押したらメッセージが表示されたら OK です。 画面にコントロールを配置する、コントロールにイベント処理を追加する、WinForms と同じやり方ですね。

  •  初めて Xaml を触ったのだから、Window タグ、xmlns なんちゃら~の属性タグ、Grid タグ、 そして Button タグに書かれた事がどういう意味なのかなんて分からなくて当然です。 Xaml ではこういう書き方をするのだなと知っていただければ OK です。

  • スポンサーリンク


    プチカラム
    
    Xaml のベースとなる Xml の基礎
    Xaml にも言えることになりますが、以下のサンプルを例に説明すると、Books や Book が要素タグ名となり、Name や Price が属性タグ名になります。
    Books と複数形なので「本のリスト」だな、1つの Book には 名前を表す Name 属性と値段を表す Price 属性があるな、
    それぞれの属性タグに属性値がセットされているな、つまり「本」の情報として「本の名前とその値段」が分かります。
    
    <?xml version="1.0" encoding="utf-8" ?>
    <Books>
      <Book Name="はじめてのVB.NET" Price="2980" />
      <Book Name="よく分かるVB.NET" Price="4980"></Book>
    </Books>
    

  •  WinForms でいう Form 画面が WPF でいう Window 画面に相当します。 Grid は Panel や SplitContainer みたいなコンテナ系コントロールのことで Window の下地として使います。 ここで出てくる Grid は レイアウト用コントロールであり、DataGridView みたいな表形式コントロールとは違います。 DataGridView に相当するコントロールも別途あり、ややこしいです。

  •  Grid の中に Button コントロールを配置しました。 Button タグに書かれた属性タグ、画面デザインと見比べるとなんとなく予想つくような気がしませんか? ボタン名は button1 で、クリックイベント時 Button_Click イベントハンドラを呼び出そう、ボタンの大きさとして、 幅 120, 高さ 30 なサイズにしよう、みたいな感じで。これって、WinForms ではデザインプロパティに設定していたことですね。

  •  つまり、Button 要素タグは Button クラスのことですよ、その中に書かれた属性の Content 属性は Button クラスのプロパティで、ボタンに表示する文字列を何にするか、 Width 属性と Height 属性は Button のサイズをいくつにするか、のクラスプロパティであることが分かります。 Click 属性はクラスプロパティではなくイベントですね、なのでコードビハインドにイベントハンドラを準備してメソッド名を紐づけました。 (Xaml ファイル名に .vb を付けたソースのことを、コードビハインドと呼びます)。 属性値は、文字列、数値、カラー、任意のクラス型、全て文字列でセットします。実行時には裏で実際の型に変換されて使用されます。

  •  Xaml を見ると、コントロールの親子関係も、コントロールの設定値もパッと見で両方分かるんですね。 ただ、WinForms と同じですが、タグに未記載の属性タグ(=コントロールのプロパティ)はデフォルト値が設定されますが、 デフォルト値が何になっているのかはデザインプロパティを見ないと分からないので、使い慣れが必要になります。

  •  Window タグ内にある、x:Class 属性に「MainWindow」と書かれていますよね。そしてコードビハインドのソースにも「MainWindow」というクラスが書かれていますね。 画面デザイン時は UI と 命令処理が分かれていますが、ビルドすることで1つのクラスとして合体することになります。

  •  最後に、プログラムの起動順序をさらっとだけ説明します。 プログラムは、Application.xaml から始まります。Application タグの中、StartupUri 属性に 「MainWindow.xaml」と指定されていますね。 ここで指定された画面クラスが最初に表示される画面となります。 これからプロジェクト内にたくさんの画面を作成することと思います。その際は、ここで起動したい画面を書き換えて動作確認していきましょう。

  • Application.xaml
    <Application x:Class="Application"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:w01_HelloWorld"
        StartupUri="MainWindow.xaml">
        <Application
            
        </Application
    </Application>