Professional Documents
Culture Documents
Lab 07. Điều hướng và truyền tham số
Lab 07. Điều hướng và truyền tham số
Lab 07. Điều hướng và truyền tham số
Mục tiêu
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
1
Giải thích
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.
Bài 2
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
}
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ố
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