10 行でズバリ!! レイアウトの作成は下記の参照元情報からほぼ完全な作成方法の説明と解説を参照できます。
参照元情報10 行でズバリ!! レイアウトの作成は
「10 行でズバリ!! レイアウトの作成」にジャンプする
作成方法の詳細は上記を参照願います。
10 行でズバリ!! レイアウトの作成 (C#)の完成ファイル10 行でズバリ!! レイアウトの作成 (C#)の作成の解説とおりに作業を実施すると、C#プロジェクトファイル群が完成しますが、 ここでは、VBで作成したプログラムをC＃言語に変換を基本とします。
完成ファイルは以下からダウンロードできます。
ダウンロード後は解凍してから使用してください。
[10 行でズバリ!! レイアウトの作成 (C#)]をダウンロードする。解凍すると「17LayoutSample」フォルダーがあります。
注（１）「17LayoutSample」フォルダーの「LayoutSample.sln」ファイルをダブルクリックすると「Express 2012 for Windows Desktop」が起動します。
注（２）メニューの「ウインド」＿「ウインドレイアウトのリセット」で標準に戻ります。
注（３）「ソリューションエクスプローラ」ウインドウ内の「MainWindow.xaml」をダブルクリックすると「デザイン」が表示されます。
注（４）メニューの「表示」＿「コード」を選択するとコードが表示されます。
注（５）「LayoutSample.sln」の動作確認は「デバッグ」＿「デバッグ開始」で実行します。デバッグ機能を用いて動作確認を行います。
LayoutSample.slnの実行（１）「Express 2012 for Windows Desktop」のデバッグ機能を使用します。
（２）「デバッグ」＿「デバッグ開始」を選択します。
（３）操作画面が表示されます。
（４）動作確認はありません。
（６）クローズボックスで終了します。
新規プロジェクトの作成（１）MainWindow.xamlのデザイン設定
新規プロジェクトを作成すると「デザイナー」にはMainWindow.xamlが自動生成されます。MainWindow.xamlのデザイン設定はVBのMainWindow.xamlのコピー＆ペーストで完成します。
（２） MainWindow.xaml.csコード
基本コードが自動生成されます。
MainWindow.xamlの全コード
<Window x:Class="LayoutSample.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">
<DockPanel Name="DockPanel1" LastChildFill="True">
<Menu Name="Menu1" DockPanel.Dock="Top" >
<MenuItem Header="ファイル" Name="MenuItem1">
<MenuItem Header="TEST3" Name="MenuItem3" Click="MenuItem3_Click"/>
<MenuItem Header="TEST4" Name="MenuItem4" Click="MenuItem4_Click"/>
</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" Click="Button1_Click">送信</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" KeyUp="TextBox1_KeyUp"/>
<TextBox Grid.Column="1" Grid.Row="1" Name="TextBox2" Margin="5"/>
</Grid>
</DockPanel>
</Window>
<Label Background="CornflowerBlue" Content="c" FontFamily="Webdings" FontSize="72" FontWeight="Bold" Height="127" HorizontalAlignment="Center" HorizontalContentAlignment="Center" Name="Label14" VerticalAlignment="Center" VerticalContentAlignment="Center" Width="132" Grid.Column="1" Grid.Row="3" />
<Label Background="CornflowerBlue" Content="c" FontFamily="Webdings" FontSize="72" FontWeight="Bold" Height="127" HorizontalAlignment="Center" HorizontalContentAlignment="Center" Name="Label15" VerticalAlignment="Center" VerticalContentAlignment="Center" Width="132" Grid.Column="2" Grid.Row="3" />
<Label Background="CornflowerBlue" Content="c" FontFamily="Webdings" FontSize="72" FontWeight="Bold" Height="127" HorizontalAlignment="Center" HorizontalContentAlignment="Center" Name="Label16" VerticalAlignment="Center" VerticalContentAlignment="Center" Width="132" Grid.Column="3" Grid.Row="3" />
</Grid>
</Window>
MainWindow.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>
（１）XAMLを理解するには、まずXAMLの階層構造を理解する必要があります。（サンプルは上記のようになります。）（２）階層1：x:Class="MainWindow"を定義、Title="MainWindow" Height="300" Width="400"を定義します。
（３） <DockPanel>階層2：DockPanel内に全てのコントロールが含まれます。
（４）<Menu>階層3-1：<Menu>内に全てのメニューが含まれます。
（５） <MenuItem>階層4-1：<MenuItem>はメニュー内に複数個含まれます。
（６）<MenuItem/>階層5-1：<MenuItem/>階層5-1は <MenuItem>階層4-1内に複数個含まれます。
（７） <StatusBar>階層3-2：ステータスバーは<DockPanel>階層2内に配置されます。
（８）<Button>階層3-2：ボタンは<DockPanel>階層2内に配置されます。
（９）<Grid >階層3-3：<Grid >階層3-3は<DockPanel>階層2内に配置されます。
（１０）<TextBlock"住所"/>階層4-3：<TextBlock"住所"/>は<Grid >階層3-3内に配置されます。
（１１） <TextBox/>階層4-3： <TextBox/>階層4-3<Grid >階層3-3内に配置されます。
MainWindow.xaml.csの全コード
using System.Windows;
using System.Windows.Input;
namespace LayoutSample
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button1_Click(object sender, RoutedEventArgs e)
{
}
private void MenuItem3_Click(object sender, RoutedEventArgs e)
{
}
private void MenuItem4_Click(object sender, RoutedEventArgs e)
{
}
private void TextBox1_KeyUp(object sender, KeyEventArgs e)
{
System.Windows.Input.Key K = e.Key;
}
}
}
MainWindow.xaml.csコードの解説（１）コードはイベントの呼び出し確認用のみです。
感想：
（１）この章はパーツレイアウトの練習のみです。
１８章：10 行でズバリ!! アニメーションの作成 (C#)に行く。