Apa yang dilakukan bintang WPF (Lebar = "100 *")

111

Apa sebenarnya arti bintang dalam istilah ukuran di WPF?

wpf xaml grid size Shimmy Weitzhandler
sumber

Jawaban:

234

Dalam Grid WPF, Width="*"atau Height="*"berarti ukuran proporsional.
Contoh: memberikan 30% untuk kolom 1 dan 70% untuk kolom 2 -

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

masukkan deskripsi gambar di sini

Dan juga untuk baris -

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

Angka tidak harus berupa bilangan bulat.
Jika Width for RowDefinition (Height for ColumnDefinition) dihilangkan, 1 * tersirat.
Dalam contoh ini, kolom 1 lebih lebar 1,5 kali dari kolom 2 -

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

Kolom 1: 1.5 *, Kolom 2 1 * (tersirat)

Anda dapat menggabungkan pas otomatis dan lebar tetap dengan lebar * (proporsional); dalam hal ini * kolom dibagi menjadi sisa setelah penyesuaian otomatis dan lebar tetap dihitung -

<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" />

masukkan deskripsi gambar di sini

Edward
sumber
30

Jika Anda memiliki 2 kolom seperti ini:

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

Artinya kolom pertama 10x lebih lebar dari yang kedua. Ini seperti mengatakan "10 bagian kolom 1, dan 1 bagian kolom 2."

Hal yang keren tentang ini adalah kolom Anda akan berubah ukuran secara proporsional. Pilihan lainnya adalah:

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

Semoga membantu!

Mark Carpenter
sumber
8

kami ambil contoh berikut .....

satu kisi dan memiliki 3 kolom dan masing-masing berisi satu tombol berukuran 100.

masukkan deskripsi gambar di sini

Kode XAML adalah ...

    <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>

Tapi sebenarnya ukurannya ....

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

Kesimpulan:

Total ukuran grid 600

"Otomatis": Kolom diubah ukurannya dengan isinya. (Kolom ke-2 memiliki tombol dengan lebar 100)

"*": Lebar kolom ke-1 adalah 3x dari kolom ke-3.

Rikin Patel
sumber
3

Selain itu, Anda dapat menghilangkan "*" jika itu adalah elemen ukuran unit. Jadi dengan menggunakan contoh kode Pwninstein, itu hanya akan menjadi:

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