Xin chào các bạn, trong bài này sẽ giới thiệu cho các bạn các loại Layout Controls trong Windows Phone. Như các bạn đã biết hầu hết các ngôn ngữ lập trình đều hỗ trợ các loại Layout Controls để lập trình viên có thể dễ dàng trong việc quản lý các Controls khác. Trong Windows Phone, Layout Controls là những Controls kế thừa từ Panel, dùng để chứa và sắp xếp các đối tượng con nằm trong đó. Có 3 loại Layout Controls chính đó là: Gird Layout, Stack Panel và Canvas. Ngoài ra còn có 2 Controls không hẳn là Layout Controls là: Border và Scrollviewer.

• Grid

Đầu tiên ta sẽ làm quen với Gird, hiểu nôm na đó là một cái lưới, nó sẽ định ra các dòng và cột, từ đó vị trí của các Controls bên trong Gird sẽ được xác định rõ nằm ở ô nào. Đối với Gird, các Controls trong nó sẽ được sắp xếp cân đối về cả chiều ngang và chiều dọc. Đoạn code dưới đây sẽ mô tả việc khai báo dòng và cột cho Gird layout:

<Grid x:Name=”LayoutRoot” >

<Grid.RowDefinitions>

<RowDefinition Height=”150″/>

<RowDefinition Height=”100″/>

<RowDefinition Height=”200″/>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width=”150″/>

<ColumnDefinition Width=”170″/>

<ColumnDefinition Width=”160″/>

</Grid.ColumnDefinitions>

</Grid>

Và đây sẽ là kết quả của khai báo trên (khai báo trong code XAML, file .xaml):

Như mình đã nói ở trên, Gird Layout có thể chèn các Controls vào đúng chính xác vào từng ô:

<Button Width=”130″ Height=”100″ Content=”Button1″/>
<Button Grid.Column=”1″ Grid.Row=”1″ Width=”130″ Height=”100″ Content=”Button2″/>
<Button Grid.Column=”2″ Grid.Row=”2″ Width=”130″ Height=”100″ Content=”Button3″/>
<Button Grid.Column=”2″ Grid.Row=”1″ Width=”130″ Height=”100″ Content=”Button4″/>
<Button Grid.Column=”1″ Grid.Row=”2″ Width=”130″ Height=”100″ Content=”Button5″/>

Các bạn quan sát ta được kết quả sau, giải thích một chút: ví dụ như Button2 ta muốn chèn vào ô ở vị trí dòng 1 cột 1 ta sẽ khai báo Grid.Column=”1″ Grid.Row=”1″. Tương tự với các button cũng như các Controls còn lại ta cũng làm tương tự. Như vậy là ta đã xong Layout Controls đầu tiên, đó chỉ là cái cơ bản nhất của Controls này, bạn có thể tìm hiểu thêm các thuộc của nó sẽ rất có ích trong quá trình lập trình (click vào Controls trong cửa sổ properties, thay đổi các thuộc tính và quan sát).

• Stack Panel

Tiếp theo ta sẽ làm quen với Stack Panel. Stack Panel đơn giản là một panel mà các Controls nằm trong đó sẽ được sắp xếp trên một hàng dọc hoặc một hàng ngang. Để thiết lập ngang hay dọc ta sẽ dùng thuộc tính  Orientation, giá trị mặc định của thuộc tính là Vertical (chiều dọc). Đoạn code sau sẽ biểu diễn 2 loại của Stack Panel:

<Grid>
<StackPanel Margin=”20″ x:Name=”stack1″>
<Rectangle Fill=”Red” Width=”50″ Height=”50″ Margin=”5″ />
<Rectangle Fill=”Blue” Width=”50″ Height=”50″ Margin=”5″ />
<Rectangle Fill=”Green” Width=”50″ Height=”50″ Margin=”5″ />
<Rectangle Fill=”Purple” Width=”50″ Height=”50″ Margin=”5″ />
</StackPanel>
<StackPanel Margin=”20″ x:Name=”stack2″ Orientation=”Horizontal”>
<Rectangle Fill=”Red” Width=”50″ Height=”50″ Margin=”5″ />
<Rectangle Fill=”Blue” Width=”50″ Height=”50″ Margin=”5″ />
<Rectangle Fill=”Green” Width=”50″ Height=”50″ Margin=”5″ />
<Rectangle Fill=”Purple” Width=”50″ Height=”50″ Margin=”5″ />
</StackPanel>
</Grid>

Các bạn thấy rằng ở stack1 mình không thiết lập thuộc tính Orientation, Stack sẽ mặc định lấy chiều dọc, còn ở stack2 mình thiết lập là Orientation=”Horizontal”, Stack sẽ quay sang chiều ngang.

• Canvas

Bây giờ ta sẽ tiếp tục với Layout Controls thứ 3. Canvas sẽ xác định một khu vực mà các Controls nằm trong nó sẽ được xác định vị trí bằng cách xác định khoảng cách của Controls đến lề trái và lề trên của Canvas. Các bạn lưu ý, ta thường sử dụng Canvas trong trường hợp cần tạo ra những Controls mà không muốn thay đổi vị trí của nó. Đoạn code sau sẽ mô tả việc tạo ra một hình chữ nhật có khoảng cách lề trái là 30px, lề trên là 200px:

<Canvas Background=”Transparent”>

<Rectangle Canvas.Left=”30″ Canvas.Top=”200″

Fill=”red” Width=”200″ Height=”200″ />

</Canvas>

Kết quả ta được như sau:

Như vậy chúng ta đã rõ 3 Layout Controls chính trong Windows Phone. Tiếp theo mình sẽ giới thiệu 2 Layout còn lại, mặc dù không thật sự là 2 Layout Controls thật sự nhưng nó rất hay được sử dụng.

• Border

Border là Controls dùng để tạo khung cho Gird hoặc Stack Panel. Nó cũng có thể làm khung cho các Controls khác tùy mục đích sử dụng.

Ex:

<Border BorderThickness=”8,4,2,1″  Width=”300″ Height=”300″>

<Border.BorderBrush>

<LinearGradientBrush EndPoint=”0.5,1″

StartPoint=”0.5,0″>

<GradientStop Color=”Red” Offset=”0″/>

<GradientStop Color=”Blue” Offset=”1″/>

</LinearGradientBrush>

</Border.BorderBrush>

<Grid x:Name=”ContentPanel” >

</Grid>

</Border>

• ScrollViewer

Khi bạn cần hiển thị một nội dung dài, bạn có thể dùng ScrollViewer để chứa nội dung đó. ScrollViewer cung cấp khả năng cuộn văn bản khi nó vượt quá kích thước quy định. Để sử dụng ScrollViewer bạn khai báo như sau:

<ScrollViewer Height=”350″>

<TextBlock TextWrapping=”Wrap”>

[nội dung hiển thị]

</TextBlock>

</ScrollViewer>

Qua bài này bạn đã có những kiến thức cơ bản về các Layout Controls trong Windows Phone, mình đã có 1 Project Demo các Layout Controls vừa tìm hiểu các bạn tải ở đây : http://1drv.ms/1BzgJN7 . Ở phần 2 của loạt bài Các Controls cơ bản  trong Windows Phone, mình sẽ tiếp tục giới thiệu với các bạn Text Controls, Selection Controls, Button Controls và Image Controls.