LAB 7.

ĐIỀU HƯỚNG VÀ TRUYỀN THAM SỐ QUA CÁC

TRANG

Mục tiêu

- Sử dụng được NavigationView để điều hướng qua lại các trang

- Truyền được tham số giữa các trang

Bài 1

Tạo các giao diện thanh điều hướng sử dụng NavigationView như hình vẽ dưới
đây.

Hướng dẫn

Tạo dự án UWP đặt tên là Navigation View

Mở file MainPage.xaml và copy đoạn XAML vào trong thẻ <Grid>

<NavigationView x:Name="MyNavigationView" ItemInvoked="MyNavigationView_ItemInvoked">
<NavigationView.MenuItems>
<NavigationViewItem Icon="Home" Content="Home" x:Name="HomeItem"/>
<NavigationViewItem Icon="AddFriend" Content="Add Friend"
x:Name="AddFriendItem"/>
<NavigationViewItem Icon="ContactInfo" Content="Contact Information"
x:Name="ContactInfoItem"/>
</NavigationView.MenuItems>
<NavigationView.Content>
<Frame x:Name="ContentFrame"/>
</NavigationView.Content>
</NavigationView>

1
 Giải thích

Tạo đối tượng NavigationView với tên là MyNavigationView và khai báo

sự kiện gọi đến đối tượng được chọn (ItemInvoked) là
MyNavigationView_ItemInvoked.

Để tạo phương thức MyNavigationView_ItemInvoked, trong XAML để con

trỏ chuột vào tên phương thức và nhấn F12. Chương trình sẽ tự tạo 1 phương thức trong
file code.

Khai báo các mục để điều hướng trong thuộc tính MenuItems của
NavigationView. Mỗi MenuItems hiện tại gồm có các thuộc tính Icon, Content và
Name. Có thể tham khảo thêm Enum các Icon khác tại đây.

Phần nội dung của NavigationView được khai báo là 1 Frame có tên là
ContentFrame.

Chạy thử chương trình và xem kết quả

Bài 2

Thêm 3 trang lần lượt là HomePage.xaml, AddFriendPage.xaml và

ContactInfoPage.xaml với giao diện như sau

HomePage: chứa 1 hình ảnh

AddFriendPage: gồm các TextBox và Button dùng để nhập thông tin

2
 ContactInfoPage: Gồm các TextBlock dùng để hiển thị thông tin của trang
AddFriend.

Thực hiện điều hướng qua lại giữa các trang khi nhấn vào thanh điều hướng. Cài
đặt HomePage là trang mặc định của Frame.

Hướng dẫn

HomePage
<Grid>
<Image Source="/Assets/FetelHCMUS.png" />
</Grid>
Lưu ý: Ta add thêm 1 hình ảnh có tên là FetalHCMUS.png vào thư mục Assets của
dự án

AddFriendPage
<Grid>
<StackPanel Orientation="Vertical" HorizontalAlignment="Center"
VerticalAlignment="Center">
<TextBox x:Name="NameTextBox" PlaceholderText="Nhập tên" Width="200"
Margin="5"/>
<TextBox x:Name="EmailTextBox" PlaceholderText="Nhập Email" Width="200"
Margin="5"/>
<TextBox x:Name="PhoneNumberTextBox" PlaceholderText="Nhập số điện thoại"
Width="200" Margin="5"/>
<Button x:Name="AddButton" Content="Add" Width="200" Margin="5"
Click="AddButton_Click"/>
</StackPanel>
</Grid>

ContactInfoPage
<Grid>
<StackPanel Orientation="Vertical" HorizontalAlignment="Center"
VerticalAlignment="Center">
<TextBlock Text="Contact Information"/>
<TextBlock x:Name="InforTextBlock" Text="Nơi hiển thị thông tin"/>
</StackPanel>
</Grid>

3
 Thay đổi hàm dựng MainPage trong MainPage.xaml.cs để điều hướng đến
page mặc định cho ContentFrame.
public MainPage()
{
this.InitializeComponent();
ContentFrame.Navigate(typeof(HomePage)); //Điều hướng đên Page mặc định
của Frame
}

Viết logic cho sự kiện MyNavigationView_ItemInvoked

private void MyNavigationView_ItemInvoked(Windows.UI.Xaml.Controls.NavigationView

sender, NavigationViewItemInvokedEventArgs args)
{

FrameNavigationOptions navigationOptions = new FrameNavigationOptions();

//Tạo đối tượng Frame để chuyển hướng
navigationOptions.TransitionInfoOverride =
args.RecommendedNavigationTransitionInfo; //Chọn hiệu ứng chuyển trang thích hợp

var selectedItem = MyNavigationView.SelectedItem; //Kiểm tra Item được

chọn
if (selectedItem == HomeItem)
{
ContentFrame.Navigate(typeof(HomePage)); //Chuyển hướng sang HomePage
}
else if(selectedItem == AddFriendItem)
{
ContentFrame.Navigate(typeof(AddFriendPage));
}
else if (selectedItem == ContactInfoItem)
{
ContentFrame.Navigate(typeof(ContactInfoPage));
}
}

Sự kiện MyNavigationView_ItemInvoked xảy ra khi người dùng nhấn

vào các Menu Item cho dù item đó hiện tại có được chọn hay không.

Bài 3

Thực hiện truyền thông tin được người dùng nhập từ AddFriendPage sang và
hiển thị lên ContactInfoPage sử dụng kỹ thuật truyền tham số khi điều hướng. Khi
nhấn nút nhấn Add ở AddFriendPage sẽ điều hướng sang ContactInfoPage đồng
thời hiển thị thông tin vừa nhập lên TextBlock của ContactInfoPage.

Hướng dẫn

Trong AddFriendPage.xaml.cs ta tạo 1 cấu trúc hoặc 1 lớp để chứa các cần truyền
public class Information //Tạo 1 cấu trúc để lưu các thông tin
{
public string Name { get; set; } = "ABC"; //Property với tham số mặc định
public string Email { get; set; } = "abc@fetel.hcmus.edu.vn";

4
 public string PhoneNumber { get; set; } = "0123456789";
}

Trong class AddFriendPage viết chương trình cho sự kiện nút nhấn Add như sau
private void AddButton_Click(object sender, RoutedEventArgs e)
{
Information infoParameter = new Information();
infoParameter.Name = NameTextBox.Text;
infoParameter.Email = EmailTextBox.Text;
infoParameter.PhoneNumber = PhoneNumberTextBox.Text;
Frame.Navigate(typeof(ContactInfoPage), infoParameter); //Điều hướng sang
ContactInfoPage với tham số

Trong class ContactInfoPage ta ghi đè phương thức OnNavigatedTo

với đoạn chương trình sau:
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
var infoParameter = (Information) e.Parameter;
if (infoParameter != null)
{
InforTextBlock.Text = $"Name: {infoParameter.Name}; Email:
{infoParameter.Email}; Phone Number: {infoParameter.PhoneNumber}";
}
else
{
InforTextBlock.Text = "Dữ liệu bị trống, hãy nhập dữ liệu";
}

Bài 4

Thêm tính năng cho nút nhấn trở về trong khi điều hướng.

Hướng dẫn

Sử dụng thuộc tính IsBackEnabled và sự kiện BackRequested

private void MyNavigationView_BackRequested(Windows.UI.Xaml.Controls.NavigationView
sender, NavigationViewBackRequestedEventArgs args)
{
if(ContentFrame.CanGoBack)
{
ContentFrame.GoBack();
}
}