14章:チュートリアル13:WPF アプリケーション の作成

    作成2013.03.10

  1. 参照元情報
     簡単 WebBrowser の作成は(Visual Basic ガイド ツアー)
    「WPF アプリケーション の作成」にジャンプする
     作成方法の詳細は上記を参照願います。


  2. WPF アプリケーション の作成の完成ファイル
     WPF アプリケーション の作成の解説とおりに作業を実施すると、プロジェクトファイル群が完成します。
     完成ファイルは以下からダウンロードできます。
     ダウンロード後は解凍してから使用してください。
      [WPF アプリケーション の作成]をダウンロードする。
     解凍すると「MyWpfApplication」フォルダーがあります。
    注(1)「MyWpfApplication」フォルダーの「MyWpfApplication.sln」ファイルをダブルクリックすると「Microsoft Visual Basic 2010 Express」が起動します。
    注(2)メニューの「ウインド」_「ウインドレイアウトのリセット」で標準に戻ります。
    注(3)「ソリューションエクスプローラ」ウインドウ内の「MainWindow.xaml」をダブルクリックすると「デザイン」と「XAML」が表示されます。
    注(4)メニューの「表示」_「コード」を選択するとコードが表示されます。
    注(5)「MyWpfApplication.sln」の動作確認は「デバッグ」_「デバッグ開始」で実行します。デバッグ機能を用いて動作確認を行います。


  3. MyWpfApplicationの実行
    (1)「Microsoft Visual Basic 2010 Express」のデバッグ機能を使用します。
    (2)「デバッグ」_「デバッグ開始」を選択します。
    (3)MainWindow画面が表示されます。
    (4)「日時」ボタンを押します。
    (5)日時が表示されます。
    (6)スライダーを動かすと画面が回転します。
    (7)クローズボックスでプログラムを終了します。


  4. 新規プロジェクトの作成
    (1)新規プロジェクト
     新規プロジェクトを作成すると「デザイナー」にはMainWindowとXAMLが自動生成されます。

    (2)XAMLコードの作成
     サンプルのXAMLコードをコピーして、ペーストすると完成します。

    (3) クラスコード
    Class MainWindow
    End Class
    が自動生成されます。

    (4) その他
     サンプルのXAMLコードをコピーして、ペーストすると簡単に完成しますが、内容の詳細が理解できません。できるだけデザイナーを使用して、XAMLコードを自動生成すると理解が深まります。
     ただし、デザイナーの操作だけでは、完全なコードが生成できないようです。最終的にはXAMLコードの仕組みを理解して、コードの修正が必要になるようです。


  5. XAMLの全コード
    <Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="300">
        <Grid>
            <Grid Margin="21,23,25,0" Name="Grid1" Height="100" VerticalAlignment="Top" Background="AliceBlue">
                <TextBox Margin="15,16,15,0" Name="TextBox1" Height="24" VerticalAlignment="Top" />
                <Button Height="23" HorizontalAlignment="Right" Margin="0,0,15,14" Name="Button1" VerticalAlignment="Bottom" Width="75">日時</Button>
            </Grid>
            <Slider Height="22" Margin="12,0,12,12" Name="Slider1" VerticalAlignment="Bottom" Maximum="360" />
            <TextBlock Height="48" HorizontalAlignment="Left" Margin="44,160,0,0" Name="TextBlock1" Text="TextBlock" VerticalAlignment="Top" Width="180" />
        </Grid>
    </Window>
    


  6. XAMLの階層構造
    <Window>階層1
        <Grid>階層2
           <Grid>階層3-1
                 <TextBox/>階層4-1
                <Button><Button/>階層4-1
           </Grid>
           <Slider/>階層3-2
           <TextBlock/>階層3-2
        </Grid>
    </Window>
    
    (1)XAMLを理解するには、まずXAMLの階層構造を理解する必要があります。(サンプルは上記のようになります。)
    (2)階層1:x:Class="MainWindow"を定義、Title="MainWindow" Height="300" Width="300"を定義します。
    (3)xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"とxmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"は必須です。(チェック機能が働いているようです。)
    (4)階層2:<Slider/>階層3-2と <TextBlock/>階層3-2を含みます。
    (5)階層3: <TextBox/>階層4-1と<Button><Button/>階層4-1を含みます。階層3は Name="Grid1"と定義されます。


  7. VBの全コード
    Class MainWindow 
        Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles Button1.Click
            ' テキスト ボックスに現在日時を表示
            Me.TextBox1.Text = DateTime.Now.ToString()
            Me.TextBlock1.Text = "8889" & vbTab & "2222" & vbCrLf & "555"
        End Sub
    
        Private Sub Slider1_ValueChanged(ByVal sender As System.Object, ByVal e As System.Windows.RoutedPropertyChangedEventArgs(Of System.Double)) Handles Slider1.ValueChanged
            ' Grid コントロールを回転]
            Dim rt As New RotateTransform()
            rt.CenterX = 140 ' (140, 50) の位E置を中心に回転
            rt.CenterY = 50
            rt.Angle = e.NewValue ' スライダーの値の角度に回転
            Me.Grid1.RenderTransform = rt
        End Sub
    End Class
    


  8. コードの解説
    (1)Private Sub Button1_ClickはButton1.Clickイベントで呼び出されます。
    (2)Me.TextBox1.Text = DateTime.Now.ToString()はTextBox1に日時を設定します。
    (3)Me.TextBlock1.Text = "8889" & vbTab & "2222" & vbCrLf & "555"はTextBlock1に文字列を代入します。vbTabはタブ、vbCrLfは改行を意味します。
    (4)Private Sub Slider1_ValueChangedはSlider1.ValueChangedイベントで呼び出されます。
    (5)Dim rt As New RotateTransform()は変数rtをRotateTransform()型で生成します。
    (6)rt.CenterX = 140は変数rtにX中心座標を代入します。
    (7)rt.Angle = e.NewValueは変数rtに回転角をスライダーの値に設定します。
    (8) Me.Grid1.RenderTransform = rtはGrid1のRenderTransformに変数rtの値を代入します。これにより、 階層3-1に含まれる要素全体が回転します。


    感想:
     WPF アプリケーション の作成 は初めてで、操作にまごつきました。WPF アプリケーションはXAMLコードに特徴があり、操作が大幅にかわった印象です。
     XAMLコードをコピー&ペーストしてしまえば、簡単に操作画面を複製できますが、それでは内容の理解ができない問題が生じます。
     デザイナーのグラフィック操作のみでは、完全なXAMLコードは生成できなそうです。したがって、XAMLコードを修正する必要がありますが、XAMLコードの基本ルール、コードの意味等を十分理解する必要がありそうです。








15章:チュートリアル14:レイアウトの作成 (VB)に行く。

トップページに戻る。