web-dev-qa-db-ja.com

WPFスターは何をする(Width = "100 *")

WPFのサイズ用語でスターとは何を意味しますか?

102
Shimmy

WPFグリッドでは、Width="*" または Height="*"は比例サイジングを意味します。
たとえば:列1に30%、列2に70%を与えるには-

<ColumnDefinition Width="3*" />
<ColumnDefinition Width="7*" />

enter image description here

行についても同様です-

<RowDefinition Height="3*" />
<RowDefinition Height="7*" />

数値は整数である必要はありません。
RowDefinitionの幅(ColumnDefinitionの高さ)を省略すると、1 *が暗黙指定されます。
この例では、列1は列2の1.5倍の幅です-

<ColumnDefinition Width="1.5*" />
<ColumnDefinition />

Column 1: 1.5*, Column 2 1* (implied)

自動調整幅と固定幅を*(比例)幅と混在させることができます。その場合、自動調整幅と固定幅が計算された後、*列が残りに割り当てられます-

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />  <!-- Auto-fit to content, 'Hi' -->
    <ColumnDefinition Width="50.5" />  <!-- Fixed width: 50.5 device units) -->
    <ColumnDefinition Width="69*" />   <!-- Take 69% of remainder -->
    <ColumnDefinition Width="31*"/>    <!-- Take 31% of remainder -->
</Grid.ColumnDefinitions>
<TextBlock Text="Hi" Grid.Column="0" />

enter image description here

225
Edward

このような2つの列がある場合:

<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="*"/>

つまり、最初の列が2番目の列よりも10倍広いことを意味します。 「10部1列、1部2列」と言っているようなものです。

これの素晴らしい点は、列が比例してサイズ変更されることです。他のオプションは次のとおりです。

//Take up as much space as the contents of the column need
<ColumnDefinition Width="Auto"/>
//Fixed width: 100 pixels
<ColumnDefinition Width="100"/>

お役に立てば幸いです!

29
Mark Carpenter

次の例をご覧ください。

1つのグリッドと3つの列があり、それぞれにサイズ100のボタンが1つ含まれています。

enter image description here

XAMLコードは...

    <Grid x:Name="LayoutRoot" Width="600">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="3*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="button1" VerticalAlignment="Top" Width="100" />
    <Button Content="Button1" Height="23" HorizontalAlignment="Left" Margin="0,10,0,0" Name="button2" VerticalAlignment="Top" Width="100" Grid.Column="1" />
    <Button Content="Button2" Height="23" HorizontalAlignment="Left" Margin="0,10,0,0" Name="button3" VerticalAlignment="Top" Width="100" Grid.Column="2" />
</Grid>

しかし、実際にはそのサイズは....

<Grid.ColumnDefinitions>
        <ColumnDefinition Width="375" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="125" />
</Grid.ColumnDefinitions>

結論:

グリッドの合計サイズは600です

「自動」:列が含まれているとサイズが変更されます。 (2列目に幅100のボタンがあります)

「*」:1列目の幅は3列目の3倍です。

8
Rikin Patel

さらに、ユニットサイズの要素である場合は、「*」を省略できます。したがって、Pwninsteinのコード例を使用すると、次のようになります。

<ColumnDefinition Width="10*/>
<ColumnDefinition/>
3
Dave