Tìm Hiểu Các Control Trong WPF

Grid: Bên dưới là một Form rỗng, và một lưới Grid được thiết kế sẵn 2 hàng và 3 cột. Đây là giao diện trên khung design trong Visual Studio.Để sử dụng Grid bạn có thể sử dụng cách kéo thả hoặc code bằng tay (XAML/C#)

Vậy cụ thể Grid là gì?
Nó là một control trong WPF, thứ mà bạn dùng để định nghĩa các layout trên Form. Hãy tưởng tượng bạn dùng nó để phân chia diện tích một Form thành nhiều ô chữ nhật vô hình. Với kích thước mà bạn cho phép, mỗi phạm vi chữ nhật sẽ được đặt 1 control ví dụ: StackPanel, Button, TextBox ... Ai thiết kế web chắc chắn biết đều này, nếu bạn không rõ thì hãy hiểu nó giống như phân chia lô đất vậy.

GRID

Trong WPF phần giao diện phần lớn được xây dựng bằng XAML nhưng điều đó không có nghĩa ta phụ thuộc vào nó bởi vì XAML cũng chỉ ánh xạ xuống khởi tạo các đối tượng trong .NET và dĩ nhiên ta hoàn toàn có thể sử dụng C#/VB để thiết kế. Đối với các control bạn có thể kéo thả từ ToolBox trên Visual Studio hoặc sử dụng XAML hay C# tùy ý để tạo một Grid.


A. Sử Dụng XAML
1. Định Nghĩa Cột Và Hàng

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

- Trong đó:

• Grid.RowDefinitions : Thẻ này chứa các thẻ con xác định số hàng
• RowDefinition: Thẻ con định nghĩa 1 hàng, n thẻ ta có n hàng
• Grid.ColumnDefinitions: Thẻ chứa các thẻ xác định số cột
• ColumnDefinition: Thẻ xác định 1 cột và n thẻ tương đương n cột

Lưu ý: Tất cả phải được nằm trong 1 thẻ Grid như mẫu trên
Thuộc tính:

• Width: Xác định độ dài của cột, chỉ áp dụng cho thẻ Column
• Height: Xác định độ cao cho hàng, chỉ áp dụng cho thẻ Row

Cả hai thuộc tính Width/Height có thể gán các tham số: Auto hoặc dấu sao '*' hoặc con số cụ thể

• Auto: Sẽ tự động căn chỉnh kích thước của hàng hoặc cột phụ thuộc vào độ dài của vật thể nằm trong nó. Ví dụ 1 button chẳng hạn hay 1 label . . .

• Dấu *: Khá thú vị, nó tự chia theo phần cân bằng. Bạn nhìn lên hình trên, khi tất cả Column được thiết lập Width="*" thì độ dài đều bằng nhau. Khi 1 trong 3 column thiết lập lại Width="2*" thì bây giờ độ dài các cột chia làm 4 phần và giá trị Width="2*" sẽ chiếm 2/4 như hình dưới. 

• Độ dài cụ thể: Bạn có thể gán width/height bằng con số cụ thể để có được kích thước mong muốn. Tuy nhiên 1 số cụ thể thì thật cứng nhắc, trừ khi bạn muốn nó như vậy :D

Lưu ý: Với giá trị '*' khi bạn có 3 thẻ <ColumnDefinition/> thật sự nó sẽ chia 3 phần bằng nhau khi cả 3 có giá trị Width="*" hết. Tuy nhiên nếu 1 cột có Width="Auto" hoặc Width="50" thì 2 cột còn lại sẽ chia đều phần còn lại , tức là nó ko được ưu tiên trước ;)

2. Gắn Các Controls Vào Grid

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
       
        <Button Grid.Row="0" Grid.Column="0" Content="Button"
                                  HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <Button Grid.Row="0" Grid.Column="1" Content="Button"
                                  HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <Button Grid.Row="0" Grid.Column="2" Content="Button"
                                  HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <Label Grid.Row="1" Grid.Column="0" Content="Label"
                                  HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <TextBox Grid.Row="1" Grid.Column="1"  Text="Text box..."
                                  HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <Calendar Grid.Row="1" Grid.Column="2"
                                  HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>

- Muốn control của bạn nằm chỗ nào chỉ cần thêm thuộc tính: Grid.Row hoặc Grid.Column vào thẻ của control đó. Cũng cần nhớ rằng vị trí index bắt đầu từ 0 nhé.

- Bạn có nhận thấy việc này khá giống tạo Table trong word không ?
- Tuy nhiên làm thế nào để hàng thứ nhất có 2 cột mà hàng thứ 2 có 3 cột ? Một yêu cầu giống như merge các cell nhỉ.
- Để làm điều đó ta cần vẽ các Grid khác nhau ở hàng 1 và 2.

• Như đã nói, muốn định nghĩa hàng/cột của grid bạn cần đảm bảo 1 thẻ <Grid/> bên ngoài.
• Và muốn đặt control vào vị trí nào trong cột/hàng của Grid đó nhớ thêm thẻ Grid.Row hoặc Grid.Column

3. Định Nghĩa Cột Và Hàng Cụ Thể

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <!--Inside Row 0-->
        <Grid Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
        </Grid>
        <!--Inside Row 1-->
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
        </Grid>
    </Grid>

- Bạn có thể tiếp tục định nghĩa liên tục nhiều hàng hoặc cột bên trong sâu hơn nữa. Chỉ việc thêm Grid Control mới vào vị trí đó.

4. Cho Phép Hiển Thị Một Thanh Kéo Để Thay Đổi Kích Thước

- Thật sự thì các Grid layout chỉ phân chia ngầm các vùng trên Form.Ngoài việc bạn có thể xác định 1 vài thuộc tính như background cho grid thì nó không có giao diện gì cả.
- Kích thước các cột và hàng trong grid có thể điều chỉnh linh động nhưng nếu bạn muốn linh động hơn bằng việc cần 1 thanh Splitter thì luôn có sẵn cho bạn. Cách làm việc như sau:

<Grid >
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <!--Inside Row 0-->
        <Button Grid.Row="0" Content="Button"
                             HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <GridSplitter Grid.Row="0" ResizeDirection="Rows"   Width="Auto" Height="3"
                      Background="Red" HorizontalAlignment="Stretch"   VerticalAlignment="Bottom"/>
        <!--Inside Row 1-->
        <Button Grid.Row="1" Content="Button"
                             HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <!--Inside Row 2-->
        <TextBox Text="Text box" Grid.Row="2" 
                            HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>

-Trên chương trình, bạn có thể thay đổi kích thước của phạm vị bằng việc kéo thanh splitter màu đỏ
- Splitter có thể kéo theo chiều ngang hoặc dọc nhưng về mặt giao diện bạn cần căn chỉnh một chút

Cách sử dụng:
- Sử dụng thẻ <Splitter/> xác định một tay kéo
- Đặt vào vị trí nào trong Grid thì gán Grid.Row, Grid.Column như đã nói ở trên

Thuộc tính:
ResizeDirection: Hướng kéo ngang/dọc, bạn có thể nhập giá trị Rows/Columns. Nếu bạn để mặc định thì nó tự xác định dựa vào chiều cao và chiều rộng
Width: Chiều rộng của splitter
Height: Chiều cao của splitter
HorizontalAlignment: Căn vị trí nằm ngang gồm Left, Right, Center, Stretch.
VerticalAlignment: Căn vị trí nằm dọc gồm Top, Bottom, Center, Stretch.

Xem lại Splitter này:

<GridSplitter Grid.Row="0" ResizeDirection="Rows"   Width="Auto" Height="3"                       Background="Red" HorizontalAlignment="Stretch"   VerticalAlignment="Bottom"/>

Width="Auto": Chiều dài sẽ dài hết cỡ trong Row mà nó nằm.
Height="3": Chiều cao chỉ 3
HorizontalAlignment="Stretch" : Căn chiều ngang hết cỡ
VerticalAlignment="Bottom": Chiều dọc dồn xuống dưới

- Bạn cần sử dụng các thuộc tính đó để điều chỉnh kích thước Splitter mình muốn. Ngoài ra có thể dùng thuộc tínnh ResizeBehavior để ràng buộc chiều được kéo
Lưu ý: Việc thanh kéo có hiệu lực phụ thuộc vào Width/Height của khu vực Row/Column được gán giá trị gì. Nếu các giá trị cứng thì khá là bất tiện.

Hãy mở Visual Studio lên và chạy thử một chương trình nhỏ nhé !

B. Sử Dụng C#

[WPF] Control: Using Grid Layout

Related Tags :
WritingObsolete