sự khác biệt giữa "*" và "Auto" trong Silverlight Lưới Layout Định nghĩa

Question

cố gắng tìm hiểu những điều sau là gì:

<Grid Name="Root"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="*" /> 
     <RowDefinition Height="*" /> 
     <RowDefinition Height="Auto" /> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="Auto" /> 
     <ColumnDefinition Width="*" /> 
     <ColumnDefinition Width="Auto" /> 
    </Grid.ColumnDefinitions> 
</Grid> 

bất cứ ai có thể giúp tôi trong việc giải thích sự khác biệt giữa * và Auto trong đoạn mã trên?

nhờ

Answer 1

Auto có nghĩa là cung cấp cho cột/hàng này kích thước của các mục được chứa.

* nghĩa chia sẻ phần còn lại của không gian có sẵn với các cột khác/hàng đó cũng chỉ định *.

Thực tế, * tương đương với 1*. Có thể chỉ định 2*, 3* ... N* cho chiều rộng hoặc chiều cao. Thuật toán Silverlight sử dụng là tổng tất cả các giá trị của N cho tất cả các hàng bằng cách sử dụng * sau đó cung cấp cho mỗi hàng phần chia sẻ thích hợp của không gian có sẵn. Ví dụ: -

<Grid.RowDefinitions> 
    <RowDefinition Height="*" /> 
    <RowDefinition Height="2*" /> 
    <RowDefinition Height="3*" /> 
    <RowDefinition Height="Auto" /> 
</Grid.Definitions> 

Điều này trước tiên sẽ xác định mức độ cao của hàng thứ ra từ nội dung của nó và trừ đi chiều cao đầy đủ. Phần còn lại của chiều cao sẽ được chia cho các hàng *. Người đầu tiên nhận được 1/6, người thứ hai nhận 1/3 và thứ ba nhận được 1/2 chiều cao có sẵn.

Answer 2

This page (phải thừa nhận là từ Silverlight 2, nhưng nó vẫn còn hợp lệ) có một số ví dụ của việc sử dụng mạng lưới với các giải thích sau đây:

Đối với mỗi dòng trong lưới chúng tôi có một yếu tố RowDefinition . Tất cả các định nghĩa hàng được đính kèm trong phần tử Grid.RowDefinitions. Hai hàng đầu tiên của chúng tôi có chiều cao 50 pixel và Chiều cao của hàng thứ ba được đặt thành “*”. Điều này cho thấy rằng hàng sẽ chiếm toàn bộ vị trí trong lưới mà không được thực hiện bởi các hàng khác.

và:

Một lựa chọn khác là để thiết lập chiều rộng và/hoặc chiều cao để “tự động”. Bằng cách này, mỗi cột/hàng thay đổi kích thước của nó để phù hợp với chiều rộng/chiều cao của các điều khiển trong nó. Ví dụ:

Answer 3

Auto sẽ làm cho mỗi kích thước cột sao cho nó có thể vừa với bất kỳ thứ gì có trong đó.

* sẽ sử dụng hết dung lượng còn trống. Cách tốt nhất là sử dụng khi bạn có cột "còn lại" mà bạn muốn thay đổi kích thước thành bất kỳ thứ gì còn lại.

Lưới mẫu chiều rộng không xác định.

Kịch bản 1:

Column 1 | Column 2 | Column 3 
---------------------------------- 
100 Width | Auto  | 200 Width 

Vào trường hợp này cột 2 có thể là bất cứ điều gì từ 1 đến bất cứ điều gì các nội dung được đưa vào nó đòi hỏi và không gian tối đa có sẵn cho chiều rộng của lưới điện. Nếu cột 2 đã được thay đổi thành * và chiều rộng được xác định trên toàn bộ lưới, nó sẽ lấp đầy khoảng trống bên trái để đạt được chiều rộng của lưới. Nếu bạn có hai cột được đặt là * và chiều rộng lưới được xác định, thì chúng sẽ cạnh tranh cho khoảng trống còn lại và chia tách nó.

Thông thường tôi sử dụng * để chỉ tối đa một cột (mặc dù đây không phải là quy tắc) nếu tôi có điều khiển được đặt thành kích thước động sao cho cột sẽ điền vào bất kỳ khoảng trống nào còn lại bởi các cột khác. Thật tuyệt nếu bạn muốn các cột có kích thước cụ thể cho điều khiển có kích thước động và muốn một số cột nhất định cố định và xác định một cột để mở rộng để điền vào phần còn lại của điều khiển. Auto sẽ không làm điều này với các cột nội dung trống hoặc thấp sẽ không thực sự lấp đầy khoảng trống bên trái.

Kịch bản 2 (col 3 chứa nội dung là 100 chiều rộng và lưới điện có tổng chiều rộng là 800):

Column 1 | Column 2 | Column 3 | Column 4 
-------------------------------------------- 
100 Width | 200 Width | Auto  | * 

Cột 3 sau đó sẽ chỉ kích thước đến 100 chiều rộng. Cột 4 sẽ có kích thước đến 400 chiều rộng để lấp đầy khoảng trống bên trái.