GridSplitter

Như bạn đã thấy trong các bài viết trước, Grid giúp chúng ta dễ dàng phân chia không gian có sẵn thành các ô riêng lẻ. Sử dụng các định nghĩa cột và hàng, bạn có thể dễ dàng quyết định mỗi hàng hoặc cột sẽ chiếm bao nhiêu không gian, nhưng nếu bạn muốn cho phép người dùng thay đổi điều này thì sao? Đây là nơi control GridSplitter phát huy tác dụng.

GridSplitter được sử dụng rất đơn giản bằng cách thêm nó vào một cột hoặc một hàng trong Grid, với khoảng không gian thích hợp cho nó, ví dụ: 5 pixel. Sau đó, nó sẽ cho phép người dùng kéo nó từ bên này sang bên kia hoặc lên xuống, đồng thời thay đổi kích thước của cột hoặc hàng trên mỗi bên của nó. Đây là một ví dụ:

<Window x:Class="WpfTutorialSamples.Panels.GridSplitterSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridSplitterSample" Height="300" Width="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="5" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Left side</TextBlock>
        <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" />
        <TextBlock Grid.Column="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Right side</TextBlock>
    </Grid>
</Window>

Như bạn có thể thấy, tôi chỉ đơn giản là tạo một Grid có hai cột rộng bằng nhau, với một cột 5 pixel ở giữa. Mỗi bên chỉ là một TextBlock để minh họa cho điểm. Như bạn có thể thấy từ các ảnh chụp màn hình, GridSplitter được hiển thị dưới dạng đường phân chia giữa hai cột và ngay khi chuột ở trên nó, con trỏ được thay đổi để phản ánh rằng nó có thể được thay đổi kích thước.

GridSplitter nẳm ngang

GridSplitter rất dễ sử dụng và tất nhiên nó cũng hỗ trợ phân chia theo chiều ngang. Trên thực tế, bạn hầu như không phải thay đổi bất cứ điều gì để làm cho nó hoạt động theo chiều ngang thay vì theo chiều dọc, như ví dụ tiếp theo sẽ hiển thị:

<Window x:Class="WpfTutorialSamples.Panels.GridSplitterHorizontalSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridSplitterHorizontalSample" Height="300" Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="5" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Top</TextBlock>
        <GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" />
        <TextBlock Grid.Row="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Bottom</TextBlock>
    </Grid>
</Window>

Như bạn có thể thấy, tôi chỉ cần thay đổi các cột thành các hàng và trên GridSplitter, tôi đã xác định Chiều cao thay vì Chiều rộng. GridSplitter tự mình biết phải chia theo chiều nào, nhưng trong trường hợp nó không hoạt động, bạn có thể sử dụng thuộc tính ResizeDirection trên nó để buộc nó vào chế độ Hàng hoặc Cột.