2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ウィンドウ作成

Posted at

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

環境: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

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?