23章:チュートリアル22:Silverlight におけるレイアウトの基本(VB)

    作成2013.03.22

     ここでは、Silverlight アプリケーション用サンプルコードをWPFアプリケーション用コードに変換します。

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


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


  3. SampleLayouts.slnの実行
    (1)「Microsoft Visual Basic 2010 Express」のデバッグ機能を使用します。
    (2)「デバッグ」_「デバッグ開始」を選択します。
    (3)MainWindow画面が表示されます。
    (4)ボタンを押すと日時が表示されます。
    (5)Nameテキストボックスへの入力とラジオボタンの選択ができます。
    (6)クローズボックスで終了します。


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

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

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

    (4) その他
     サンプルの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="400" Width="600">
        <Grid x:Name="LayoutRoot" Width="400" Height="300" Background="LightGreen">
            <!-- Grid レイアウトの行、および列の定義 -->
            <Grid.RowDefinitions>
                <RowDefinition Height="30" />
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
    
            <Rectangle Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"  
                       Fill="GreenYellow" />
            <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"  
                       VerticalAlignment="Center" HorizontalAlignment="Center" 
                       FontSize="16" Text="Silverlight Layouts" />
    
            <TextBlock Grid.Row="1" Grid.Column="0" HorizontalAlignment="Right" VerticalAlignment="Top" 
                       Text="Figures:" />
            <!-- Canvas レイアウト -->
            <Canvas Grid.Row="1" Grid.Column="1" Background="LightBlue" >
                <Ellipse Canvas.Left="50" Canvas.Top="30" 
                         Width="150" Height="80" Fill="Gold" />
                <Rectangle Canvas.Left="120" Canvas.Top="80" 
                           Width="120" Height="90" Stroke="DarkBlue" StrokeThickness="7" />
            </Canvas>
    
            <TextBlock Grid.Row="2" Grid.Column="0" HorizontalAlignment="Right" VerticalAlignment="Center" 
                       Text="Name: " />
            <TextBox Grid.Row="2" Grid.Column="1" HorizontalAlignment="Left" 
                     Width="200" />
    
            <TextBlock Grid.Row="3" Grid.Column="0" HorizontalAlignment="Right" VerticalAlignment="Center" 
                       Text="Gender:" />
            <!-- StackPanel レイアウト -->
            <StackPanel Grid.Row="3" Grid.Column="1" Orientation="Horizontal" Background="Khaki">
                <RadioButton x:Name="genderMale" Content="Male" IsChecked="True" />
                <RadioButton x:Name="genderFemale" Content="Female" />
            </StackPanel>
        </Grid>
    </Window>
    


  6. XAMLの変更点
    (1)<UserControl x:Class="MySilverlightApp.MainPage"が<Window x:Class="MainWindow"に変更となります。   (<Window x:Class="MainWindow"はWPFアプリケーションのデホルトです。)
    (2)上記以外の変更点は無く、Silverlight におけるレイアウトのコードとWPFアプリケーション のコードは同じになります。


  7. Class MainWindowクラスの全コード
     Class MainWindowクラスのコードはありません。

    感想:
    (1)XAMLのSilverlight におけるレイアウトのコードとWPFアプリケーションのコードは同じで互換性がありそうです。







24章:チュートリアル23:コントロールのテンプレート化と再利用(VB)に行く。

トップページに戻る。