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

    作成2013.03.10

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


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


  3. LayoutSampleの実行
    (1)「Microsoft Visual Basic 2010 Express」のデバッグ機能を使用します。
    (2)「デバッグ」_「デバッグ開始」を選択します。
    (3)MainWindow画面が表示されます。
    (4)メニューの「ファイル」_「TEST3」を選択します。
    (5)Private Sub MenuItem3_Clickで停止します。
    (6)デバッグを終了します。


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

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

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

    (4) その他
     サンプルのXAMLコードをコピーして、ペーストすると簡単に完成しますが、内容の詳細が理解できません。できるだけデザイナーを使用して、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="400">
        <DockPanel Name="DockPanel1" LastChildFill="True">
    
            <Menu Name="Menu1" DockPanel.Dock="Top" >
                <MenuItem Header="ファイル" Name="MenuItem1">
                    <MenuItem Header="TEST3" Name="MenuItem3"/>
                    <MenuItem Header="TEST4" Name="MenuItem4"/>
                </MenuItem>
                <MenuItem Header="編集" Name="MenuItem2"></MenuItem>
            </Menu>
    
            <StatusBar Name="StatusBar1" DockPanel.Dock="Bottom">ステータスバー</StatusBar>
            <Button Name="Button1" Width="100" DockPanel.Dock="Bottom"  Margin="5" HorizontalAlignment="Right">送信</Button>
            <Grid Name="Grid1" Margin="50, 10">
                <!-- 行の定義 -->
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <!-- 列の定義 -->
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
    
                <TextBlock Grid.Column="0" Grid.Row="0" Name="TextBlock1" Text="住所" VerticalAlignment="Center"/>
                <TextBlock Grid.Column="0" Grid.Row="1" Name="TextBlock2" Text="氏名" VerticalAlignment="Center"/>
                <TextBox Grid.Column="1" Grid.Row="0" Name="TextBox1" Margin="5"/>
                <TextBox Grid.Column="1" Grid.Row="1" Name="TextBox2" Margin="5"/>
            </Grid>         
        </DockPanel>
    </Window>
    


  6. XAMLの階層構造
    <Window>階層1
        <DockPanel>階層2
           <Menu>階層3-1
                <MenuItem>階層4-1
                    <MenuItem/>階層5-1
                    <MenuItem/>階層5-1
                <MenuItem/>
                <MenuItem>階層4-2
                <MenuItem/>
           </Menu>
           <StatusBar>ステータスバー</StatusBar>階層3-2
            <Button>送信</Button>階層3-2
            <Grid >階層3-3
                <Grid.RowDefinitions>階層4-2
                    <RowDefinition/>階層5-2
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>階層4-2
                    <ColumnDefinition/>階層5-2
                </Grid.ColumnDefinitions>
                <TextBlock"住所"/>階層4-3
                <TextBlock "氏名"/>階層4-3
                <TextBox/>階層4-3
                <TextBox/>階層4-3
            </Grid>   
        </DockPanel>
    </Window>
    
    (1)XAMLを理解するには、まずXAMLの階層構造を理解する必要があります。(サンプルは上記のようになります。)
    (2)階層1:x:Class="MainWindow"を定義、Title="MainWindow" Height="300" Width="400"を定義します。
    (3) <DockPanel>階層2:DockPanel内に全てのコントロールが含まれます。
    (4)<Menu>階層3-1:<Menu>内に全てのメニューが含まれます。
    (5) <MenuItem>階層4-1:<MenuItem>はメニュー内に複数個含まれます。
    (6)<MenuItem/>階層5-1:<MenuItem/>階層5-1は <MenuItem>階層4-1内に複数個含まれます。
    (7) <StatusBar>階層3-2:ステータスバーは<DockPanel>階層2内に配置されます。
    (8)<Button>階層3-2:ボタンは<DockPanel>階層2内に配置されます。
    (9)<Grid >階層3-3:<Grid >階層3-3は<DockPanel>階層2内に配置されます。
    (10)<TextBlock"住所"/>階層4-3:<TextBlock"住所"/>は<Grid >階層3-3内に配置されます。
    (11) <TextBox/>階層4-3: <TextBox/>階層4-3<Grid >階層3-3内に配置されます。

    注:メニューアイテムの追加に関しては、デザイナーからの操作がわかりにくいため、XAMLコードを変更したほうが簡単です。


  7. VBの全コード
    Class MainWindow 
        Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles Button1.Click
        End Sub
        Private Sub MenuItem3_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MenuItem3.Click
        End Sub
        Private Sub MenuItem4_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MenuItem4.Click
        End Sub
        Private Sub TextBox1_KeyUp(ByVal sender As System.Object, ByVal e As System.Windows.Input.KeyEventArgs) Handles TextBox1.KeyUp
            Dim K = e.Key
        End Sub
    End Class
    


  8. コードの解説
    (1)コードはイベントの呼び出し確認用のみです。


    感想:
     デザイナーからのメニューアイテムの追加方法が大幅に変更になっています。デザイナーからのメニューアイテムの追加する方法もあるのですが、操作性はよくありません。XAMLコードを変更したほうがスマートでした。そして、メニューアイテムは階層的に追加できることがわかりました。
     念のため、MenuItem3.Clickイベントによる呼び出しが正常に動作するかを確認しました。








16章:チュートリアル15:アニメーションの作成 (VB) に行く。

トップページに戻る。