1. 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.

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:
64-bit
[HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Xaml]

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
Windows SDK Samples
Contact info –

11. thank you Feedback and questions http://forums.dev.windows.com
Session feedback

12. 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.

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); }
void App_UnhandledException(object sender, UnhandledExceptionEventArgs e)
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 = 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;

18. Tip: Segoe UI Symbol for ApplicationBar icons
<TextBlock
Text=""
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)
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));

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
BitmapImage bitmapImage = new BitmapImage();
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
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); }