Phục hồi và bền hóa động cơ không tháo rã : Công Nghệ Gốm Kim Loại XADO - Metal-Ceramic Xado

THIÊN AN Technology Thiết kế website Chuyên Nghiệp ! | Domain Hosting Chất lượng Cao!

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

VB , C++ , JAVA , .... ,
Thuật toán ....

Điều hành viên: Luu Thanh Nghi, Nửa bốn mùa, Giọt nước

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

Gửi bàigửi bởi haytomo » 21 Tháng 8 2009, 10:39

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:

<o:p></o:p>

<o:p> </o:p>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>

<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:<o:p></o:p>

Để 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…<o:p></o:p>

Trong ứng dụng của chúng ta sử dụng 2 PageFunction. <o:p></o:p>

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>

<o:p> </o:p>

XAML thiết kế giao diện<o:p></o:p>

<PageFunction<o:p></o:p>

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/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><o:p></o:p>


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();

}<o:p></o:p>


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\

}<o:p></o:p>


Ngoài ra ở tại đây chúng ta có thể đăng ký một số sự kiện của PageFunction đang chuẩn nạp sẽ được sử xử lý ở đây như trong đoạn mã trên ta thêm câu lệnh sau để đăng ký khi gọi OnReturn từ PageFunction2 sẽ gọi phương thức PageFunction2_Return mà ta sẽ triển khai trong File PageFunction2.xaml.cs.

page2.Return += new ReturnEventHandler<string>(PageFunction2_Return);<o:p></o:p>


PageFunction2_Return là tên của phương thức đã được khai báo với danh sách tham số đúng như tham số quy định của sự kiện, phương thức được xử lý. Trong trường cũng chỉ đơn giản xuất ra MessangeBox như sau:<o:p></o:p>

private void PageFunction2_Return(object sender, ReturnEventArgs<string> e) {

MessageBox.Show("OnReturn: \n" + txtHoTen.Text + "\n" + txtDienThoai.Text + "\n" + txtEmail.Text + "\n" + e.Result);

}<o:p></o:p>


<o:p> </o:p>PageFunction2 cũng chứa các TextBlock, TextBox và một vài nút lệnh như hình dưới đây :



XAML thiết kế giao diện<o:p></o:p>

<PageFunction

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:sys="clr-namespace:System;assembly=mscorlib"

x:Class="Tim_hieu_WPF.PageFunction2"

x:TypeArguments="sys:String"

Title="Giới thiệu" ShowsNavigationUI="True" ClipToBounds="False">

<Grid HorizontalAlignment="Center" VerticalAlignment="Center">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="100"/>

<ColumnDefinition Width="400"/>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="30"/>

<RowDefinition Height="100"/>

<RowDefinition Height="100"/>

<RowDefinition Height="60"/>

</Grid.RowDefinitions>

<TextBlock Grid.Column="0" Grid.Row="1" Width="100" Height="30" Text="Bản thân"/>

<TextBox Name="txtGioiThieuBanThan" Height="60" Grid.Column="1" Grid.Row="1"/>

<TextBlock Grid.Column="0" Grid.Row="2" Width="100" Height="30" Text="Gia đình"/>

<TextBox Name="txtGioiThieuGiaDinh" Height="80" Grid.Column="1" Grid.Row="2"/>

<DockPanel Grid.Column="1" Grid.Row="3">

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="30"/>

<ColumnDefinition Width="110"/>

<ColumnDefinition Width="100"/>

<ColumnDefinition Width="*"/>

</Grid.ColumnDefinitions>

<Button Name="butBack" Grid.Column="1" Width="110" Height="30" Click="butBack_Click">Lùi</Button>

<Button Name="butCanCel" Grid.Column="2" Width="100" Height="30" Click="butCanCel_Click">Hủy</Button>

<Button Name="butFinish" Grid.Column="3" Width="130" Height="30" Click="butFinish_Click">Kết thúc</Button>

</Grid>

</DockPanel><o:p></o:p>

</Grid><o:p></o:p>

</PageFunction><o:p></o:p>

<o:p> </o:p>


<o:p> </o:p>

Trong PageFunction2 này chúng ta có 3 nút lệnh Lùi (butBack), Hủy (butCancel) và nút Kết thúc (butFinish). Với nút lệnh Hủy tương tự như với PageFunction1. Với nút lệnh Lùi quá trình thực hiện gần giống với nút tiếp trong PageFunction1 nhưng chỉ khác một điểm đó là khi lấy được tham chiếu đến NavigationService tương ứng chúng ta gọi đến phương thức .GoBack() để lùi về PageFunction trước:<o:p></o:p>

private void butBack_Click(object sender, RoutedEventArgs e) {<o:p></o:p>

NavigationService ns = NavigationService.GetNavigationService(this);<o:p></o:p>

ns.GoBack();<o:p></o:p>

}<o:p></o:p>


<o:p> </o:p>

Với nút lệnh Kết thúc chúng ta cần tổng hợp các thông tin và xử lý. Ở ví dụ này để đơn giản mình chỉ xuất các thống tin đó ra MessageBox và sử dụng OnReturn mà mình đã đăng ký ở trên (Nút lệnh Tiếp của PageFunction1). Nút Kết thúc sẽ được triển khai như sau:<o:p></o:p>

private void butFinish_Click(object sender, RoutedEventArgs e) {<o:p></o:p>

App.thongtin += "\nBản thân: " + txtGioiThieuBanThan.Text + "\nGia đình: " + txtGioiThieuGiaDinh.Text;<o:p></o:p>

MessageBox.Show(App.thongtin,"Sử dụng winzaid",MessageBoxButton.OK,MessageBoxImage.Information);<o:p></o:p>

OnReturn(new ReturnEventArgs<string>(txtGioiThieuBanThan.Text + "\n" + txtGioiThieuGiaDinh.Text));<o:p></o:p>

}<o:p></o:p>


<o:p> </o:p>

Ở đây câu lệnh:<o:p></o:p>

OnReturn(new ReturnEventArgs<string>(txtGioiThieuBanThan.Text + "\n" + txtGioiThieuGiaDinh.Text));<o:p></o:p>


Sẻ gọi về phương thức PageFunction2_Return() được khai báo trong file Code-Behind của PageFunction1.xaml. Như vậy sẽ xuất hiện 2 lần MessageBox thông báo về những thông tin đã nhập.<o:p></o:p>

Vậy là chúng ta đã tạo song 2 PageFunction và quá trình xử lý tổng hợp thông tin. Chúng ta chuyển sang bước 2 tạo NavigationWindow để nạp và điều hướng các trang.<o:p></o:p>

Bước 2: Tạo các NavigationWindow:<o:p></o:p>

Để đơn giản trong ví dụ này chúng ta viết một phương thức khai báo, tạo một NavigationWindow nạp PageFunctio1 và cũng là bắt đầu chạy của ứng dụng nên chúng ta sẽ chiển khai phương thức này trong App.xaml.cs:<o:p></o:p>

private void AppStartUp(object sender, StartupEventArgs e) {<o:p></o:p>

NavigationWindow nav = new NavigationWindow();<o:p></o:p>

nav.Title = "Sử dụng Winzard";<o:p></o:p>

nav.Source = new Uri("PageFunction1.xaml", UriKind.Relative);<o:p></o:p>

nav.Show();<o:p></o:p>

}<o:p></o:p>


<o:p> </o:p>

Và để phương thức này là phương thức bắt đầu chạy của ứng dụng chúng ta sửa trong file App.xaml như sau:<o:p></o:p>

<s><o:p> </o:p></s>

<Application x:Class="Tim_hieu_WPF.App"<o:p></o:p>

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"<o:p></o:p>

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"<o:p></o:p>

<s>StartupUri</s><s>="Window1.xaml"</s><s><o:p></o:p></s>

Startup="AppStartUp"><o:p></o:p>

<Application.Resources><o:p></o:p>

<o:p></o:p>

</Application.Resources><o:p></o:p>

</Application><o:p></o:p>


(từ StartupUri="Window1.xaml" thành Startup="AppStartUp")<o:p></o:p>

Vậy là chúng ta đã hoàn thành một Winzard khá đơn giản. Đầy là kết quả của bạn:<o:p></o:p>

<o:p></o:p>






Bạn có thể tải source code tại đây



Để NavigationWindow tự động co dãn theo kích cỡ của các PageFunction khi nạp chúng ta chỉ cần thêm một dòng lệnh khi tao NavigationWindow vậy phương thức AppStartUp se thay đôi như sau:<o:p></o:p>

private void AppStartUp(object sender, StartupEventArgs e) {<o:p></o:p>

NavigationWindow nav = new NavigationWindow();<o:p></o:p>

nav.Title = "Sử dụng Winzard";<o:p></o:p>

nav.SizeToContent = SizeToContent.WidthAndHeight;<o:p></o:p>

nav.Source = new Uri("PageFunction1.xaml", UriKind.Relative);<o:p></o:p>

nav.Show();<o:p></o:p>

}<o:p></o:p>


<o:p> </o:p>

Hay để PageFunction không phải là trả về một string khi gọi phương thức OnReturn mà là một đối tượng chúng ta có thể thay đổi trong thẻ khai báo PageFunction và trong khia báo kế thừa trong Class Code-behind tương ứng.<o:p></o:p>

<PageFunction<o:p></o:p>

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"<o:p></o:p>

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"<o:p></o:p>

xmlns:sys="clr-namespace:System;assembly=mscorlib" <o:p></o:p>

x:Class="AddressBook.ContactDetailPage1"<o:p></o:p>

x:TypeArguments="sys:Object"<o:p></o:p>

Title="PageFunction2" ShowsNavigationUI="True"><o:p></o:p>

……<o:p></o:p>

</PageFunction><o:p></o:p>


<o:p> </o:p>

public partial class PageFunction2 : PageFunction<Object>{<o:p></o:p>

………<o:p></o:p>

}<o:p></o:p>


<o:p> </o:p>

Hay để điều chỉnh sử xuất hiện của thanh NavigationUI phía trên mỗi PageFunction chúng ta có thể thay đổi thuộc tính ShowsNavigationUI thành True hoặc False trong thẻ khai báo PageFunction.<o:p></o:p>

Còn rất nhiều điều đợi chờ chúng ta khám phá và chia sẻ!<o:p></o:p>















Các đối tượng sử dụng trong bài còn có rất nhiều các thuộc tính, các phương thức, sự kiên mà trong bài chưa giới thiệu như:<o:p></o:p>
haytomo
 
Bài viết: 4
Ngày tham gia: 21 Tháng 8 2009, 10:33

Quay về LẬP TRÌNH Ứng Dụng

Đang trực tuyến

Đang xem chuyên mục này: Không có thành viên nào trực tuyến.2 khách.