Tips and tricks for developing Metro style apps using XAML

1. TOOL-515T Tips and tricks for developing Metro style apps using XAML Tim Heuer Program Manager Microsoft Corporation

2. Agenda • Whirlwind tour of some tips and tricks we’ve learned/used from our app building so far in the XAML team You’ll leave with examples of how to • Use XAML/code tips to make you productive

3. This is NOT a substitute for new XAML/Windows 8 Sessions.

4. Tips for Windows XAML • Frame Rate Counter • Exception Handling • Async/await/Dispatcher • BaseUri • AppBar Buttons • Localize XAML Content • Binding HTML Content to WebView • Create a Settings Panel • BitmapImage.DecodePixel • OAuth made easy for client apps

5. Tip: Enabling Framerate Counter What • Turn on framerate counter for debugging data UI CPU Time (MS) Composition CPU Time (MS) Batch Count Memory Utilization UI Thread Framerate Composition Thread Framerate

6. EnableFramerateCounter • 32-bit • [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Xaml] • "EnableFrameRateCounter"=dword:00000001 • 64-bit • [HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Xaml] • "EnableFrameRateCounter"=dword:00000001

7. demo XAML tips & tricks

8. Tips for Windows XAML • Frame Rate Counter • Exception Handling • Async/await/Dispatcher • BaseUri • AppBar Buttons • Localize XAML Content • Binding HTML Content to WebView • Create a Settings Panel • BitmapImage.DecodePixel • OAuth made easy for client apps

9. Related sessions • [APP-737T] Metro style apps using XAML: what you need to know • [APP-741T] Metro style apps using XAML: Make your app shine • [APP-494T] Stand out with styling and animation in your XAML app • [APP-517T] Build polished collection and list apps using XAML • [APP-503T] Make great touch apps using XAML

10. Further reading and documentation • Windows Developer Center • http://go.microsoft.com/fwlink/?LinkID=227201 • Windows SDK Samples • http://go.microsoft.com/fwlink/?LinkId=221708 • Contact info – xamlfeedback@microsoft.com

11. thank you Feedback and questions http://forums.dev.windows.com Session feedbackhttp://bldw.in/SessionFeedback

12. © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

13. Tip details

14. Tip: Turn On Exception Helpers How • Debug | Exceptions • Enable Native Exceptions (check them all) • This must be done per-project • Tools | Options | Debugging • Uncheck “Enable Just My Code” • UnhandledException debugger break

15. Tip: UnhandledException debugger break • public App() • { • InitializeComponent(); • UnhandledException+= new UnhandledExceptionEventHandler(App_UnhandledException); • } • voidApp_UnhandledException(objectsender, UnhandledExceptionEventArgse) • { • if (Debugger.IsAttached) • { • string_errorMessage = e.Message; • Debugger.Break(); • } • }

16. Tip: Dispatcher/Async What • Pay attention to awaitable tooltip helper • this.Dispatcher.Invoke() when needed • See [810] C# and VB in “Visual Studio 11”

17. Tip: BaseUri • BitmapImage bmp = newBitmapImage(); • // use BaseUri to get the absolute URI for the • // asset within the Package • // results in ms-resource://[PackageName]/Files/[RelativeUri] • UriimageUri = newUri(this.BaseUri, "Images/Logo.png"); • bmp.UriSource= imageUri; • Imageimg = newImage(); • img.Source= bmp;

18. Tip: Segoe UI Symbol for ApplicationBar icons • <TextBlock • Text="&#xE0C0;" • FontFamily="Segoe UI Symbol" • FontSize="26.667" /> 

19. Tip: localize XAML content • <Grid x:Name="LayoutRoot" Background="#FF0C0C0C"> • <TextBlock x:Uid="MyTextBlock"FontSize="72" /> • </Grid>

20. Tip: binding HTML to WebView (helper) • publicstaticclassWebViewHelper • { • conststring style = "<style type=\"text/css\">body {{ background-color: black; color: white; font-family: Segoe UI Light; font-size: 18px; }}</style>{0}"; • publicstaticreadonlyDependencyPropertyHtmlProperty = DependencyProperty.RegisterAttached("Html", "String", typeof(WebViewHelper).FullName, newPropertyMetadata("", OnHtmlChanged)); • publicstaticstringGetHtml(DependencyObjectdepObj) • { • return (string)depObj.GetValue(HtmlProperty); • } • publicstaticvoidSetHtml(DependencyObjectdepObj, string value) • { • depObj.SetValue(HtmlProperty, value); • } • privatestaticvoidOnHtmlChanged(DependencyObjectdebObj, DependencyPropertyChangedEventArgsargs) • { • varwv = debObjasWebView; • if (wv == null) return; • var html = args.NewValue.ToString(); • wv.NavigateToString(string.Format(style, html)); • } • }

21. Tip: binding HTML to WebView (usage) • <WebView x:Name="WebContent" Width="800" • local:WebViewHelper.Html="{Binding Content}" • />

22. Tip: BitmapImage.DecodePixelWidth[Height] • // set the decode width/height • // this benefit shows in memory and not in UI • BitmapImagebitmapImage = newBitmapImage(); • bitmapImage.DecodePixelHeight= decodePixelHeight; • bitmapImage.DecodePixelWidth= decodePixelWidth; • bitmapImage.SetSource(fileStream);

23. Tip: custom settings panel What • Use a UserControl for your settings UI • Use transitions (RepositionTransition) for Animation Library behavior • Catch user interaction on root layout for light dismiss implementation

24. Tip: OAuth made easy • privateasyncvoidLogin (object sender, RoutedEventArgs e) • { • WebAuthenticationResultres = awaitWebAuthenticationBroker.AuthenticateAsync( • WebAuthenticationOptions.Default, requestUri, callbackUri); • PasswordCredentialcred = newPasswordCredential("ServiceName", "Service", res.ResponseData.ParseToken("access_token")); • PasswordVaultpv = newPasswordVault(); • pv.Add(cred); • } • }