1. patterns & practices Symposium 2013 Tips for building a Windows Store app using XAML and C#: The Kona project Francis Cheung fcheung@microsoft.com

2. Agenda

3. Prism for WPF, Silverlight and Windows Phone

6. The Kona Project

7. Rethink Prism Scenarios for Windows Store Modularity UI Composition Region Navigation Decoupled Communication Commands MVVM Support

8.  Walkthrough Demo AdventureWorks Shopper

10. 1. Leverage background in Windows Phone development Windows Phone appsWindows Store apps Deactivate/Tombstoned/ReactivateSuspend/Terminate/Resume Microsoft Push Notification Service (MPN) Windows Push Notification Service (WNS) Windows Phone Marketplace certificationWindows Store app certification & Application Excellence Review (AER) App manifest declares capabilities

11. 2. Focus on AttachedBehaviors No Blend Behavior No BindingExpressions Break out your AttachedBehavior experience and ROCK ON!

12. 3. Push Notification requires Windows Store registration Make sure to register your app with the Windows Store to get proper credentials (SID & secret key) Purely sideloaded apps won’t be able to receive notifications from Windows Notification Service (WNS)

13. 1: async Task AccessTheWebAsync() 2: { 3: HttpClient client = new HttpClient(); 4: Task getStringTask = client.GetStringAsync("http://msdn.microsoft.com"); 5: DoIndependentWork(); 6: 7: string urlContents = await getStringTask; 8: return urlContents.Length; 9: } 4. async & await are your friends

14. Pages and Navigation

15. Navigation support protected virtual void GoHome(object sender, RoutedEventArgs e) protected virtual void GoBack(object sender, RoutedEventArgs e) protected virtual void GoForward(object sender, RoutedEventArgs e) Visual state switching public void StartLayoutUpdates(object sender, RoutedEventArgs e) public void StopLayoutUpdates(object sender, RoutedEventArgs e) Process lifetime management protected override void OnNavigatedTo(NavigationEventArgs e) protected override void OnNavigatedFrom(NavigationEventArgs e) protected virtual void LoadState(Object navigationParameter, Dictionary pageState) protected virtual void SaveState(Dictionary pageState) 5. Use the LayoutAwarePage class to provide navigation, state management, and visual state management

16. XAML: Navigation & Visual State Support

17. protected override void SaveState(System.Collections.Generic.Dictionary pageState) { var virtualizingStackPanel = VisualTreeUtilities.GetVisualChild (itemGridView); if (virtualizingStackPanel != null && pageState != null) { pageState["virtualizingStackPanelHorizontalOffset"] = virtualizingStackPanel.HorizontalOffset; } } protected override void LoadState(object navigationParameter, System.Collections.Generic.Dictionary pageState) { if (pageState != null && pageState.ContainsKey("virtualizingStackPanelHorizontalOffset")) { double.TryParse(pageState["virtualizingStackPanelHorizontalOffset"].ToString(), out virtualizingStackPanelHorizontalOffset); } } LoadState & SaveState: SuspensionManager

18. ...... 6. Support visual state for landscape, portrait, fill, and snap

19. World Ready

20. 7. Separate resources for each locale <ToolTip x:Uid=“PreviewCartoonizeAppBarButtonToolTip” Content=“Preview Cartoonization” … />

21. Model-View-ViewModel Pattern

22. View First: this.Frame.Navigate(typeof(ItemDetailPage), itemId); ViewModel First: Var itemDetailPageViewModel = new ItemDetailPageViewModel(…) { ItemId = itemId }; navigationService.Navigate(itemDetailPageViewModel); 8. Navigation: View or ViewModel First

23. Nicki says:

24. public abstract class BindableBase : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; protected bool SetProperty (ref T storage, T value, [CallerMemberName] String propertyName = null) { if (object.Equals(storage, value)) return false; storage = value; this.OnPropertyChanged(propertyName); return true; } protected void OnPropertyChanged([CallerMemberName] string propertyName = null) { var eventHandler = this.PropertyChanged; if (eventHandler != null) { eventHandler(this, new PropertyChangedEventArgs(propertyName)); } } } 9. Use BindableBase class to provide INPC

25. 10. Use the Kona ViewModelLocator Convention based lookup MyNamespace.MyPage -> MyNamespace.MyPageViewModel Ability to override convention with exceptions to rule Can leverage container to instantiate ViewModels.

26. Typical Validation in WPF/Silverlight Implement INotifyDataErrorInfo UI controls bind to errors dictionary if NotifyOnValidationError=True

27. View: ViewModel: _bindableValidator = new BindableValidator(_address); public BindableValidator Errors { get { return _bindableValidator; } } 11. Use Kona BindableValidator

28. Decoupled Eventing Hollywood Parent style UI Composition (user control) Child control needs to listen to events raised by long lived services but no way to unhook… Ported Prism EventAggregator

29. 12. Use EventAggregator when necessary public SubscriberViewModel(IEventAggregator eventAggregator) { eventAggregator.GetEvent ().Subscribe(s => UpdateItemCountAsync()); } public PublisherViewModel(IEventAggregator eventAggregator) { _eventAggregator = eventAggregator; } _eventAggregator.GetEvent ().Publish(string.Empty);

30. Commanding vs ViewModel Method Invocation ICommand: void Execute(object) bool CanExecute(object) event EventHandler CanExecuteChanged Command Invoker: ButtonBase ----------------------------------------------------- Event -> Action

31. 13. Use DelegateCommand for controls that support ICommand View: ViewModel: ShoppingCartNavigationCommand = new DelegateCommand(NavigateToShoppingCartPage, CanNavigateToShoppingCartPage); ShoppingCartNavigationCommand.RaiseCanExecuteChanged();

32. 14. Use AttachedBehaviors and Actions for the rest View: <GridView x:Name="itemGridView“ ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" ItemTemplate="{StaticResource KonaRI250x250ItemTemplate}" SelectionMode="None“ IsItemClickEnabled="True" behaviors:ListViewItemClickedToAction.Action= "{Binding CategoryNavigationAction}"> ViewModel: CategoryNavigationAction = NavigateToCategory;

33. Suspend, Resume, and Terminate

34. Symposium 2013 15. Use Kona RestorableStateAttribute and MVVM framework public class MyViewModel : ViewModel, INavigationAware { private string _name; [RestorableState] public string Name { get { return _name; } set { SetProperty(ref _name, value); } } }

35. 16. Unit Testing nicely integrated into VS2012 WP7: Jeff Wilcox's Silverlight Unit Test Framework Tests run in emulator or device Unit Test Library (Windows Store apps) Run and debug from IDE Can run tests from command line and export as trx format.

36. Symposium 2013 17. File System  Local Data (SQLite)  Roaming Data  Hi Priority Roaming Data  Password Vault

37. Symposium 2013 Thanks!  http://konaguidance.codeplex.com http://konaguidance.codeplex.com  fcheung@microsoft.com fcheung@microsoft.com