Một ứng dụng window hẳn khó có thể thiếu được phần giao diện. Giao diện của một ứng dụng không phải chỉ để sử dụng thông thường mà còn đòi hỏi sự trực quan và hợp lý.
Khác Windows Form các điều khiển được căn chỉnh vị trí theo tọa độ, trong WPF ngoài hỗ trợ với kiểu thiết kế theo tọa độ WPF còn cho phép người thiết kế chia một cửa sổ thành những vùng khác nhau giống như thiết kế Web và đặt các control vào đó, giúp giảm đi những đoạn code để thay đổi kích thước điều khiển khi form thay đổi…
Trong bài này chúng ta sẽ khám phá một số Layout, Panel giúp cho việc thiết kế giao diện một cách dễ dàng, đẹp mắt và thuận tiện hơn, nó cùng là nền tảng giúp chúng ta tuy biến giao diện các điều khiển về sau và còn nhiều vấn đế liên quan khác.
Ngoài ra xây dựng giao diện cũng là điểm thực sự để bắt đầu để tìm hiểu WPF.
Như chúng ta đã xác định thiết kế giao diện bằng XAML. Nếu bạn cần những kiến thức cơ bản về XAML bạn có thể đọc tại đây.
Thiết đặt điều khiển bằng cách xác định tọa độ
Để thiết đặt vị trí của điều khiển theo tọa độ ta thiệt đặt tọa độ của điều khiển cho thuộc tính Margin với bốn tham số: Margin="Left,Top,Right,Bottom" và chúng ta xác định cách theo chiều dọc thì lấy khoảng cách vơi Top hay Bottom trong thuộc tính VerticalAlignment="Top". Tương tự với chiều ngang trong thuộc tính HorizontalAlignment là Left, Right. Như trong đoạn mạ dưới đây tạo một Button cách trái 10, cách trên 50 và có nhãn MyBotton.
|
<Button Margin="10,50,0,0"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Content="MyButton"/>
|
Cách này ít được mọi người sử dụng để thiết kế trong WPF vì nó không có khả năng tự co dãn khi kích cỡ của form.
Sử dụng các Panel để thiết kế giao diện, thiết đặt vị trí các điều khiển
StackPanel
StackPanel giúp sắp xếp các điều khiển bên trong nó nối tiếp nhau. Ví dụ đoạn code sau giúp tao 3 nút bấm xắp xếp theo chiều dọc.
|
<StackPanel>
<Button>Button 1</Button>
<Button>Button 2</Button>
<Button>Button 3</Button>
</StackPanel>
|
Để StackPanel sắp xếp các điều khiển trong StackPanel theo chiều ngang cần gán thuộc tính Orientation="Horizontal". Giá trị mặc định của thuộc tính này là Vertical. Đoạn code trên sẽ thay đổi là:
|
<StackPanel Orientation="Horizontal">
<Button>Button 1</Button>
<Button>Button 2</Button>
<Button>Button 3</Button>
</StackPanel>
|
Và kết quả là:
WrapPanel
WrapPanel sắp xếp các phần tử từ trái sang nếu hết form thì sẽ xuống dòng. Nếu form bị thay đổi kích thước nó sẽ tự căn chỉnh lại theo đúng cách sắp xếp trên:
WrapPanel cũng cho phép săp xếp theo chiều từ trên xuống dưới, hết form thì nhảy sang cột tiếp theo. Để làm được điều này chúng ta gán cho thuộc tính Orientation="Vertical".
DockPanel
DockPanel cho phép các điều khiển bám lên cách cạnh của vùng DockPanel. Để chỉ định một điều khiển bám trên cạnh nào chung ta chỉ định cho thuộc tính DockPanel.Dock là Top, Bottom, Left, Right. Nếu 2 điều khiển đều được đặt DockPanel.Dock="Left" các điều khiễn sẽ lần lượt được gắn vào bên trái. Điều khiển được khai báo cuối cùng sẽ được chiếm hết diện tích còn lại của DockPanel nếu như nó không được xác định độ rộng, độ cao. Ví dụ như:
|
<DockPanel>
<Button DockPanel.Dock="Top">Button 1</Button>
<Button DockPanel.Dock="Left">Button 2</Button>
<Button DockPanel.Dock="Left">Button 3</Button>
<Button Background="BlueViolet">Button 4</Button>
</DockPanel>
|
Canvas
Canvas cho phép các điều khiển sắp xếp trong nó bằng cách khoảng cách với Top, Bottom, Left, Right Thông qua thuộc tính Canvas.Top,Canvas.Bottom, Canvas.Left, Canvas.Right tương ứng trong các điều khiển. Điều khiển khai bao trước có thể bị điều khiên khai báo sau đè lên. Tron Canvas có sự ưu tiên theo hướng trên và trái. Nếu cùng xác định cả khoảng cách trái và phải thì chỉ khoảng cách trái được áp dụng. Ví dụ:
|
<Canvas>
<Button Width="100" Height="150">Button 1</Button>
<Button Canvas.Right="40" Canvas.Top="40">Button 2</Button>
<Button Canvas.Left="100" Canvas.Right="99999">Button 3</Button>
<Button Canvas.Bottom="50" Background="Blue">Button 4</Button>
</Canvas><o:p></o:p>
|
Grid
Grid là một Panel cho phép chúng ta chia ra thành lưới gồm các ô nhờ vào việc định nghĩa các dòng, các cột và chúng ta có thể đặt các điều khiển vào một ô cụ thể.
Chúng ta cần định nghĩa có bao nhiêu cột, độ rộng của cột và bao nhiêu dòng và độ là bao nhiêu như sau:
|
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<!--Co do rong tu dong bang dieu khien-->
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="*"/>
<!--Co do rong bang phan thua con lai-->
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<!--Dong 0 co do cao tu dong theo do cao cua dieu khien-->
<RowDefinition Height="*"/>
<RowDefinition Height="2*"/>
<!--Dong 2 co do rong gap 2 dong mang gia tri Height=*-->
</Grid.RowDefinitions>
</Grid><o:p></o:p>
|
Sau đó khi thêm một điêu khiển muốn đặt vào ô nào ta chỉ xác định thuộc tính Grid.Column="Cột muốn đặt" và thuộc tính Grid.Row="Dòng muốn đặt".
Một thuộc tính khá hay cho phép điều khiển của chúng ta đặt trong một ô nhưng diện tích điều khiển có thể kéo dài (Chiếm) sang những ô tiếp theo bằng thuộc tính Grid.ColumnSpan="sô cột chiếm". Sau đây là ví dụ cụ thể:
|
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<!--Co do rong tu dong bang dieu khien-->
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="*"/>
<!--Co do rong bang phan thua con lai-->
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<!--Do cao tu dong theo do cao cua dieu khien-->
<RowDefinition Height="*"/>
<RowDefinition Height="2*"/>
<!--Dong 2 co do rong gap 2 dong 1-->
</Grid.RowDefinitions>
<Button Width="100" Height="50" Grid.Column="0" Grid.Row="0">Button 1</Button>
<Button Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2">Button 2</Button><!--O cot 0 dong 1 va chiem dien tich 2 cot-->
<Button Grid.Column="1" Grid.Row="2">Button 3</Button>
<Button Grid.Column="2" Grid.Row="2">Button 4</Button>
</Grid>
|
Ngoài ra trong Panel như một ô của Grid chúng ta lại có thể chèn vào đó là một StackPanel hay DockPanel… Thiết kế giao diện trong WPF cực kỳ mềm dẻo, giúp chúng ta thỏa sức sáng tạo.
Hy vọng qua bài viết này sẽ giúp các bạn không còn lo, ngại và bỡ ngỡ khi thiết kế giao diện trong WPF và các môi trường khác có sử dụng XAML.
____________________________________________________________
Lê Công Thành
Khoa Công nghệ thông tin – Đại học sư phạm kỹ thuật Hưng Yên
Mobile : 0904464538
Email : thanhlct@gmail.com
