WPF - Sử dụng NavigationWindow và PageFunction để tạo một Winzard

Trong một số ứng dụng chúng ta thường thấy quá trình thu thập thông tin qua từng bước như lấy thông tin của một nhân viên: bước 1 là lấy tên, ngày tháng năm sinh, quê quan quán. Bước 2 là giới thiệu về bản thân, gia đình... Hay trong việc điền thông tin để Active một phần mềm, cấu hình để cài đặt, cấu hình các thông số cho một phần mềm đó chính là Winzard. Vậy Winzard là một quá trình thu thập thông tin theo từng bước và có thể lựa chọn của bước trước sẽ quyết định những lựa chọn của bước sau.
Trong WPF để triển khai Winzard khá dễ dàng. Trong bài này chúng ta sẽ cùng nhau làm một Winzard thu thập thông tin cá nhân được mô tả trong hình dưới đây:


Sau khi Click vào nút tiếp ngay tại trên cửa sổ hiện tại sẽ hiện thị cho phép người dùng điền tiếp các thông tin giới thiệu về bản thân và gia đình của mình:
<o:p></o:p>
Trong quá trình điền thông tin chúng ta hoàn toán có thể thể quay trở lại bước trước nhờ thành toolbar bên trên hoặc sử dụng các phương thức.
Quá trình chiển khai một Winzard có thể qua các bước như:
1. Tạo các trang PageFunction. Mỗi trang tương ứng với một bước của Winzard. Tổng hợp và xử lý thông tin.
2. Tạo đối tượng NavigationWindow cho phép hiện thị nạp và chuyển đổi giữa các bước trong Winzard hay chính là chuyển đổi PageFunction.

Bước 1: Tạo các trang PageFunction:
Để thêm một PageFunction vào ứng dụng, như bình thường chúng ta vào Project>>Add New Item... Rồi đặt tên…
Trong ứng dụng của chúng ta sử dụng 2 PageFunction.
PageFunction1 chứa các TextBlock, TextBox và một vài nút lệnh như hình dưới đây :

<o:p></o:p>

<o:p> </o:p>

XAML thiết kế giao diện

<PageFunction
xmlns="http://schemas.microsoft.com/winfx/2...l/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
x:Class="Tim_hieu_WPF.PageFunction1"
x:TypeArguments="sys:String"
Title="Thông tin cá nhân" ShowsNavigationUI="True" ClipToBounds="True">
<Grid VerticalAlignment="Center" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="300"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<!--Khoang cach dau-->
<RowDefinition Height="60"/>
<!--Ho ten-->
<RowDefinition Height="60"/>
<!--Dia chi nha rieng-->
<RowDefinition Height="60"/>
<!--Dia Chi co quan-->
<RowDefinition Height="60"/>
<!--Cach duoi, nut-->
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="1" Width="100" Height="30" Text="Họ tên"/>
<TextBox Name="txtHoTen" Grid.Column="1" Grid.Row="1" Width="200" Height="30"/>
<TextBlock Grid.Column="0" Grid.Row="2" Width="100" Height="30" Text="Email"/>
<TextBox Name="txtEmail" Grid.Column="1" Grid.Row="2" Width="200" Height="30"/>
<TextBlock Grid.Column="0" Grid.Row="3" Width="100" Height="30" Text="Điện thoại"/>
<TextBox Name="txtDienThoai" Grid.Column="1" Grid.Row="3" Width="200" Height="30"/>
<DockPanel Grid.Column="1" Grid.Row="4">
<Button Name="butCanCel" Width="140" Height="30" Click="butCanCel_Click">Hủy</Button>
<Button Name="butNext" Width="160" Height="30" Click="butNext_Click">Tiếp</Button>
</DockPanel>
</Grid>
</PageFunction>
Trong PageFunction này chúng ta ta có hai nút lệnh là Hủy (butCanCel) và Tiếp (butNext). Với nút lệnh Hủy thì công việc hết sức đơn gian đó là truy xuất đến đối tượng NavigationWindow chưa PageFunction đó và gọi phương thức Close().
private void butCanCel_Click(object sender, RoutedEventArgs e) {
((NavigationWindow) this.Parent).Close();
}
Với nút lệnh Tiếp (butNext) chúng ta mốn chuyển đến PageFunction2. Chúng ta cần truy xuất đến NavigationService để có thể thám chiếu đến đối tượng NavigationService chứa quá chình chuyển hướng tới trang hiện hành và chuyển hướng tiếp sang một PageFuntion khác. Cũng giúp NavigationService lưu lai được quá trình chuyển hướng trong BackStack. Ngoài ra chúng ta cũng cần lưu lại những thông tin mà người dùng đã nhập giúp xử lý lựa chọn ở bước tiếp theo hoặc tổng hợp xử lý kết quả cuối cùng. Ở đây để đơn giản mình lưu vào một biết tên thongTin tại lớp App.
private void butNext_Click(object sender, RoutedEventArgs e) {
App.thongTin = "Họ tên: " + txtHoTen.Text + "\n" + "Email: " + txtEmail.Text + "\n" + "Điện thoại: " + txtDienThoai.Text;
NavigationService ns = NavigationService.GetNavigationService(this);//Lay ve NavigateService
PageFunction2 page2 = new PageFunction2();
ns.Navigate(page2); //Chuyen huong den page2\
}