+ YinYang's Programing Blog

"Education is not a preparation for life; education is life itself"

HOME ABOUT ARCHIVES DISCUSSION GAME DEV WEB DEV

PHOTOS

 WPF – Grid Layout Control

Posted on Là một layout control linh hoạt và hiệu quả nhất, Grid bố trí các
Thứ Ba, Tháng
control bên trong nó theo dạng bảng gồm các dòng và cột. Ngoài ra,
Tám 30, 2011
bạn có thể thay đổi kích thước của dòng và cột trong quá trình thực
Tagged thi với GridSplitter.
Layout

Bình luận Định nghĩa dòng và cột

2 bình luận
Bước đầu tiên khi làm việc với Grid layout control là bạn phải định nghĩa cấu trúc bao gồm
các dòng và cột cũng như kích thước của chúng. Các đối tượng dòng, cột này được lưu
trong hai collection là Grid.RowDefinitions và Grid.ColumnDefinitions.

Kích thước của dòng, cột được xác định bằng ba cách:

– Cố định: sử dụng giá trị số với đơn vị là 1/96 inch.

– Auto: Dòng/cột sẽ có kích thước vừa đủ để chứa các control bên trong.

– Tỷ lệ: Dùng dấu sao (*) để xác định tỉ lệ. Giá trị của * được tính bằng kích thước còn lại
của Grid chia cho tổng số phần được chia.

Ví dụ sau định nghĩa một Grid control với bốn dòng. Dòng đầu có chiều cao tự động (bằng
với chiều cao lớn nhất của các control trong dòng đó). Dòng thứ hai có chiều cao bằng 50.
Chiều cao còn lại của Grid được chia thành 3 phần: 2 phần cho dòng thứ ba và 1 phần cho
dòng cuối.

1 <Grid>
2 <Grid.RowDefinitions>
3 <RowDefinition Height="Auto" />
4 <RowDefinition Height="50" />
5 <RowDefinition Height="*" />
6 <RowDefinition Height="0.5*" />
7 </Grid.RowDefinitions>
8 <Grid.ColumnDefinitions>
9 <ColumnDefinition Width="Auto" />
10 </Grid.ColumnDefinitions>
11 </Grid>

Với cách chia theo tỷ lệ, sẽ rõ ràng hơn nếu bạn sử dụng hoàn toàn số nguyên để xác định.
Chẳng hạn với ví dụ trên, phần định nghĩa dòng có thể được viết lại thành:

1 <Grid.RowDefinitions>
2 <RowDefinition Height="Auto" />
3 <RowDefinition Height="50" />
4 <RowDefinition Height="2*" />
5 <RowDefinition Height="*" />
6 </Grid.RowDefinitions>

Bố trí các control trong Grid

Khi được thêm vào trong Grid, các control có thể sử dụng hai attached property là Grid.Row
và Grid.Column để xác định chỉ số dòng/cột của ô sẽ chứa chúng. Các chỉ số dòng/cột này
được tính từ 0.

1 <Grid ShowGridLines="True">
2 <Grid.RowDefinitions>
3 <RowDefinition Height="Auto" />
4 <RowDefinition Height="*" />
5 <RowDefinition Height="2*" />
6 </Grid.RowDefinitions>
7 <Grid.ColumnDefinitions>
8 <ColumnDefinition Width="Auto" />
9 <ColumnDefinition Width="100" />
10 <ColumnDefinition Width="*" />
11 </Grid.ColumnDefinitions>
12
13 <Button Grid.Row="0" Grid.Column="0">Button 1</Button>
14 <Button Grid.Row="1" Grid.Column="1">Button 2</Button>
15 <Button Grid.Row="2" Grid.Column="2">Button 3</Button>
16 </Grid>

Spanning dòng và cột

Sử dụng hai attached property là Grid.RowSpan và Grid.ColumSpan để xác định số lượng ô
theo dòng/cột mà một control có thể nằm trong đó. Một điểm lưu ý là các ô của Grid không bị
gộp thành một như trong html table, chỉ có control là được mở rộng thêm không gian chứa
nó qua các ô khác. Vì vậy, bạn có thể truy xuất đến các ô theo chỉ số như thứ tự chúng được
định nghĩa.

1 <Grid ShowGridLines="True">
2 <Grid.RowDefinitions>
3 <RowDefinition />
4 <RowDefinition />
5 <RowDefinition />
6 <RowDefinition />
7 </Grid.RowDefinitions>
8 <Grid.ColumnDefinitions>
9 <ColumnDefinition />
10 <ColumnDefinition />
11 <ColumnDefinition />
12 </Grid.ColumnDefinitions>
13
14 <Button Background="Azure" Grid.Row="0" Grid.Column="0" Grid.R
15 <Button Background="LightGreen" Grid.Row="1" Grid.Column="1" G
16 <Button Background="Orange" Grid.Row="2" Grid.Column="2" Grid.
17 </Grid>

Kết quả:

Thay đổi kích thước dòng và cột (lúc runtime)

Bằng cách thêm các control GridSplitter vào Grid, bạn có thể di chuyển các GridSplitter và
điều này làm cho kích thước của các dòng/cột thay đổi theo. Một vài thuộc tính của
GridSplitter mà bạn cần quan tâm:

– ResizeDirection: hướng thay đổi kích thước, gồm ba giá trị: Auto, Column và Row.

– ShowsPreview: giá trị false sẽ cập nhật sự thay đổi kích thước của các dòng/cột khi
bạn di chuyển GridSplitter.

– Height/Width và VerticalAlignment/HorizontalAlignment: sử dụng để xác định kích

thước, canh lề của GridSplitter tùy theo hướng di chuyển.

Ví dụ sau cho thấy việc sử dụng hai GridSplitter. GridSplitter đầu tiên được chèn vào cột thứ
hai và GridSplitter thứ hai chèn vào dòng thứ hai trong Grid. Để ý rằng trong phần định
nghĩa, tôi xác định kích thước của dòng/cột vừa đủ để chứa các GridSplitter.

1 <Grid>
2 <Grid.RowDefinitions>
3 <RowDefinition />
4 <RowDefinition Height="10" />
5 <RowDefinition />
6 </Grid.RowDefinitions>
7 <Grid.ColumnDefinitions>
8 <ColumnDefinition />
9 <ColumnDefinition Width="10" />
10 <ColumnDefinition />
11 </Grid.ColumnDefinitions>
12
13 <Button Grid.Row="0" Grid.Column="0" Grid.RowSpan="3">Left</Butt
14 <Button Grid.Row="0" Grid.Column="2">Right</Button>
15 <Button Grid.Row="2" Grid.Column="2">Right</Button>
16
17 <GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="3"
18 Width="3" HorizontalAlignment="Center"
19 ShowsPreview="False"></GridSplitter>
20
21 <GridSplitter Grid.Row="1" Grid.Column="2" Height="3"
22 VerticalAlignment="Center" HorizontalAlignment="Stretch"
23 ShowsPreview="False" ResizeDirection="Auto"></GridSplitter>
24 </Grid>

Kết quả:

Đồng bộ kích thước các dòng, cột của nhiều Grid

Khi định nghĩa dòng/cột, bạn có thể dùng thuộc tính SharedSizeGroup nhằm xác định một
tên nhóm để các dòng/cột thuộc cùng nhóm luôn có kích thước bằng nhau, mặc dù chúng
nằm trong các Grid control khác nhau.

Khi dùng phương pháp này, bạn hãy nhớ đặt thuộc tính Grid.IsSharedSizeScope thành true
cho control chứa các Grid cần đồng bộ kích thước dòng/cột. Thuộc tính
Grid.IsSharedSizeScope sẽ xác định rằng các control con của nó thuộc phạm vi chia sẻ kích
thước với nhau.

Ví dụ sau cho thấy cách để hai cột đầu tiên của hai Grid control luôn có chiều rộng bằng
nhau:

1 <StackPanel Grid.IsSharedSizeScope="True">
2
3 <Label>Grid 1:</Label>
4 <Grid Background="LightYellow" ShowGridLines="True">
5
6 <Grid.ColumnDefinitions>
7 <ColumnDefinition SharedSizeGroup="ColGroup" />
8 <ColumnDefinition Width="Auto" />
9 <ColumnDefinition Width="Auto" />
10 </Grid.ColumnDefinitions>
11
12 <Button Width="100" Height="50">Width=100</Button>
13 <Button Width="100" Height="50" Margin="5,0,5,0" Grid.
14 </Grid>
15
16 <Label>Grid 2:</Label>
17 <Grid Background="LightYellow" ShowGridLines="True">
18
19 <Grid.ColumnDefinitions>
20 <ColumnDefinition SharedSizeGroup="ColGroup" />
21 <ColumnDefinition Width="Auto" />
22 <ColumnDefinition Width="Auto" />
23 </Grid.ColumnDefinitions>
24
25 <Button Width="200" Height="50" Margin="5,0,5,0">Width
26 <Button Width="200" Height="50" Margin="5,0,5,0" Grid.
27 </Grid>
28 </StackPanel>

Kết quả:

https://yinyangit.wordpress.com

Related articles

WPF – Cơ bản về XAML trong WPF 4 – Part 2 of 2

WPF – Cơ bản về Layout

Đánh giá: Rate This

Chia sẻ:

! In " Email # Twitter $ Facebook

Đăng lại Thích Hãy là người đầu tiên thích bài này.

Có liên quan

WPF – Cơ bản về Layout Gridpak = Grid System + CSS – Tìm hiểu về Grid
Chủ Nhật, Tháng Tám 28, 2011 Responsive Design System
Trong "WPF" Thứ Tư, Tháng Bảy 25, 2012 Thứ Năm, Tháng Bảy 19, 2012
Trong "HTML / CSS / XML" Trong "HTML / CSS / XML"

Bài này đã được đăng trong WPF và được gắn thẻ Layout. Đánh dấu đường dẫn tĩnh.

 2 bình luận về “WPF – Grid Layout Control”

Tuan Anh Chủ Nhật, Tháng Sáu 10, 2012 lúc 11:33 chiều

0 0 Rate This
Anh có thể nói thêm về * trong Grid Layout không? Thực sự em chưa hiểu
lắm

Yin Yang Thứ Hai, Tháng Sáu 11, 2012 lúc 12:13 chiều

0 0 Rate This
Ví dụ bạn chia grid thành 3 dòng với chiều cao lần lượt là 2*, *, 3*. Vậy
chiều cao của grid sẽ được chia thành 2+1+3 =6 phần. Và * tương ứng với
1/6 chiều cao của grid.

Đã đóng bình luận.

← WPF – Cơ bản về Layout WPF – Tìm hiểu về Dependency Property →

Search …

I’m Programmer

Follow Blog via Email

Enter your email address to follow this blog and receive notifications of new posts by email.

Địa chỉ thư điện tử (email)

Follow

Join 2 864 other subscribers

Click for Random Post

Chuyên mục

Chọn chuyên mục

Thư viện

Thời gian

Bài & Trang được đáng chú ý

 C# – Lập trình Socket giao tiếp TCP client/server

 Algorithm - Chuyển biểu thức trung tố sang tiền tố và hậu tố bằng Stack

 Algorithm - Tạo và sử dụng cây biểu thức (expression tree)

 Algorithm - Tính giá trị của biểu thức tiền tố và hậu tố

 WPF – Cơ bản về Layout

 C# - Simple Multi-threaded/Multi-connection TCP Server

 C# - Thread Signaling: Auto và Manual Reset Event

 C# - Hướng dẫn viết game Dò mìn (Minesweeper)

 GDI+: Các khái niệm Font Family, Typeface, Font, Style và Graphics Unit

 C# - Cơ bản về Thread

Thẻ

.Net4 AI Ajax animation Anonymous ASP.NET / MVC Assembly Binary Tree Binding
(WPF) C#3 C#4
Captcha Client Collision Compiler CSS3 DataContext DataSet Delegate Ebook Editor Emit Entity
Framework Event Expression Expression Tree Extension GDI+ Graph HelloWorld Hooking HTML5
Interpreter Java Javascript jQuery Plugin Keyboard Lambda Languages LINQ Mario MCI MFC MonoDevelop

MVC MVVM N-puzzle Optimization ORM postfix prefix Razor Reflection Reflector RegularExpression RPN

Serialization Server Snake Soap Socket string Strongly typed Style TCP Template Thread TowerDefense

Vector VisualStudio WinForms XAML XMLHttpRequest XML Schema ZendFramework2

Bình luận mới nhất

Sơn Nguyễn trong C# – Tìm hiểu về Closure

Instant AJAX Search… trong Javascript – Giới thiệu…

diep123 diep123 trong Javascript –Phương thức exeCom…

long trong Algorithm – Kiểm tra một…

Note lại – tem… trong Javascript Hoisting là gì?

Hoaavoibhub trong C# – Cơ bản về Thread

Thanh Hoài trong WPF – Giới thiệu về Anim…

Blogroll

 Blog Nguyễn Minh Hải

 Buu Nguyen's Blog

 Do Jou Lập trình

 Hoangtx 's Blog

 MicrosoftTech.Net

 Nhật ký học tập

 Tam Quang Blog

 Thư viện Sách điện tử Việt Nam

 Tumivn

 Yên Thư Thôn – IT

 Zstar's Blog