Lưới bên trong StackPanel: tại sao tự động và * hoạt động lạ?

Question

Tìm kiếm trên google và stackoverflow của tôi không thành công, vì vậy tôi trình bày cho cộng đồng câu hỏi này.

(Điều này là tất cả được tạo ra sử dụng VS2010 và .NET 4.0, trong một mặc định trống WPF Solution)

Xem xét XAML sau:

<StackPanel Orientation="Horizontal"> 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="20"/> 
      <ColumnDefinition Width="*"/> 
     </Grid.ColumnDefinitions> 

     <Border Name="aborder" Grid.Column="0" Grid.ColumnSpan="2" 
        Background="Red" Width="200"/> 
     <Border Name="aborder2" Background="Green"/> 

    </Grid> 
</StackPanel> 

Những gì bạn sẽ dự đoán chiều rộng của "aborder2" để được?

Nếu bạn đoán "20 pixel", bạn sẽ sai. Câu trả lời đúng là 110 pixel.

xem xét XAML này:

<StackPanel Orientation="Horizontal"> 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="20"/> 
      <ColumnDefinition Width="Auto"/> 
     </Grid.ColumnDefinitions> 

     <Border Name="aborder" Grid.Column="0" Grid.ColumnSpan="2" 
        Background="Red" Width="200"/> 
     <Border Name="aborder2" Background="Green"/> 

    </Grid> 
</StackPanel> 

Những gì bạn sẽ dự đoán chiều rộng của "aborder2" được?

Nếu bạn đoán 20 pixel hoặc 110 pixel, bạn sẽ sai. Câu trả lời đúng là 200 pixel.

Tôi không thể hiểu điều này và điều đó khiến tôi phát điên. Có vẻ như câu trả lời nên rõ ràng; rõ ràng có một số tương tác giữa một cột lưới tự động điền và stackpanel gây ra lưới để freak ra. Nhưng điều đó dường như không làm cho cảm giác - bất kỳ quy tắc nào điều chỉnh hành vi này dường như tùy ý. Tại sao 110 pixel? Tại sao không phải là 109 pixel hoặc 100 pixel? Tôi sẽ hiểu nếu cột tự động kích thước không mở rộng đầy đủ hoặc một cái gì đó, nhưng để có cột cố định chiều rộng ngẫu nhiên bỏ qua chiều rộng của nó đã để lại cho tôi một vỏ cháy của một nhà phát triển.

Mọi trợ giúp hoặc đèn hướng dẫn sẽ được đánh giá cao!

Answer 1

tôi không có ý tưởng tại sao ví dụ đầu tiên không được hiển thị chính xác

The 2nd là vì Auto có nghĩa là "kích thước tương tự như nội dung", nhưng bạn không có gì trong Column2 vì vậy Column2 được hiển thị tại 0px. Bạn có một cái gì đó trong Column1 kéo dài 2 ô, nhưng vì Column2 được trả về 0 px, có nghĩa là Column1 được kéo dài đến 200 px. Theo mặc định, Grid mở rộng con của họ để điền vào tất cả không gian có sẵn trong ô, do đó, điều này đang làm cho aborder2 kéo dài đến 200px thay vì 20.

Tôi nghĩ ví dụ đầu tiên có thể là tình huống tương tự, trong đó Column2 hiển thị ở 0px vì nó không có nội dung, tuy nhiên tôi không chắc chắn lý do tại sao nó được thiết lập aborder2 với chiều rộng 110. 110 dường như đến từ (GridWidth/TotalColumns) + (1stColumnWidth/TotalColumns * NumberOfStarColumns), vì vậy tôi nghĩ rằng đó là một lỗi.

Là một mặt lưu ý, bạn có thể đặt một COLUMN1 MaxWidth="20" để buộc COLUMN1 luôn làm như 20px

Answer 2

Không có câu trả lời cho bạn, nhưng dường như cũng xảy ra trong Silverlight. Tôi cho rằng có một số lỗi trong quá trình sắp xếp và đo lường. Nếu bạn đặt một điều khiển tùy chỉnh trong đó thay vì một biên giới và ghi đè các biện pháp và sắp xếp các phương pháp bạn sẽ có thể có được một hình ảnh tốt hơn về những gì đang xảy ra.

Để cố gắng giải quyết những bí ẩn về nơi 110 đến từ đâu, tôi đoán (200 - 20)/2 + 20

EDIT: Tôi đã thử một vài công thức khác và nó đã không giữ lên, ngoại hình hơn như:

(200 + 20)/2