25章:10 行でズバリ!! [C#] Silverlight におけるレイアウトの基本

    作成2013.04.19

     Silverlight アプリケーションとWPFアプリケーションのコードは完全互換ではなさそうですが、わずかな修正でSilverlight アプリケーション用サンプルコードをWPFアプリケーション用コードに変換できます。
     ここでは、Silverlight アプリケーション用サンプルコードをWPFアプリケーション用コードに変換します。
     10 行でズバリ!! [C#] Silverlight におけるレイアウトの基本は下記の参照元情報から作成方法の説明と解説を参照できます。

  1. 参照元情報
     10 行でズバリ!! [C#] Silverlight におけるレイアウトの基本
    「10 行でズバリ!! [C#] Silverlight におけるレイアウトの基本」にジャンプする
     作成方法の詳細は上記を参照願います。


  2. 10 行でズバリ!! [C#] Silverlight におけるレイアウトの基本の完成ファイル
     10 行でズバリ!! [C#] Silverlight におけるレイアウトの基本の作成の解説とおりに作業を実施すると、C#プロジェクトファイル群が完成しますが、 ここでは、VBで作成したプログラムをC#言語に変換を基本とします。
     完成ファイルは以下からダウンロードできます。
     ダウンロード後は解凍してから使用してください。
      [10 行でズバリ!! [C#] Silverlight におけるレイアウトの基本]をダウンロードする。
     解凍すると「25SampleLayouts」フォルダーがあります。
    注(1)「25SampleLayouts」フォルダーの「SampleLayouts.sln」ファイルをダブルクリックすると「Express 2012 for Windows Desktop」が起動します。
    注(2)メニューの「ウインド」_「ウインドレイアウトのリセット」で標準に戻ります。
    注(3)「ソリューションエクスプローラ」ウインドウ内の「MainWindow.xaml」をダブルクリックすると「デザイン」が表示されます。
    注(4)メニューの「表示」_「コード」を選択するとコードが表示されます。
    注(5)「SampleLayouts.sln」の動作確認は「デバッグ」_「デバッグ開始」で実行します。デバッグ機能を用いて動作確認を行います。


  3. SampleLayouts.slnの実行
    (1)「Express 2012 for Windows Desktop」のデバッグ機能を使用します。
    (2)「デバッグ」_「デバッグ開始」を選択します。
    (3)操作画面が表示されます。
    (4)動作確認はありません。
    (5)クローズボックスで終了します。


  4. 新規プロジェクトの作成
    (1)MainWindow.xamlのデザイン設定
     新規プロジェクトを作成すると「デザイナー」にはMainWindow.xamlが自動生成されます。MainWindow.xamlのデザイン設定はVBのMainWindow.xamlのコピー&ペーストで完成します。

    (2) MainWindow.xaml.csコード
     基本コードが自動生成されます。


  5. MainWindow.xamlの全コード
    <Window x:Class="SampleLayouts.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>	
            <Button Content="Start the quiz" Grid.Column="2" Grid.Row="5"  HorizontalAlignment="Center" Name="startButton" VerticalAlignment="Center"  />	
            <WindowsFormsHost   Name="WindowsFormsHost1">	
                <self:UserControl1 x:Name="myControl"  />	
            </WindowsFormsHost> 	
        </Grid>	
    </Window>	
            </WindowsFormsHost>	
            <Label Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="2" Grid.RowSpan="19"   Name="Label1" Background="Cyan"></Label>	
            <Label Grid.Column="3" Grid.ColumnSpan="18" Grid.Row="0" Grid.RowSpan="1"   Name="Label2" Background="Cyan"></Label>	
            <Label Grid.Column="21" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="20"   Name="Label3" Background="Cyan"></Label>	
            <Label Grid.Column="1" Grid.ColumnSpan="18" Grid.Row="21" Grid.RowSpan="1"   Name="Label4" Background="Cyan"></Label>	
            <Label Background="Cyan" Grid.ColumnSpan="17" Name="Label5" Grid.Column="1" Grid.Row="2" />	
            <Label Background="Cyan" Grid.RowSpan="14" Name="Label6" Grid.Column="2" Grid.Row="4" />	
            <Label Background="Cyan" Grid.ColumnSpan="17" Grid.RowSpan="2" Margin="0,0,0,23" Name="Label7" Grid.Column="2" Grid.Row="4" />	
            <Label Background="Cyan" Grid.RowSpan="13" Margin="0,0,0,1" Name="Label8" Grid.Column="4" Grid.Row="6" />	
            <Label Background="Cyan" Grid.ColumnSpan="13" Grid.RowSpan="2" Margin="0,0,0,23" Name="Label9" Grid.Column="6" Grid.Row="6" />	
            <Label Background="Cyan" Grid.RowSpan="10" Margin="0,1,0,24" Name="Label10" Grid.Column="6" Grid.Row="7" />	
            <Label Background="Cyan" Grid.RowSpan="9" Margin="0,0,0,1" Name="Label11" Grid.Column="8" Grid.Row="10" />	
            <Label Background="Cyan" Grid.ColumnSpan="11" Grid.RowSpan="2" Margin="0,0,0,23" Name="Label12" Grid.Column="8" Grid.Row="8" />	
            <Label Background="Cyan" Grid.RowSpan="9" Margin="0,0,0,1" Name="Label13" Grid.Column="13" Grid.Row="9" />	
            <Label Background="Cyan" Grid.ColumnSpan="3" Grid.RowSpan="2" Margin="0,0,0,23" Name="Label14" Grid.Column="10" Grid.Row="12" />	
            <Label Content="Finish " Grid.Column="17" Grid.ColumnSpan="2" Grid.Row="18" Grid.RowSpan="1"  Name="finishLabel"  />	
        </Grid>	
    </Window>	
    
    


  6. MainWindow.xamlコードの解説
    (1)VB とC#は同一となります。


  7. MainWindow.xaml.csの全コード
     MainWindow.xaml.csのコードはありません。
    


  8. MainWindow.xaml.csコードの解説
     MainWindow.xaml.csのコードはありません。



    感想:
    (1)VBからC#への変換は、何もありません。







26章:10 行でズバリ!! [C#] コントロールのテンプレート化と再利用に行く。

トップページに戻る。