Tips and tricks for developing Metro style apps using XAML TOOL-515T Tips and tricks for developing Metro style apps using XAML Tim Heuer Program Manager Microsoft Corporation © 2010 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.

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

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

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

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

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

demo XAML tips & tricks

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

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

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

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

11/21/2018 5:02 AM © 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. © 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.

Tip details

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

Tip: UnhandledException debugger break public App() { InitializeComponent(); UnhandledException += new UnhandledExceptionEventHandler(App_UnhandledException); } void App_UnhandledException(object sender, UnhandledExceptionEventArgs e) if (Debugger.IsAttached) string _errorMessage = e.Message; Debugger.Break();

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

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

Tip: Segoe UI Symbol for ApplicationBar icons <TextBlock Text="" FontFamily="Segoe UI Symbol" FontSize="26.667" /> 

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

Tip: binding HTML to WebView (helper) public static class WebViewHelper { const string style = "<style type=\"text/css\">body {{ background-color: black; color: white; font-family: Segoe UI Light; font-size: 18px; }}</style>{0}"; public static readonly DependencyProperty HtmlProperty = DependencyProperty.RegisterAttached("Html", "String", typeof(WebViewHelper).FullName, new PropertyMetadata("", OnHtmlChanged)); public static string GetHtml(DependencyObject depObj) return (string)depObj.GetValue(HtmlProperty); } public static void SetHtml(DependencyObject depObj, string value) depObj.SetValue(HtmlProperty, value); private static void OnHtmlChanged(DependencyObject debObj, DependencyPropertyChangedEventArgs args) var wv = debObj as WebView; if (wv == null) return; var html = args.NewValue.ToString(); wv.NavigateToString(string.Format(style, html));

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

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

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

Tip: OAuth made easy private async void Login (object sender, RoutedEventArgs e) { WebAuthenticationResult res = await WebAuthenticationBroker.AuthenticateAsync( WebAuthenticationOptions.Default, requestUri, callbackUri); PasswordCredential cred = new PasswordCredential("ServiceName", "Service", res.ResponseData.ParseToken("access_token")); PasswordVault pv = new PasswordVault(); pv.Add(cred); }