21章:チュートリアル20:WPF - コントロールを動的に作成する(VB)

    作成2013.03.18

  1. 参照元情報
     WPF - コントロールを動的に作成する(Visual Basic ガイド ツアー)
    WPF - コントロールを動的に作成する」にジャンプする
     作成方法の詳細は上記を参照願います。


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


  3. DynamicControls.slnの実行
    (1)「Microsoft Visual Basic 2010 Express」のデバッグ機能を使用します。
    (2)「デバッグ」_「デバッグ開始」を選択します。
    (3)MainWindow画面が表示されます。
    (4)スライダーを動かすとInputの値が変化します。
    (5)四角のエリア内をクリックすると、座標値が画面左上に表示されます。
    (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="350" Width="525">
        <Grid x:Name="grid1">
        </Grid>
    </Window> 
    


  6. XAMLの階層構造
    (1)以外は標準生成コードです。x:Name="grid1"はClass MainWindowのコード記
    載上必要となります。


  7. Class MainWindowクラスの全コード
    Class MainWindow Private Sub Window_Loaded(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded grid1.ColumnDefinitions.Add(New ColumnDefinition() With {.Width = New GridLength(100)}) grid1.ColumnDefinitions.Add(New ColumnDefinition() With {.Width = New GridLength(1, GridUnitType.Star)}) grid1.RowDefinitions.Add(New RowDefinition() With {.Height = New GridLength(1, GridUnitType.Auto)}) grid1.RowDefinitions.Add(New RowDefinition() With {.Height = New GridLength(1, GridUnitType.Auto)}) grid1.RowDefinitions.Add(New RowDefinition() With {.Height = New GridLength(1, GridUnitType.Auto)}) Dim label1 As New Label() With {.Content = "Slider:"} label1.SetValue(Grid.RowProperty, 0) label1.SetValue(Grid.ColumnProperty, 0) grid1.Children.Add(label1) Dim slider1 As New Slider() slider1.SetValue(Grid.RowProperty, 0) slider1.SetValue(Grid.ColumnProperty, 1) grid1.Children.Add(slider1) Dim label2 As New Label() With {.Content = "Input:"} label2.SetValue(Grid.RowProperty, 1) label2.SetValue(Grid.ColumnProperty, 0) grid1.Children.Add(label2) Dim tbox1 As New TextBox() tbox1.SetValue(Grid.RowProperty, 1) tbox1.SetValue(Grid.ColumnProperty, 1) Dim binding As New Binding() With {.Source = slider1, .Path = New PropertyPath(Slider.ValueProperty)} tbox1.SetBinding(TextBox.TextProperty, binding) grid1.Children.Add(tbox1) Dim label3 As New Label() With {.Content = "Rectangle:"} label3.SetValue(Grid.RowProperty, 2) label3.SetValue(Grid.ColumnProperty, 0) grid1.Children.Add(label3) Dim rect1 As New Rectangle() With {.Height = 100.0} rect1.SetValue(Grid.RowProperty, 2) rect1.SetValue(Grid.ColumnProperty, 1) Dim brush As New LinearGradientBrush() With _ {.StartPoint = New Point(0.0, 0.0), .EndPoint = New Point(1.0, 1.0)} brush.GradientStops.Add(New GradientStop() With {.Color = Colors.Yellow, .Offset = 0.0}) brush.GradientStops.Add(New GradientStop() With {.Color = Colors.Red, .Offset = 1.0}) rect1.Fill = brush grid1.Children.Add(rect1) AddHandler rect1.MouseLeftButtonDown, AddressOf rect1_MouseLeftButtonDown End Sub Private Sub rect1_MouseLeftButtonDown(sender As Object, e As MouseButtonEventArgs) Me.Title = e.GetPosition(grid1).ToString() End Sub End Class


  8. コードの解説
    (1)Private Sub Window_Loadedはウインドウがロードされるときに呼び出されます。
    (2) grid1.ColumnDefinitions.Add(New ColumnDefinition() With {.Width = New GridLength(100)})は変数grid1.ColumnDefinitionsに初期値がGridLength(100)のColumnDefinition() 型変数を生成し代入します。
    (3)上記は代入のためNewを2回使用していますが、変数が単純定数でなくクラスで定義されているため、このように複雑な記載となります。
    (4)Dim label1 As New Label() With {.Content = "Slider:"}は変数label1をLabel()型で初期値{.Content = "Slider:"}にして生成します。
    (5)label1.SetValue(Grid.RowProperty, 0)はlabel1のGrid.RowPropertyに0を設定します。
    (6)grid1.Children.Add(label1)はlabel1をgrid1をはめ込みます。
    (7)Dim slider1 As New Slider()は変数slider1をSlider()型で生成します。
    (8)slider1.SetValue(Grid.ColumnProperty, 1)はslider1のGrid.ColumnPropertyに1を設定します。
    (9) grid1.Children.Add(slider1)はslider1をgrid1をはめ込みます。
    (10) Dim tbox1 As New TextBox()は変数tbox1をTextBox()型で生成します。
    (11)tbox1.SetValue(Grid.RowProperty, 1)はtbox1のGrid.RowPropertyに1を設定します。
    (12)Dim binding As New Binding() With {.Source = slider1, .Path = New PropertyPath(Slider.ValueProperty)}は変数bindingをBinding()型で初期値 {.Source = slider1, .Path = New PropertyPath(Slider.ValueProperty)}で生成します。
    (13).Path = New PropertyPath(Slider.ValueProperty)はパスにPropertyPath(Slider.ValueProperty)型のパスを設定します。
    (14)tbox1.SetBinding(TextBox.TextProperty, binding)はtbox1のBindingに(TextBox.TextProperty, binding)を設定します。
    (15)Dim rect1 As New Rectangle() With {.Height = 100.0}はは変数rect1をRectangle()で初期値{.Height = 100.0}にして生成します。
    (16)rect1.SetValue(Grid.RowProperty, 2)はrect1のGrid.RowPropertyに2を設定します。
    (17) Dim brush As New LinearGradientBrush() With _
    {.StartPoint = New Point(0.0, 0.0), .EndPoint = New Point(1.0, 1.0)}
    brush.GradientStops.Add(New GradientStop() With {.Color = Colors.Yellow, .Offset = 0.0})
    brush.GradientStops.Add(New GradientStop() With {.Color = Colors.Red, .Offset = 1.0})
    rect1.Fill = brushは四角にグラデーションを設定します。
    (18)grid1.Children.Add(rect1)はslider1を rect1をはめ込みます。
    (19)AddHandler rect1.MouseLeftButtonDown, AddressOf rect1_MouseLeftButtonDownは
    rect1_MouseLeftButtonDownイベント関数を発生させます。
    (20)Private Sub rect1_MouseLeftButtonDownはrect1_MouseLeftButtonDownイベントで呼び出されます。
    (21)Me.Title = e.GetPosition(grid1).ToString()はウインドウタイトルに座標を表示します。



    感想:
    (1)Gridの設定はやや面倒ですが、書式は一定であり、コピー・ペーストで何とかなりそうです。
    (2)コントロールの生成とGridへのはめ込みも書式は一定のようです。
    (3)tbox1へのスライダーの値はめこみは複雑な書式なようです。
    (4)グラデーションを設定も書式が長いようです。
    (5)座標表示の書式はシンプルです。
    (6)ダイナミックにコントロールを発生する場合、ダイナミックにコントロールを消去する必要があります。このような必要がない場合、コントロールのプロパティのみを変化させるのも有効な手段と思います。







22章:チュートリアル21:Silverlight アプリケーションの開発(VB) に行く。

トップページに戻る。