Làm game Tetris cực đơn giản với C# và WPF

Posted Dec 29, 2010

By Scott Le

13 min read

Bài 1: Ứng dụng các loại layout container để tạo User Interface

Trong các bài trước, chúng ta đã tìm hiểu về một số loại layout container sử dụng trong công nghệ WPF. Nếu chưa biết về các loại layout này, tôi khuyên bạn nên đọc các bài viết giới thiệu một số loại layout container cơ bản trước, đó là WrapPanel, DockPanel và StackPanel. Trong bài viết này, chúng ta sẽ tìm hiểu thêm về một loại layout container rất mạnh – grid.

Trước hết, bạn nên đọc qua bài Hướng dẫn viết game Xếp gạch với C/C++ của anh tauit_dnmd. Ở đây tôi sẽ chỉ trình bày trò chơi với giao diện rất đơn sơ, không background, không sound.

Đầu tiên, chạy chương trình Visual Studio (hoặc Visual C#). Ở đây tôi dùng bản Visual Studio 2010 Ultimate. Ở khung bên trái – installed templates, chon Visual C# -> Windows. Tiếp theo, chọn WPF Application trong khung ở giữa. Đặt tên cho project và xác định vị trí lưu source files. Nhấn OK.

Ban đầu, Visual Studio sẽ tạo cho bạn 2 file: MainWindow.xaml – đây là phần tạo giao diện cho ứng dụng của bạn, và file MainWindow.xaml.cs – file này sẽ chứa phần code behind. Trong bài viết này chúng ta sẽ chỉ tạo ra giao diện cho chương trình, do đó chúng ta sẽ chỉ thao tác với file MainWindow.xaml mà thôi. Trước hết chúng ta sửa lại một vài thông tin về chương trình cái đã. Mà đã biết gì ngoài cái tên chương trình mà ta định viết đâu nhỉ, thôi kệ, sửa cái này trước cũng được ^^. Tìm tới Title attribute trong thẻ Window, sửa giá trị của thuộc tính này thành Simple Tetris (hoặc bất kì cái tên nào mà bạn muốn).

<span style="color:blue;"><</span><span style="color:#a31515;">Window </span><span style="color:red;">x</span><span style="color:blue;">:</span><span style="color:red;">Class</span><span style="color:blue;">="Tetris2.MainWindow"
        </span><span style="color:#a31515;">…
        </span><span style="color:red;">Title</span><span style="color:blue;">="Simple Tetris" ...
</<span style="color:#a31515;">Window</span>>

Tiếp theo, ta thay thế layout container - Grid ban đầu mà WPF tạo ra cho chương trình của chúng ta bằng StackPanel. Như ở hình đầu tiên mà các bạn thấy, chúng ta phân chia bố cục theo hàng ngang, do đó chúng ta set thuộc tính Orientation thành Horizontal. Thêm một chi tiết nữa là background. Ở đây tôi chọn một cái màu gì gì đấy mà tôi cũng không biết ^^!, các bạn có thể chọn theo ý mình hoặc để trắng cũng được.

<span style="color:blue;"><</span><span style="color:#a31515;">StackPanel </span><span style="color:red;">Background</span><span style="color:blue;">="AntiqueWhite" </span><span style="color:red;">Orientation</span><span style="color:blue;">="Horizontal">
    …
</</span><span style="color:#a31515;">StackPanel</span><span style="color:blue;">>

Vậy là xong outer container. Bây giờ tiến hành tạo từng thành phần bên trong theo thứ tự từ trái sang phải. Trước hết sẽ là khung hướng dẫn cách chơi bên trái. Trong khung này sử dụng 4 textblock và được đặt trong một stack panel khác. Giá trị mặc định của thuộc tính Orientation trong StackPanel là Vertical cho nên chúng ta không cần phải set lại nữa. Dưới đây là phần mã xaml.

<span style="color:green;">        <!-- Left side-->
        </span><span style="color:blue;"><</span><span style="color:#a31515;">StackPanel </span><span style="color:red;">HorizontalAlignment</span><span style="color:blue;">="Left">
            <</span><span style="color:#a31515;">TextBlock  </span><span style="color:red;">Margin</span><span style="color:blue;">="10,200,0,10" </span><span style="color:red;">FontSize</span><span style="color:blue;">="14">
                </span><span style="color:#a31515;">Up arrow: Rotate
            </span><span style="color:blue;"></</span><span style="color:#a31515;">TextBlock</span><span style="color:blue;">>
            <</span><span style="color:#a31515;">TextBlock  </span><span style="color:red;">Margin</span><span style="color:blue;">="10,0,0,10" </span><span style="color:red;">FontSize</span><span style="color:blue;">="14">
                </span><span style="color:#a31515;">Left arrow: To the left
            </span><span style="color:blue;"></</span><span style="color:#a31515;">TextBlock</span><span style="color:blue;">>
            <</span><span style="color:#a31515;">TextBlock  </span><span style="color:red;">Margin</span><span style="color:blue;">="10,0,30,10" </span><span style="color:red;">FontSize</span><span style="color:blue;">="14">
                </span><span style="color:#a31515;">Right arrow: To the right
            </span><span style="color:blue;"></</span><span style="color:#a31515;">TextBlock</span><span style="color:blue;">>
            <</span><span style="color:#a31515;">TextBlock  </span><span style="color:red;">Margin</span><span style="color:blue;">="10,0,0,10" </span><span style="color:red;">FontSize</span><span style="color:blue;">="14">
                </span><span style="color:#a31515;">Down arrow: Get down
            </span><span style="color:blue;"></</span><span style="color:#a31515;">TextBlock</span><span style="color:blue;">>
        </</span><span style="color:#a31515;">StackPanel</span><span style="color:blue;">>
</span>

Tới phần quan trọng nhất, khung ở giữa chính là nơi chúng ta chơi game đấy các bạn ạ ^^. Trong phần này, chúng ta sẽ sử dụng một loại layout container rất mạnh mà tôi đã nhắc tới lúc đầu – Grid.

Giới thiệu về grid đã nhé. Bạn có thể tưởng tượng grid cũng như một ma trận 2 chiều vậy. Nó có thể có số hàng và số cột theo ý muốn của chúng ta, chỉ khác một điều là các hàng, cột mặc định sẽ không được hiển thị, trừ khi chúng ta set thuộc tính ShowGridLines thành true (hoặc trong lúc design ta cũng có thể thấy được các hàng và các cột này). Mỗi ô trong grid có thể chứa nhiều hơn một element và tất nhiên các element này cũng có thể là một loại layout container khác. Để thêm hàng, cột cho grid, chúng ta sử dụng 2 sub tag là và . Ví dụ tôi muốn tạo ra 2 hàng và 3 cột trong grid, đoạn mã XAML của tôi sẽ là:

<span style="color:blue;"><</span><span style="color:#a31515;">Grid.RowDefinitions</span><span style="color:blue;">>
     <</span><span style="color:#a31515;">RowDefinition</span><span style="color:blue;">></</span><span style="color:#a31515;">RowDefinition</span><span style="color:blue;">>
     <</span><span style="color:#a31515;">RowDefinition</span><span style="color:blue;">></</span><span style="color:#a31515;">RowDefinition</span><span style="color:blue;">>
</</span><span style="color:#a31515;">Grid.RowDefinitions</span><span style="color:blue;">>

<</span><span style="color:#a31515;">Grid.ColumnDefinitions</span><span style="color:blue;">>
     <</span><span style="color:#a31515;">ColumnDefinition</span><span style="color:blue;">></</span><span style="color:#a31515;">ColumnDefinition</span><span style="color:blue;">>
     <</span><span style="color:#a31515;">ColumnDefinition</span><span style="color:blue;">></</span><span style="color:#a31515;">ColumnDefinition</span><span style="color:blue;">>
     <</span><span style="color:#a31515;">ColumnDefinition</span><span style="color:blue;">></</span><span style="color:#a31515;">ColumnDefinition</span><span style="color:blue;">>
</</span><span style="color:#a31515;">Grid.ColumnDefinitions</span><span style="color:blue;">>

Trong ví dụ trên, chúng ta không cung cấp thêm bất kì thông tin nào trong thẻ RowDefinition và ColumnDefinition, do đó Grid sẽ chia đều kích thước của mỗi ô tùy theo kích thước của cửa sổ ngoài cùng. Để đặt các thành phần vào các ô trong Grid, chúng ta phải sử dụng attached property – Row và Column. Ví dụ, chúng ta muốn đặt các button vào các ô trong Grid mà chúng ta tạo ra lúc trước, chúng ta sẽ làm như sau:

<span style="color:blue;"><</span><span style="color:#a31515;">Grid</span><span style="color:blue;">>
    ...
<</span><span style="color:#a31515;">Button </span><span style="color:red;">Grid.Row</span><span style="color:blue;">="0" </span><span style="color:red;">Grid.Column</span><span style="color:blue;">="0"></span><span style="color:#a31515;">Top Left</span><span style="color:blue;"></</span><span style="color:#a31515;">Button</span><span style="color:blue;">>
       <</span><span style="color:#a31515;">Button </span><span style="color:red;">Grid.Row</span><span style="color:blue;">="0" </span><span style="color:red;">Grid.Column</span><span style="color:blue;">="1"></span><span style="color:#a31515;">Middle Left</span><span style="color:blue;"></</span><span style="color:#a31515;">Button</span><span style="color:blue;">>
       <</span><span style="color:#a31515;">Button </span><span style="color:red;">Grid.Row</span><span style="color:blue;">="1" </span><span style="color:red;">Grid.Column</span><span style="color:blue;">="2"></span><span style="color:#a31515;">Bottom Right</span><span style="color:blue;"></</span><span style="color:#a31515;">Button</span><span style="color:blue;">>
       <</span><span style="color:#a31515;">Button </span><span style="color:red;">Grid.Row</span><span style="color:blue;">="1" </span><span style="color:red;">Grid.Column</span><span style="color:blue;">="1"></span><span style="color:#a31515;">Bottom Middle</span><span style="color:blue;"></</span><span style="color:#a31515;">Button</span><span style="color:blue;">>
    ...
</</span><span style="color:#a31515;">Grid</span><span style="color:blue;">>

Kết quả của đoạn mã trên:

Tiếp theo, chúng ta sẽ nói về phần kích thước của các hàng/cột trong Grid. Grid hỗ trợ 3 kiểu xác định kích thước như sau:

Absolute sizes. Bạn sẽ chọn kích thước cho hàng (cột) bằng cách sử dụng đơn vị đo lường, tính toán của WPF – Device-independent units.
**Automatic sizes. **Với cách này, mỗi hàng hoặc cột sẽ có kích thước vừa đủ để chứa các element đặt bên trong nó, không nhiều hơn và không ít hơn.
Proportional sizes. Khoảng cách được chia theo từng nhóm hàng hoặc cột. Với trường hợp này, các hàng, cột sẽ nhận được kích thước tối đa mà nó có thể có.

Để thay đổi kích thước của hàng, chúng ta sử dụng property Height, đối với cột là property Width. Ví dụ, về các trường hợp xác định kích thước:

<p><span style="color:blue;"><</span><span style="color:#a31515;">ColumnDefinition </span><span style="color:red;">Width</span><span style="color:blue;">="100"></</span><span style="color:#a31515;">ColumnDefinition</span><span style="color:blue;">> </span></p><p><span style="color:blue;"></span><span style="color:green;"><!-- Sử dụng absolute sizes-->
</span><span style="color:blue;"><</span><span style="color:#a31515;">ColumnDefinition </span><span style="color:red;">Width</span><span style="color:blue;">="Auto"></</span><span style="color:#a31515;">ColumnDefinition</span><span style="color:blue;">> </span></p><p><span style="color:blue;"></span><span style="color:green;"><!-- Sử dụng Automatic sizes-->
</span><span style="color:blue;"><</span><span style="color:#a31515;">RowDefinition </span><span style="color:red;">Height</span><span style="color:blue;">="*"></</span><span style="color:#a31515;">RowDefinition</span><span style="color:blue;">> </span></p><p><span style="color:blue;"></span><span style="color:green;"><!-- Sử dụng Proportional sizes--></p>

Nếu bạn muốn các khoảng cách trong proportional size có tỉ lệ khác nhau, bạn chỉ cần thêm tỉ lệ phía trước dấu *:

<span style="color:blue;"><</span><span style="color:#a31515;">RowDefinition </span><span style="color:red;">Height</span><span style="color:blue;">="*"></</span><span style="color:#a31515;">RowDefinition</span><span style="color:blue;">>
<</span><span style="color:#a31515;">RowDefinition </span><span style="color:red;">Height</span><span style="color:blue;">="2*"></</span><span style="color:#a31515;">RowDefinition</span><span style="color:blue;">>

Cuối cùng, chúng ta sẽ nói đến việc trải dài kích thước element giữa các hàng, cột. Nếu bạn muốn một element đã được đặt vào một cell nào đó trong grid nhưng được kéo dãn và đè lên các cell khác trong cùng hàng hoặc cột, bạn sử dụng thuộc tính RowSpan và ColumnSpan. Ví dụ, một button sẽ sử dụng phần không gian của ô thứ nhất và ô thứ 2 trong hàng đầu tiên.

<p><span style="color:blue;"><</span><span style="color:#a31515;">Button </span><span style="color:red;">Grid.Row</span><span style="color:blue;">="0" </span><span style="color:red;">Grid.Column</span><span style="color:blue;">="0" </span><span style="color:red;">Grid.RowSpan</span><span style="color:blue;">="2"></span></p><p><span style="color:blue;">     </span><span style="color:#a31515;">Span Button </span><span style="color:blue;"></</span><span style="color:#a31515;">Button</span><span style="color:blue;">></p>

Kết quả:

Vậy là các bạn đã nắm được những điểm cơ bản về Grid rồi đúng không. Chúng ta quay lại phần làm khung chính của game nhé. Vì trò chơi này được làm theo hướng dẫn của anh tauit nên phần cấu trúc của game cũng sẽ tương tự như vậy, và đó cũng là lý do tôi yêu cầu các bạn đọc bài tuts đó trước khi tiếp tục bài này. Với chương trình bằng C/C++, anh tauit dùng một ma trận 2 chiều kích thước 22x10, trong đó 4 hàng đầu tiên sẽ được dùng để lưu trữ các viên gạch lúc mới khởi tạo. Ở đây, tôi sử dụng ma trận 2 chiều với kích thước 24x12. Và Grid cũng giống như một ma trận 2 chiều, do đó chúng ta sẽ tạo ra một grid có 24 hàng và 12 cột dùng làm game board. Tôi muốn mỗi viên gạch sẽ là một hình vuông có cạnh là 25px, do đó grid của chúng ta sẽ có width = 25 x 12 = 300 và height = 25x24 = 600. Để tiện cho việc control sau này trong phần code behind, chúng ta sẽ đặt tên cho grid này là MainGrid. Dưới đây là phần code XAML:

<span style="color:blue;"><</span><span style="color:#a31515;">Grid </span><span style="color:red;">Name</span><span style="color:blue;">="MainGrid"  </span><span style="color:red;">Height</span><span style="color:blue;">="600" </span><span style="color:red;">Width</span><span style="color:blue;">="300" </span><span style="color:red;">Margin</span><span style="color:blue;">="5,0,0,5">
    <</span><span style="color:#a31515;">Grid.RowDefinitions</span><span style="color:blue;">>  <span style="color:green;"><!--24 hàng--> </span> 
        <</span><span style="color:#a31515;">RowDefinition</span><span style="color:blue;">></</span><span style="color:#a31515;">RowDefinition</span><span style="color:blue;">>
        <</span><span style="color:#a31515;">RowDefinition</span><span style="color:blue;">></</span><span style="color:#a31515;">RowDefinition</span><span style="color:blue;">>   
        <</span><span style="color:#a31515;">RowDefinition</span><span style="color:blue;">></</span><span style="color:#a31515;">RowDefinition</span><span style="color:blue;">>
        ...
        <</span><span style="color:#a31515;">RowDefinition</span><span style="color:blue;">></</span><span style="color:#a31515;">RowDefinition</span><span style="color:blue;">>
    </</span><span style="color:#a31515;">Grid.RowDefinitions</span><span style="color:blue;">>  <span style="color:green;"><!--12 cột--> </span>
    <</span><span style="color:#a31515;">Grid.ColumnDefinitions</span><span style="color:blue;">>
        <</span><span style="color:#a31515;">ColumnDefinition</span><span style="color:blue;">></</span><span style="color:#a31515;">ColumnDefinition</span><span style="color:blue;">>
        <</span><span style="color:#a31515;">ColumnDefinition</span><span style="color:blue;">></</span><span style="color:#a31515;">ColumnDefinition</span><span style="color:blue;">>
        ...
        <</span><span style="color:#a31515;">ColumnDefinition</span><span style="color:blue;">></</span><span style="color:#a31515;">ColumnDefinition</span><span style="color:blue;">>                
    </</span><span style="color:#a31515;">Grid.ColumnDefinitions</span><span style="color:blue;">>           
    ...
</</span><span style="color:#a31515;">Grid</span><span style="color:blue;">>

Bây giờ sẽ thêm thắt một vài chi tiết nữa để tạo ra game board như hình ở đầu bài viết này. Trước hết là một border bao quanh grid. Ngay bên dưới hàng </Grid.ColumnDefinitions>, chúng ta tạo ra một đối tượng Border. Các viên gạch sẽ chỉ được hiển thị từ hàng thứ 4 trở đi (vì 4 hàng đầu tiên sẽ dùng để khởi tạo viên gạch). Do đó, border của chúng ta sẽ được gắn vào hàng số 4 của grid, cột đầu tiên. Kéo dãn border này ra hết chiều ngang và chiều dọc còn lại của grid bằng thuộc tính RowSpan và ColumnSpan. Thay đổi giá trị một vài thuộc tính của đối tượng border này như BorderThickness, Background, BorderBrush… Ở đây tôi chọn BorderThickness bằng 4, để đảm bảo kích thước của grid bên trong, chúng ta sẽ thiết lập thuộc tính Margin=”-4”. Tương tự, chúng ta sử dụng các attached property của Grid để định vị các phần còn lại như sau:

<p><span style="color:blue;"><</span><span style="color:#a31515;">Grid ...</span><p><span style="color:#a31515;">...</span><p><span style="color:blue;"></</span><span style="color:#a31515;">Grid.ColumnDefinitions</span><span style="color:blue;">> </span><p><span style="color:blue;"><</span><span style="color:#a31515;">Border </span><span style="color:red;">Grid.Row</span><span style="color:blue;">="4" </span><span style="color:red;">Grid.RowSpan</span><span style="color:blue;">="20" </span><span style="color:red;">Grid.Column</span><span style="color:blue;">="0" </span></p><p><span style="color:blue;">     </span><span style="color:red;">Grid.ColumnSpan</span><span style="color:blue;">="12" </span><span style="color:red;">BorderBrush</span><span style="color:blue;">="Blue" </span><span style="color:red;">Background</span><span style="color:blue;">="Black" </span></p><p><span style="color:blue;">     </span><span style="color:red;">BorderThickness</span><span style="color:blue;">="4"  </span><span style="color:red;">Margin</span><span style="color:blue;">="-4"></</span><span style="color:#a31515;">Border</span><span style="color:blue;">>
</span><span style="color:green;"><!--Textblock ở giữa-->
</span><span style="color:blue;"><</span><span style="color:#a31515;">TextBlock </span><span style="color:red;">Grid.Column</span><span style="color:blue;">="2"  </span><span style="color:red;">Grid.ColumnSpan</span><span style="color:blue;">="8" </span><span style="color:red;">Grid.Row</span><span style="color:blue;">="6" </span></p><p><span style="color:blue;">     </span><span style="color:red;">Height</span><span style="color:blue;">="123" </span><span style="color:red;">HorizontalAlignment</span><span style="color:blue;">="Center" </span><span style="color:red;">Margin</span><span style="color:blue;">="0,2,0,0" </span></p><p><span style="color:blue;">     </span><span style="color:red;">Name</span><span style="color:blue;">="playGame" </span><span style="color:red;">TextAlignment</span><span style="color:blue;">="Center" </span><span style="color:red;">VerticalAlignment</span><span style="color:blue;">="Top" </span></p><p><span style="color:blue;">     </span><span style="color:red;">Width</span><span style="color:blue;">="200" </span><span style="color:red;">Grid.RowSpan</span><span style="color:blue;">="5" </span><span style="color:red;">FontFamily</span><span style="color:blue;">="Consolas" 
     </span><span style="color:red;">FontSize</span><span style="color:blue;">="20" </span><span style="color:red;">FontWeight</span><span style="color:blue;">="Thin" </span><span style="color:red;">Foreground</span><span style="color:blue;">="Yellow" </span></p><p><span style="color:blue;">     </span><span style="color:red;">TextWrapping</span><span style="color:blue;">="Wrap" </span><span style="color:red;">Text</span><span style="color:blue;">="Press Enter to play game"/>
</span><span style="color:green;"><!-- Phần hiển thị số điểm-->
</span><span style="color:blue;"><</span><span style="color:#a31515;">Label </span><span style="color:red;">Content</span><span style="color:blue;">="Score:" </span><span style="color:red;">Height</span><span style="color:blue;">="28" </span><span style="color:red;">Margin</span><span style="color:blue;">="0,22,0,0" </span></p><p><span style="color:blue;">     </span><span style="color:red;">FontFamily</span><span style="color:blue;">="Consolas" </span><span style="color:red;">FontSize</span><span style="color:blue;">="20" </span><span style="color:red;">HorizontalAlignment</span><span style="color:blue;">="Left"</span></p><p><span style="color:blue;">     </span><span style="color:red;">Grid.ColumnSpan</span><span style="color:blue;">="4" </span><span style="color:red;">Grid.RowSpan</span><span style="color:blue;">="2" />
<</span><span style="color:#a31515;">TextBlock </span><span style="color:red;">Name</span><span style="color:blue;">="score" </span><span style="color:red;">TextAlignment</span><span style="color:blue;">="Right" </span></p><p><span style="color:blue;">     </span><span style="color:red;">FontFamily</span><span style="color:blue;">="Courier New" </span><span style="color:red;">FontWeight</span><span style="color:blue;">="ExtraBold" </span></p><p><span style="color:blue;">     </span><span style="color:red;">FontStyle</span><span style="color:blue;">="Oblique" </span><span style="color:red;">FontSize</span><span style="color:blue;">="24" </span><span style="color:red;">Grid.Column</span><span style="color:blue;">="3" </span></p><p><span style="color:blue;">     </span><span style="color:red;">Grid.ColumnSpan</span><span style="color:blue;">="3" </span><span style="color:red;">Grid.Row</span><span style="color:blue;">="1" </span><span style="color:red;">Grid.RowSpan</span><span style="color:blue;">="2" </span></p><p><span style="color:blue;">     </span><span style="color:red;">Height</span><span style="color:blue;">="28" </span><span style="color:red;">VerticalAlignment</span><span style="color:blue;">="Top"></span><span style="color:#a31515;">0</span></p><p><span style="color:blue;"></</span><span style="color:#a31515;">TextBlock</span><span style="color:blue;">>
</span><span style="color:green;"><!-- Phần hiển thị level-->
</span><span style="color:blue;"><</span><span style="color:#a31515;">Label </span><span style="color:red;">Content</span><span style="color:blue;">="Level:" </span><span style="color:red;">Height</span><span style="color:blue;">="28" </span><span style="color:red;">Margin</span><span style="color:blue;">="0,22,0,0" </span></p><p><span style="color:blue;">     </span><span style="color:red;">FontFamily</span><span style="color:blue;">="Consolas" </span><span style="color:red;">FontSize</span><span style="color:blue;">="20" </span><span style="color:red;">HorizontalAlignment</span><span style="color:blue;">="Left"</span></p><p><span style="color:blue;">     </span><span style="color:red;">Grid.ColumnSpan</span><span style="color:blue;">="3" </span><span style="color:red;">Grid.RowSpan</span><span style="color:blue;">="2" </span><span style="color:red;">Grid.Row</span><span style="color:blue;">="1" />
<</span><span style="color:#a31515;">TextBlock </span><span style="color:red;">Name</span><span style="color:blue;">="level" </span><span style="color:red;">VerticalAlignment</span><span style="color:blue;">="Top" </span></p><p><span style="color:blue;">     </span><span style="color:red;">TextAlignment</span><span style="color:blue;">="Right" </span><span style="color:red;">FontFamily</span><span style="color:blue;">="Courier New" </span></p><p><span style="color:blue;">     </span><span style="color:red;">FontWeight</span><span style="color:blue;">="ExtraBold" </span><span style="color:red;">FontStyle</span><span style="color:blue;">="Oblique" </span><span style="color:red;">FontSize</span><span style="color:blue;">="24" </span></p><p><span style="color:blue;">     </span><span style="color:red;">Grid.Column</span><span style="color:blue;">="3" </span><span style="color:red;">Grid.ColumnSpan</span><span style="color:blue;">="3" </span><span style="color:red;">Grid.Row</span><span style="color:blue;">="2" </span></p><p><span style="color:blue;">     </span><span style="color:red;">Grid.RowSpan</span><span style="color:blue;">="2"></span><span style="color:#a31515;">0</span></p><p><span style="color:#a31515;"></span><span style="color:blue;"><</span><span style="color:blue;">/</span><span style="color:#a31515;">TextBlock</span><span style="color:blue;">>
</</span><span style="color:#a31515;">Grid</span><span style="color:blue;">></span></p>

Lưu ý, chúng ta cần thiết phải đặt tên cho các textblock để sau này có thể xử lý trong phần code behind (giấu đi dòng chữ ở giữa grid, cập nhật điểm số, level).

Cuối cùng là phía bên phải của cửa sổ chương trình của chúng ta. Phần này dùng để hiển thị các ô gạch tiếp theo sẽ rơi xuống. Tương tự, chúng ta cũng sử dụng Grid để quản lý các khối gạch. Grid này sẽ có 5 hàng, 5 cột, mỗi ô có kích thước 25px. Tôi muốn hiển thị 3 khối gạch tiếp theo sẽ rơi xuống, do đó tôi tạo ra 3 Grid như vậy và đặt bên trong một StackPanel.

<span style="color:green;"><!-- Right side-->
</span><span style="color:blue;"><</span><span style="color:#a31515;">StackPanel </span><span style="color:red;">Margin</span><span style="color:blue;">="30,0,0,0" >
...

</</span><span style="color:#a31515;">StackPanel</span><span style="color:blue;">>

Phần tử đầu tiên đặt trong stack panel này là một Label có nội dung là “Next blocks”. Font consolas, FontSize là 20, khoảng cách rìa bên trái là 5px và ở trên là 100px (để ngang bằng với border trong mainGrid):

<p><span style="color:blue;"><</span><span style="color:#a31515;">Label </span><span style="color:red;">Content</span><span style="color:blue;">="Next Blocks" </span><span style="color:red;">Height</span><span style="color:blue;">="28"  </span></p><p><span style="color:blue;">     </span><span style="color:red;">FontFamily</span><span style="color:blue;">="Consolas" </span><span style="color:red;">FontSize</span><span style="color:blue;">="20" </span><span style="color:red;">Margin</span><span style="color:blue;">="5,100,0,0"/></p>

Sau đó sẽ là 3 Grid với tên gọi lần lượt là rightGrid1, rightGrid2 và rightGrid3:

<span style="color:blue;"><</span><span style="color:#a31515;">Grid </span><span style="color:red;">Name</span><span style="color:blue;">="rightGrid1" </span><span style="color:red;">Margin</span><span style="color:blue;">="0,10,0,0" </span><span style="color:red;">Width</span><span style="color:blue;">="125" </span><span style="color:red;">Height</span><span style="color:blue;">="125">
    <</span><span style="color:#a31515;">Grid.RowDefinitions</span><span style="color:blue;">>
        <</span><span style="color:#a31515;">RowDefinition</span><span style="color:blue;">></</span><span style="color:#a31515;">RowDefinition</span><span style="color:blue;">>
        <</span><span style="color:#a31515;">RowDefinition</span><span style="color:blue;">></</span><span style="color:#a31515;">RowDefinition</span><span style="color:blue;">>
        <</span><span style="color:#a31515;">RowDefinition</span><span style="color:blue;">></</span><span style="color:#a31515;">RowDefinition</span><span style="color:blue;">>
        <</span><span style="color:#a31515;">RowDefinition</span><span style="color:blue;">></</span><span style="color:#a31515;">RowDefinition</span><span style="color:blue;">>
        <</span><span style="color:#a31515;">RowDefinition</span><span style="color:blue;">></</span><span style="color:#a31515;">RowDefinition</span><span style="color:blue;">>
    </</span><span style="color:#a31515;">Grid.RowDefinitions</span><span style="color:blue;">>
    <</span><span style="color:#a31515;">Grid.ColumnDefinitions</span><span style="color:blue;">>
        <</span><span style="color:#a31515;">ColumnDefinition</span><span style="color:blue;">></</span><span style="color:#a31515;">ColumnDefinition</span><span style="color:blue;">>
        <</span><span style="color:#a31515;">ColumnDefinition</span><span style="color:blue;">></</span><span style="color:#a31515;">ColumnDefinition</span><span style="color:blue;">>
        <</span><span style="color:#a31515;">ColumnDefinition</span><span style="color:blue;">></</span><span style="color:#a31515;">ColumnDefinition</span><span style="color:blue;">>
        <</span><span style="color:#a31515;">ColumnDefinition</span><span style="color:blue;">></</span><span style="color:#a31515;">ColumnDefinition</span><span style="color:blue;">>
        <</span><span style="color:#a31515;">ColumnDefinition</span><span style="color:blue;">></</span><span style="color:#a31515;">ColumnDefinition</span><span style="color:blue;">>
    </</span><span style="color:#a31515;">Grid.ColumnDefinitions</span><span style="color:blue;">>
</</span><span style="color:#a31515;">Grid</span><span style="color:blue;">>

rightGrid2 và rightGrid3 cũng tương tự như rightGrid1. Như vậy chúng ta đã xong phần tạo ra giao diện cho game xếp gạch. Hoàn toàn không dính dáng gì đến code C# đúng không. Đó chính là điểm mạnh của WPF mà tôi đã từng đề cập ở các bài viết trước.

Các bạn có thể download file xaml tại đây!

C#, Learning, WPF

Grid Layout Tetris

This post is licensed under CC BY 4.0 by the author.

Bài 1: Ứng dụng các loại layout container để tạo User Interface

Trending Tags