ストアアプリ xaml 自動リサイズの仕方

2016-06-13

ストアアプリ xaml 自動リサイズの仕方

パネルを並べたくなりますが
Gridが基本らしいです。

Width(横の幅)
Height(高さ)
HorizontalAlignment(横方向の位置)
VerticalAlignment(縦方向の位置)
Margin(余白)
の各プロパティを使用します。

Width、HeightプロパティにAutoを入れた場合は、外側のウィンドウの大きさに応じてコントロールの大きさが変わります。

4辺すべてにアンカーを設定したい場合は、
Width、Heightプロパティを Auto (⇔をクリック)
HorizontalAlignmentとVerticalAlignmentを Stretch に変更してください。
ドックをFillにしたい場合は、Marginプロパティの値を(◆)をクリックしてリセットします。

グリッドを定義して、その中に要素いれて、
要素クリックしてプロパティを編集するといいみたいです。

[WPFへの道 vol.2] AnchorやDockはどうするの？
https://blogs.msdn.microsoft.com/ttanaka/2010/11/02/wpf-vol-2-anchordock/

要素に
Grid.Row="行番号" Grid.Column="列番号"
と指定する
Grid.Row="0" Grid.Column="0"
ラベルを列0 テキストボックスを列1とすると

<Grid>
  <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>

  <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>

  <Label Content="Label" HorizontalAlignment="Right"
 Grid.Row="0" Grid.Column="0" />
  <Label Content="Label" HorizontalAlignment="Right"
 Grid.Row="1" Grid.Column="0" />

  <TextBox Grid.Row="0" Grid.Column="1" Margin="2" />
  <TextBox Grid.Row="1" Grid.Column="1" Margin="2" />
</Grid>

とすることで自動リサイズ対応になります

Windowsフォームだと Anchorで手軽に設定できるので、ストアアプリxamlは面倒ですね

xamlは、WinFormと違って設計にかなり時間を奪われてしまいます