☰

XAML ColumnDefinition の * (アスタリスク) の意味は何ですか? 質問する

tag-icon • tag-icon wpf xaml xamarin layout grid
XAML ColumnDefinition の * (アスタリスク) の意味は何ですか? 質問する

以下の XAML の * (アスタリスク) の意味は何ですか?

<ColumnDefinition Width="0.07*"/>
<Grid Height="100" HorizontalAlignment="Left" 
      Margin="102,134,0,0" 
      Name="grid1" VerticalAlignment="Top" 
      Width="354">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="40*" />
        <ColumnDefinition Width="314*" />
    </Grid.ColumnDefinitions>
</Grid>

ベストアンサー1

WPF グリッドで列を定義するときに、幅を次の 3 つの値のいずれかに設定できます。

  • 固定幅、
  • Auto– 列は子が収まるように必要なだけ広くなります。
  • *（星）残りのスペースを占有する

先頭に数字*が付きます (数字が指定されていない場合は、デフォルトは 1 です)。使用可能なスペースは、先頭の数字に比例して星印の付いた列に分割されます。

この定義を持っている場合

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="0.07*"/>
  <ColumnDefinition Width="0.93*"/>
</Grid.ColumnDefinitions>

最初の列は利用可能な合計スペースの 7% を取得し、2 番目の列は 93% を取得します。一方、次の定義があった場合:

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="0.07*"/>
  <ColumnDefinition Width="0.14*"/>
</Grid.ColumnDefinitions>

最初の列には使用可能なスペースの 1/3 が、2 番目の列には使用可能なスペースの 2/3 がそれぞれ割り当てられます。

グリッドの幅が 354 で、2 つの列の比率が 40 と 314 である特定のケースでは、列の幅は次のようになります。

最初の列の幅 = 40/(40 + 314)*354 = 40
2列目の幅 = 314/(40 + 314)*354 = 314

星型の幅は、グリッドの幅が固定されていない場合に最適です。グリッドのサイズが変更されると、列は星型の幅で指定された比率で拡大縮小されます。この場合、グリッドの幅は固定されており、固定幅の列を簡単に使用することもできます。

2 番目の列の幅が 1 番目の列の幅の 2 倍で、3 番目の列の幅が 1 番目の列の幅の 3 倍のレイアウトが必要な場合は、次の定義が必要です。

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="*"/>
  <ColumnDefinition Width="2*"/>
  <ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>

グリッドの合計幅が 300 の場合、列幅は 50、100、150 になります。グリッドの合計幅が 600 の場合、列幅は 100、200、300 になります。以下同様に続きます。

おすすめ記事