Layout Rounding là một giải pháp của WPF giúp các lập trình viên bố trí Layout một cách nhanh chóng tuỳ theo ý muốn của mình qua code XAML.

Sau đây mình có một đoạn Code minh hoạ:

<Grid Height=”100″ Width=”200″>

<Grid.RowDefinitions>

<RowDefinition Height=”*”/>

<RowDefinition Height=”*”/>

<RowDefinition Height=”*”/>

</Grid.RowDefinitions>

<Rectangle Grid.Row=”0″ Fill=”DarkBlue”/>

<Rectangle Grid.Row=”1″ Fill=”DarkBlue”/>

<Rectangle Grid.Row=”2″ Fill=”DarkBlue”/>

</Grid>

Ở đoạn Code trên mình dùng thuộc tính <Grid.RowDefinitions> để định nghĩa các Row trong Grid và tương ứng với mỗi thẻ <RowDefinition Height=”*”/> (trong thẻ <Grid.RowDefinitions>) ta chia được một Row tương ứng.

Để chèn các Controls vào các Row đã Định nghĩa trên Grid chúng ta chỉ việc khai báo Grid.Row=”Vị trí Row”  (bắt đầu từ 0). như ở đoạn Code trên: <Rectangle Grid.Row=”0″ Fill=”DarkBlue”/> –> chèn một Rectangle vào Row thứ 1 . tương tự với việc chèn vào các Row khác. Minh Hoạ Hình 1

Hình 1: Row Definition

Tương tự như thế với việc chia giao diện với Colum. Các bạn sử dụng thẻ  <Grid.ColumnDefinitions> , các bạn có chèn các  Controls vào các Colum một cách dể dàng tương tự như Row. Chỉ đơn giản với việc khai báo Grid.Column=”Vị trí Colom” trong các Control. (Vị Trí :0, 1, 2) .

Việc kết hợp chia Row và Colom giúp chúng ta có thể chia giao diện theo ý mình, sau đây mình có đoạn Code minh hoạ

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height=”*”/>
<RowDefinition Height=”*”/>
<RowDefinition Height=”*”/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=”*”/>
<ColumnDefinition Width=”*”/>
<ColumnDefinition Width=”*”/>
</Grid.ColumnDefinitions>
<Button Grid.Row=”0″ Grid.Column=”0″ >1</Button>
<Button Grid.Row=”0″ Grid.Column=”1″ >2</Button>
<Button Grid.Row=”0″ Grid.Column=”2″ C>3</Button>
<Button Grid.Row=”1″ Grid.Column=”0″ >4</Button>
<Button Grid.Row=”1″ Grid.Column=”1″>5</Button>
<Button Grid.Row=”1″ Grid.Column=”2″>6</Button>
<Button Grid.Row=”2″ Grid.Column=”0″>7</Button>
<Button Grid.Row=”2″ Grid.Column=”1″>8</Button>
</Grid>

Việc kết hợp <Grid.RowDefinitions>  và <Grid.ColumnDefinitions>  Giúp chúng ta chia giao diện thành ma trận với các dòng và cột. . Và việc chèn các Control vào Các vị trí trên hết sức đơn giản :  <Button Grid.Row=”0″ Grid.Column=”0″ >1</Button> đoạn code này là chèn Button vào vị trí Grid(0,0)). Minh Hoạ Hình 2

Hình 2: Minh Hoạ <Grid.RowDefinitions>  và <Grid.ColumnDefinitions>