Bài giảng Lập trình cho thiết bị di động Windows Phone - Trần Duy Thanh - XAML Phone Controls and Navigation

lapping photographs form a wide banner. Collections of images, such as photo albums or large sets of tiles that represent business entities. The MultiScaleImage control allows the user to zoom in on a particular part of the image while maintaining sharp clarity. 105 1.7 Media Controls MultiScaleImage Deep Zoom "Pyramid"   106 1.7 Media Controls MultiScaleImage The steps to creating a Deep Zoom application are: 1. Create a Deep Zoom XML file and associated folders and images. We will discuss utilities that automate this step. 2. Deploy the Deep Zoom format files and folders to a web site. You will need to provide a host site that can be accessed through HTTP. 3. Assign the XML file to the MultiScaleImage Source property. You should be able to see the image in the Visual Studio design view if the path to the Source is valid. 4. Add behaviors through code or XAML for zooming and panning. 107 1.8 Popups, MessageBox Popup is an element that contains content in a Child property and has an IsOpen property that toggles the popup visibility. Popups private void Button_Click(object sender, RoutedEventArgs e) { MyPopup.IsOpen = true; } private void MyPopup_Tap(object sender, System.Windows.Input.GestureEventArgs e) { MyPopup.IsOpen = false; } 108 1.8 Popups, MessageBox Popups 109 1.8 Popups, MessageBox MessageBox MessageBoxResult ret = MessageBox.Show( "Nội dung thông báo", "Tiêu đề", MessageBoxButton.OKCancel); if (ret == MessageBoxResult.OK) { } 110 3. Data binding 3.1 Binding Basics 3.2 Binding in Code 3.3 Binding Collections 3.4 Binding to ListBox 111 3. Data binding Data binding is essentially a conversation between a Windows Phone element and a standard CLR object. FrameworkElement introduces the DataContext property and is the base class for elements that can be data bound. DataContext can be assigned any CLR object using XAML or directly in code. 112 3.1 Binding Basics The key properties in a {Binding} statement are: Source: The CLR object that provides the data. This object is assigned to the DataContext of the target framework element we’re binding to. Path: The name of the property in the source CLR object. Mode: The data’s direction of travel. OneTime, where the target framework element is set initially from the source object. OneWay (the default), where the target framework element is updated by the source object, TwoWay where the target framework element also updates the source object. 113 3.1 Binding Basics namespace LearnBindingBasic { public class MyData { public int ID { get; set; } public string AppTitle { get; set; } public string PageName { get; set; } } } xmlns:local="clr-namespace:LearnBindingBasic" 114 3.1 Binding Basics 115 3.2 Binding in Code Binding requires three objects: the FrameworkElement to display the data, a CLR object to contain the data and a Binding object to manage the conversation between the two. The XAML binding expression obscures the existence of the binding object, but the Binding object is more apparent when binding in code. public class BikeType { public string TypeName 	{get;set;} public string TypeDescription 	{ get; set; } } 116 3.2 Binding in Code using System.Windows.Data; // create a CLR object instance BikeType bikeType = new BikeType() { TypeName = "Touring", TypeDescription = "Durable and comfortable bikes for long journeys." }; // create a Binding object Binding binding = new Binding() { Source = bikeType, Path = new PropertyPath("TypeName"), Mode = BindingMode.OneTime }; // assign the binding object to the FrameworkElement BindInCodeTextBox.SetBinding(TextBox.TextProperty, binding); 117 3.3 Binding Collections ItemsSource (or its descendant ListBox) can be assigned any Ienumerable implementation such as generic lists or arrays. By changing the MyData example and descending from a generic List, we can represent a list of Itemtypes. namespace LearnBindingCollections { public class Item { public string Title { get; set; } public string Description 	 { get; set; } } } 118 3.3 Binding Collections namespace LearnBindingCollections { public class MyData : List { public int ID { get; set; } public string AppTitle { get; set; } public string PageName { get; set; } public MyData() { this.ID = 1; this.AppTitle = "Real Estate Explorer"; this.PageName = "Explorer"; this.Add(new Item { Title = "Open House", Description = "Open Houses in your area" }); this.Add(new Item { Title = "Price Reduction", Description = "New deals this week“ }); this.Add(new Item { Title = "Recently Sold", Description = "What's moving in the market" }); } } } 119 3.3 Binding Collections xmlns:local="clr-namespace:LearnBindingCollections" 120 3.3 Binding Collections 121 3.4 Binding to ListBox 122 4. MVVM 123 4. MVVM Model-View-ViewModel View ViewModel Commands Data Binding Model 124 4. MVVM Why MVVM? Model public class KittenObject { public KittenObject() { } public string KittenImage { get; set; } public string KittenName { get; set; } public string KittenAge { get; set; } } 125 4. MVVM Why MVVM? ViewModel public class MainViewModel : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; private void NotifyPropertyChanged(String propertyName) { PropertyChangedEventHandler handler = PropertyChanged; if (null != handler) { handler(this, new PropertyChangedEventArgs(propertyName)); } } } 126 4. MVVM Why MVVM? ViewModel private string _sampleProperty = "my start value"; public string SampleProperty { get { return _sampleProperty; } set { _sampleProperty = value; NotifyPropertyChanged("SampleProperty"); } } 127 4. MVVM Why MVVM? View 128 4. MVVM Why MVVM? View 129 4. MVVM Model-View-ViewModel View ViewModel Commands Data Binding Model 130 4. MVVM Data Binding Modes The Mode property determines how changes are synchronized between the target control and data source OneTime – Control property is set once to the data value and any subsequent changes are ignored OneWay – Changes in the data object are synchronized to the control property, but changes in the control are not synchronized back to the data object TwoWay – Changes in the data object are synchronized to the control property and vice-versa 131 4. MVVM INotifyPropertyChanged ViewModels implement INotifyPropertyChanged public class ItemViewModel : INotifyPropertyChanged { private string lineOne; public string LineOne { get { return lineOne; } set { if (value != lineOne) { lineOne = value; NotifyPropertyChanged("LineOne"); } } } public event PropertyChangedEventHandler PropertyChanged; private void NotifyPropertyChanged(String propertyName) { if (null != PropertyChanged) PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } } 132 4. MVVM In the XAML snippet, make sure that the DataContext is set to an instance of the ViewModel class. The ViewModel class exposes an AddCommand property of type AddItemCommand The ViewModel is responsible for actually adding a new item Commands class AddItemCommand : ICommand { ViewModel _viewModel; public AddItemCommand(ViewModel viewModel) { _viewModel = viewModel; } public event EventHandler CanExecuteChanged; public bool CanExecute(object parameter) { return true; }   public void Execute(object title) { _viewModel.AddItem(title as string); } } 133 4. MVVM MVVM Benefits Reuse Model and View-Model code Test the ViewModel with unit tests Maintainability Can show design-time data in Expression Blend and the Visual Studio designer 134 4. MVVM Demo 135 4. MVVM MVVM Libraries MVVM Light Caliburn Micro   Rob Eisenberg Laurent Bugnion 136 5. Navigation 5.1 Navigation between Pages 5.2 Navigation to external URIs 5.3 Navigation within Pages 137 5.1 Navigation between Pages App.RootFrame.Navigate( 	new Uri("/SecondPage.xaml", 	UriKind.Relative)); 138 5.1 Navigation between Pages MainPage: App.RootFrame.Navigate(new Uri("/SecondPage.xaml#detail", 	UriKind.Relative)); OnFragmentNavigation SecondPage: protected override void OnFragmentNavigation(FragmentNavigationEventArgs e) { // displays "Fragment: Detail" MessageBox.Show("Fragment: " + e.Fragment); base.OnFragmentNavigation(e); } A fragment is the part of a URI following a hash mark “#” and is typically used to specify detail within a document. 139 5.1 Navigation between Pages OnNavigatingFrom OnNavigatingFrom is an opportunity to prevent the user from leaving the page protected override void OnNavigatingFrom(NavigatingCancelEventArgs e) { MessageBoxResult ret=MessageBox.Show( "You have unsaved data, do you want to exit?", "Unsaved data", MessageBoxButton.OKCancel); e.Cancel=(ret== MessageBoxResult.Cancel); base.OnNavigatingFrom(e); } MainPage 140 5.1 Navigation between Pages OnNavigatedFrom This method is called when a page is no longer the active page in a frame. The NavigationEventArgs Content property represents the target page. This allows you to pass data from the page you’re leaving and send it to the page that is about to display. protected override void OnNavigatedFrom(NavigationEventArgs e) { MainPage mainPage = e.Content as MainPage; if (mainPage != null) mainPage.StatusText.Text = "A message from 	SecondPage OnNavigatedFrom"; base.OnNavigatedFrom(e); } SecondPage 141 5.1 Navigation between Pages OnNavigatedTo This method is called when a page becomes the active page in a frame protected override void OnNavigatedTo(NavigationEventArgs e) { MessageBox.Show("Navigate to=" + e.Uri); base.OnNavigatedTo(e); } 142 5.1 Navigation between Pages NavigationService The NavigationService is a workhorse that tracks navigation history and provides navigation methods and events. It is kept as an instance within the Page class. if (this.NavigationService.CanGoBack) { this.NavigationService.GoBack(); } 143 5.2 Navigation to external URIs WebBrowserTask Task = 	new WebBrowserTask(); Task.Uri = new Uri(""); Task.Show(); Or using WebBrower Control browser.Navigate(new Uri("")); 144 5.3 Navigation within Pages Pivot and Panorama controls are used to navigate within a page and can be used in favor of tabbed interfaces. Please Reading more:  END 145