Studio
Visual

ウィンドウ作成

※自分の勉強用のメモとして使っています。

環境:Windous 10、Visual Studio 2012

ウィンドウの追加+レイアウトとコントロール

初めにソリューションエクスプローラーでプロジェクトをの選択して右クリック、
真ん中あたりにある追加からウィンドウの追加を選んで追加
image.png
追加したら Title、Width、Height、WindowStyleを指定しておく。
次にxamlファイル内の
Gridと/Gridの間に

Grid.ColumnDefinitions
ColumnDefinitions 大きさ/ (追加したい列の分だけ)
/Grid.ColumnDefinitionsと
Grid.RowDefinitions
RowDefinitions 大きさ/ (こちらも追加したい行の分だけ)
/Grid.RowDefinitionsを追記したあと

/Grid.RowDefinitionsの下に

(データを記入する用)
TextBlock Grid.column="列" Grid.Row="行"
VerticalAlignment="配置" Text="文字列"/
ComboBox Grid.column="列" Grid.Row="行"
Margin="余白"

(日付を記入する用)
TextBlock Grid.column="列" Grid.Row="行"
VerticalAlignment="配置" Text="文字列"/
DatePicker Grid.column="列" Grid.Row="行"
Margin="余白"

(文字列を記入する用なので必要な分だけ)
TextBlock Grid.column="列" Grid.Row="行"
VerticalAlignment="配置" Text="文字列"/
TextBox Grid.column="指定したい列" Grid.Row="行"
Margin="余白"

(エラーメッセージを出す用)
TextBlock Grid.column="列" Grid.Row="行"
Grid.ColumnSpan="このセルを含めた横方向の結合セルの数"
HorizontalAlignment="横方向の配置の指定"
Foreground="メッセージの色"

(コマンド項目に関するコントロールの配置用)
StackPanel Grid.column="列" Grid.Row="行"
Grid.ColumnSpan="このセルを含めた横方向の結合セルの数"
HorizontalAlignment="横方向の配置の指定"

(ボタンの配置設定)
Button Margin="余白" Width="ボタンの横幅" Content="ボタンの中の文字列"
を追記して
image.png
次にスタイルを設定する。
Title、Width、Height、WindowStyleとGridの間に
Window.Resources
/Window.Resourcesを追記、中に

Style Target="スタイルを適用したいターゲット名"
Setter Property="設定したいプロパティ" Value="プロパティの数値"
/Style
をスタイルを適用したいプロパティの数だけ追記

Style x:Key="適用したいStyleプロパティ" TargetType="適用したいターゲット"
Setter Property="横方向の配置の指定" Value="位置"/
Setter Property="適用したいプロパティ" Value="色"/
/Styleを記入して
設定したプロパティと同じのをGridの中から削除して
エラーメッセージを出す用の
TextBlock Grid.column="列" Grid.Row="行"
Grid.ColumnSpan="このセルを含めた横方向の結合セルの数"の後ろに
Style="{StaticResouce "Styleプロパティ"}"を追記する。

次にApp.xamlを開いてApplication.Resourcesと/Application.Resourcesの間に
Style TargetType="ターゲット名"
Setter Property="プロパティ" Value="配置"/
/Style
Style TargetType="ターゲット名"
Setter Property="プロパティ" Value="配置"/
Setter Property="プロパティ" Value="配置"/
/Style
Style TargetType="ターゲット名"
Setter Property="プロパティ" Value="配置"/
Setter Property="プロパティ" Value="配置"/

/Style
を追記する。
image.png
これで画面が完成になる。
あとはこれをそのまま使い必要な画面を作る。
image.png
image.png