ดาว WPF ทำอะไร (ความกว้าง =“ 100 *”)

ดาวขนาดเท่ากันใน WPF หมายถึงอะไร

ใน WPF Grid Width="*"หรือHeight="*"หมายถึงการปรับขนาดตามสัดส่วน
ตัวอย่างเช่นให้ 30% กับคอลัมน์ 1 และ 70% ให้กับคอลัมน์ 2 -

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

และเช่นเดียวกันสำหรับแถว -

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

ตัวเลขไม่จำเป็นต้องเป็นจำนวนเต็ม
ถ้าความกว้างสำหรับ RowDefinition (ความสูงสำหรับ ColumnDefinition) ถูกละไว้ 1 * จะเป็นนัย
ในตัวอย่างนี้คอลัมน์ 1 กว้างกว่าคอลัมน์ 2 1.5 เท่า -

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

คุณสามารถผสมความกว้างพอดีอัตโนมัติและความกว้างคงที่กับความกว้าง * (ตามสัดส่วน) ในกรณีนี้คอลัมน์ * จะถูกแบ่งไปยังส่วนที่เหลือหลังจากคำนวณความพอดีอัตโนมัติและความกว้างคงที่แล้ว -

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

หากคุณมี 2 คอลัมน์ดังนี้:

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

หมายความว่าคอลัมน์แรกกว้างกว่าคอลัมน์ที่สอง 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"/>

หวังว่าจะช่วยได้!

เรานำตัวอย่างต่อไปนี้ .....

หนึ่งตารางและมี 3 คอลัมน์และแต่ละปุ่มมีขนาด 100 หนึ่งปุ่ม

รหัส 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 คือ 3x ของคอลัมน์ที่ 3

นอกจากนี้คุณสามารถเว้น "*" หากเป็นองค์ประกอบของขนาดหน่วย ดังนั้นการใช้ตัวอย่างโค้ดของ Pwninstein มันจะเป็น:

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