SlideShare a Scribd company logo
Twelve ways to make your apps suck less 
Fons Sonnemans 
@fonssonnemans 
© Reflection IT BV. All rights reserved.
Fons Sonnemans 
•Software Development Consultant 
•Programming Languages 
•Clipper, Smalltalk, Visual Basic, C# 
•Platforms 
•Windows Forms, ASP.NET (Web Forms, MVC), XAML (WPF, Silverlight, Windows Phone, Windows 8) 
•Databases 
•MS SQL Server, Oracle 
•Role 
•Trainer, Coach, Advisor, Architect, Designer, Developer 
•More info: www.reflectionit.nl 
2
My Phone Apps 
•> 775K downloads 
3
My Windows Apps 
> 1.8 million downloads 
4
Topics 
1.Create Universal Apps 
2.Start with a Design not Code 
3.Design proper Visual Assets 
4.Create custom themes 
5.Be mobile 
6.Reviews are important 
7.Use Vectors and Fonts 
8.Performance is key! 
9.Localize your app 
10.Use Data Binding and MVVM 
11.Learn Blend 
12.Cache your first page 
5
1. Create Universal Apps 
•Be prepared for Windows 10 
•Connect your Windows Phone app with the Windows 8 app 
•Share Roaming data across platforms 
•Share code 
•Portable Class Libraries (PCL) 
•Shared projects 
•File linking 
6
IsTextScaleFactorEnabled <StackPanel Margin="10"> <Button Content="Button 1" /> <TextBlock Text="Hello World 1" FontSize="20" Margin="0,10" /> <TextBox Text="TextBox 1" /> <Button Content="Button 2" IsTextScaleFactorEnabled="False" Margin="0,40,0,0" /> <TextBlock Text="Hello World 2" IsTextScaleFactorEnabled="False" FontSize="20" Margin="0,10" /> <TextBox Text="TextBox 2" IsTextScaleFactorEnabled="False" /> </StackPanel> 
8
2. Start with a Design not Code 
http://design.windows.com 
•Modern Design 
•RTFM (Principles, Guidelines, UX Patterns) 
•Vision and process 
•Discover your best idea 
•Identity 
•Create a beautiful visual identity 
•Gallery 
•Learn (“steal”) from the best/competition 
9
3. Design proper Visual Assets 
•Visual Assets 
•Tiles, SplashScreen, Icons, etc 
•All Scale Factors 
•Windows 80, 100, 140, 180 
•Phone 100, 140, 240 
•Use vectors 
•Expression Design (Free), Adobe Illustrator 
10
3. Design proper Visual Assets 
•Expression Design Demo 
11
4. Create Custom Themes 
12
4. Create Custom Themes 
•Windows 
•C:Program Files (x86)Windows Kits8.1IncludeWinRTXamlDesignGeneric.xaml 
•Windows Phone 
•C:Program Files (x86)Windows Phone Kits8.1IncludeabiXamlDesignGeneric.xaml 
•Use the ThemeManager of Dave Smits 
•http://www.familie-smits.com/theming-in-a-universal- app 
•Use HAMMER.Pants for Windows 
•https://github.com/Code52/HAMMER 
13
5. Be Mobile 
•HttpClient 
•Resolve the correct type 
•System.Net.Http.HttpClient is slightly different in the most basic use, and quite different when you get into advanced work. 
•Always make sure you’re using Windows.Web.Http 
•System.Net.Http shows up first 
14
5. Be Mobile 
•Mobile devices are often connected to poor quality network connections 
•Best chance of success in network data transfers achieved by: 
•Keep data volumes as small as possible 
•Use the most compact data serialization available (use JSON instead of XML) 
•Avoid large data transfers 
•Avoid transferring redundant data 
•Design your protocol to only transfer precisely the data you need and no more
Network Awareness in your apps 
•Making Decisions based on Data Connections 
•Mobile apps shouldn’t diminish the user experience by trying to send or receive data in the absence of network connectivity 
•Mobile apps should be intelligent about performing heavy data transfers only when the appropriate connectivity is available 
•Use the NetworkInterfaceType object to detect network type and speed 
•Subscribe to the NetworkChange event to detect when network state changes 
Make your app aware of its networking environment and state!
17 
Network Information in Windows Runtime private bool IsOnWiFi() { ConnectionProfile InternetConnectionProfile = NetworkInformation.GetInternetConnectionProfile(); if (internetConnectionProfile == null) return false; return InternetConnectionProfile.IsWlanConnectionProfile; } private bool IsConnectedtoDataRoaming() { bool isRoaming = false; ConnectionProfile internetConnectionProfile = NetworkInformation.GetInternetConnectionProfile(); if (internetConnectionProfile != null && internetConnectionProfile.IsWwanConnectionProfile) { ConnectionCost cc = internetConnectionProfile.GetConnectionCost(); isRoaming = cc.Roaming; // See if user is currently roaming } return isRoaming; } private void AddEventHandlers() { // NetworkStatusChanged fires when the network status changes for a connection NetworkInformation.NetworkStatusChanged += OnNetworkStatusChanged; }
What is Data Sense? 
•Data Sense is a set of components designed to help: 
•End users: understand and manage data consumption 
•Mobile Operators: reduce cellular consumption & optimize connectivity 
•3rd party developers and ISVs: Build smart data consuming applications 
18
What Makes Up “Data Sense”? 
The Data Sense platform 
Data Sense (UI) 
Browser Optimization Service 
WiFi hotspot Mapping
Content Streaming Scenario - 1 of 2 ConnectionProfile internetConnectionProfile = NetworkInformation.GetInternetConnectionProfile(); if (internetConnectionProfile != null) { if (internetConnectionProfile.IsWlanConnectionProfile) { // connected on WiFi interface; double check it is not a metered WiFi hotspot ConnectionCost cc = internetConnectionProfile.GetConnectionCost(); if ((NetworkCostType.Unknown == cc.NetworkCostType) || (NetworkCostType.Unrestricted == cc.NetworkCostType)) { // assume free network; connect and start streaming content } } else if (internetConnectionProfile.IsWwanConnectionProfile) { ...
22 
Content Streaming Scenario – 2 of 2 else if (InternetConnectionProfile.IsWwanConnectionProfile) { ConnectionCost cc = InternetConnectionProfile.GetConnectionCost(); // check the type of data plan - make sure user is not currently roaming if (!cc.Roaming) { if ((NetworkCostType.Unknown == cc.NetworkCostType) || (NetworkCostType.Unrestricted == cc.NetworkCostType)) { // assume free network; connect and start streaming content } else if (NetworkCostType.Fixed == cc.NetworkCostType) { // make sure user not currently over limit or near limit if ((!cc.OverDataLimit) && (!cc.ApproachingDataLimit)) { // connect and start streaming content } } } } 
Source: http://channel9.msdn.com/Events/TechEd/NorthAmerica/2014/WIN-B326
6. Reviews are important 
23
6. Reviews are important 
24
6. Reviews are important 
25
6. Reviews are important 
26
7. Use Vectors and Fonts 
•Use Bitmaps for Images 
•JPG for large photos 
•PNG for perfect quality 
•Scale 100, 140, 180 
•Use Vectors and Fonts for “Icons” 
•Use <Path data=“” /> for Vector 
•Use FontIcon or TextBlock for Fonts 
•AppBarButton supports FontIcon & PathIcon 
27
Font 
28
Vector 
•ArtBoard 40x40 
•Icon Max Width or Height 24 
•Select All -> Export – XAML Silverlight 4 / WPF Canvas 
•Open .xaml & copy Path
Demo <Page x:Class="VectorAndFontDemo.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:VectorAndFontDemo" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Page.BottomAppBar> <CommandBar Background="#FFFFB900" IsOpen="True"> <AppBarButton Label="AppBarButton"> <AppBarButton.Icon> <FontIcon FontFamily="Assets/Fonts/untitled-font-1.ttf#untitled-font-1" Glyph="d" /> </AppBarButton.Icon> </AppBarButton> <AppBarButton Label="AppBarButton"> <AppBarButton.Icon> <PathIcon Data="F1 M20.0017,8 C21.6588,8 23.0021,9.34333 23.0021,11.0004 C23.0021,12.111 22.3987,13.0807 21.5018,13.5995 L21.5018,27.3629 C23.9769,26.8976 26.155,25.2984 27.6868,23.0021 L25.7525,23.0021 L29.0029,16.5013 L32.0033,23.0021 L30.3772,23.0021 C28.8669,27.6635 24.7918,31.0032 20.0017,31.0032 C15.2115,31.0032 11.1364,27.6635 9.62615,23.0021 L8,23.0021 L11.0004,16.5013 L14.2508,23.0021 L12.3166,23.0021 C13.8483,25.2984 16.0263,26.8975 18.5014,27.3629 L18.5014,13.5994 C17.6046,13.0806 17.0013,12.111 17.0013,11.0004 C17.0013,9.34333 18.3446,8 20.0017,8 z M20.0017,10.0003 C19.4493,10.0003 19.0015,10.4481 19.0015,11.0004 C19.0015,11.5528 19.4493,12.0006 20.0017,12.0006 C20.554,12.0006 21.0018,11.5528 21.0018,11.0004 C21.0018,10.4481 20.554,10.0003 20.0017,10.0003 z" /> </AppBarButton.Icon> </AppBarButton> </CommandBar> </Page.BottomAppBar> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Viewbox Height="200" Width="200" VerticalAlignment="Center" HorizontalAlignment="Center"> <FontIcon FontFamily="Assets/Fonts/untitled-font-1.ttf#untitled-font-1" Glyph="c" /> </Viewbox> </Grid> </Page> 
30
Links 
•Vectors 
•http://modernuiicons.com 
•http://materialdesignicons.com/ 
•http://thenounproject.com 
•http://www.thexamlproject.com 
•http://www.syncfusion.com/downloads/metrostudio 
•Fonts 
•http://msdn.microsoft.com/en- us/library/windows/apps/jj841126.aspx 
•http://www.geekchamp.com/icon-explorer/introduction 
•http://www.fontello.com/ 
•http://fontastic.me
8. Performance is Key 
32
9. Localize your app 
•Offering your app in English only will only cover about 25% of Windows Phone customers, though it covers a larger percentage of tablets and PCs users. Adding Spanish, French, Mandarin, Russian and German increases coverage to more than 75% of the base. 
http://blogs.windows.com/buildingapps/2014/09/29/windows-and-windows- phone-store-trends-september-2014-update/ 
33
10. Use Data Binding and MVVM 
•Motivations: 
•Reduces complexity with Model to UI integration 
•Separation of concerns 
•Clear Designer-Developer separation 
•Makes code more Unit testable 
•Approach: 
•Split the UI architecture into Model, View and View- Model 
•Model: Represents the data 
•View : UI defined declaratively in XAML 
•View Model: Specialization of the Model that View uses for data binding
Model View ViewModel 
View 
(XAML UserControls + CodeBehind) 
ViewModel 
(State + Operations) 
DataBinding 
Commands 
Events / 
Messages 
Model 
("Data") 
DataBinding
11. Learn Blend 
•Layout 
•Animations 
•Styling 
•Templating 
•Resources 
•Data Binding 
•Sample Data 
•Visual States 
•Behaviors 
36
12. Cache your first page public sealed partial class HubPage : Page { private readonly NavigationHelper navigationHelper; private readonly ObservableDictionary defaultViewModel = new ObservableDictionary(); private readonly ResourceLoader resourceLoader = ResourceLoader.GetForCurrentView("Resources"); public HubPage() { this.InitializeComponent(); // Hub is only supported in Portrait orientation DisplayInformation.AutoRotationPreferences = DisplayOrientations.Portrait; this.NavigationCacheMode = NavigationCacheMode.Required; this.navigationHelper = new NavigationHelper(this); this.navigationHelper.LoadState += this.NavigationHelper_LoadState; this.navigationHelper.SaveState += this.NavigationHelper_SaveState; } 
37
@fonssonnemans 
fons.sonnemans@reflectionit.nl 
fonssonnemans 
reflectionit.nl/blog 
38
Copyright 
•Copyright © by Reflection IT BV. All rights reserved. 
•Some parts quote Microsoft public materials. 
•This presentation, its workshops, labs and related materials may not be distributed or used in any form or manner without prior written permission by the author. 
39

More Related Content

What's hot

The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
The Magic Revealed: Four Real-World Examples of Using the Client Object Model...The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
SPTechCon
 
SPUnite17 Become a Developer Hero by Building Office Add ins
SPUnite17 Become a Developer Hero by Building Office Add insSPUnite17 Become a Developer Hero by Building Office Add ins
SPUnite17 Become a Developer Hero by Building Office Add ins
NCCOMMS
 
Cape Town MS Developer User Group: Xamarin Community Toolkit
Cape Town MS Developer User Group: Xamarin Community ToolkitCape Town MS Developer User Group: Xamarin Community Toolkit
Cape Town MS Developer User Group: Xamarin Community Toolkit
Javier Suárez Ruiz
 
SPCA2013 - Building Windows Client Applications for SharePoint 2013
SPCA2013 - Building Windows Client Applications for SharePoint 2013SPCA2013 - Building Windows Client Applications for SharePoint 2013
SPCA2013 - Building Windows Client Applications for SharePoint 2013
NCCOMMS
 
Building appsinsilverlight4 part_1
Building appsinsilverlight4 part_1Building appsinsilverlight4 part_1
Building appsinsilverlight4 part_1
Dennis Perlot
 
Windows 8 app bar and live tiles
Windows 8 app bar and live tilesWindows 8 app bar and live tiles
Windows 8 app bar and live tiles
Amr Abulnaga
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...
Fabio Franzini
 
Getting Started with SharePoint Development
Getting Started with SharePoint DevelopmentGetting Started with SharePoint Development
Getting Started with SharePoint Development
Chakkaradeep Chandran
 
Codemotion 2013 - Designing complex applications using html5 and knockoutjs
Codemotion 2013 - Designing complex applications using html5 and knockoutjsCodemotion 2013 - Designing complex applications using html5 and knockoutjs
Codemotion 2013 - Designing complex applications using html5 and knockoutjs
Fabio Franzini
 
tTecniche di sviluppo mobile per share point 2013 e office 365
tTecniche di sviluppo mobile per share point 2013 e office 365 tTecniche di sviluppo mobile per share point 2013 e office 365
tTecniche di sviluppo mobile per share point 2013 e office 365
Fabio Franzini
 
What's new in Xamarin.Forms
What's new in Xamarin.FormsWhat's new in Xamarin.Forms
What's new in Xamarin.Forms
Rui Marinho
 
COB - PowerApps - the good, the bad and the ugly - early 2018
COB - PowerApps - the good, the bad and the ugly - early 2018COB - PowerApps - the good, the bad and the ugly - early 2018
COB - PowerApps - the good, the bad and the ugly - early 2018
Chris O'Brien
 
Best Practices Configuring And Developing Share Point Solutions
Best Practices Configuring And Developing Share Point SolutionsBest Practices Configuring And Developing Share Point Solutions
Best Practices Configuring And Developing Share Point Solutions
Alexander Meijers
 
Monkey Conf 2020: Xamarin Community Toolkit: More possibilities with Xamarin....
Monkey Conf 2020: Xamarin Community Toolkit: More possibilities with Xamarin....Monkey Conf 2020: Xamarin Community Toolkit: More possibilities with Xamarin....
Monkey Conf 2020: Xamarin Community Toolkit: More possibilities with Xamarin....
Javier Suárez Ruiz
 
STUG-Client Object Model SharePoint 2010
STUG-Client Object Model SharePoint 2010STUG-Client Object Model SharePoint 2010
STUG-Client Object Model SharePoint 2010
Shakir Majeed Khan
 
Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app
Ivano Malavolta
 
Building a Twitter App with Silverlight 3 - Part 2
Building a Twitter App with Silverlight 3 - Part 2Building a Twitter App with Silverlight 3 - Part 2
Building a Twitter App with Silverlight 3 - Part 2
Clint Edmonson
 
Come riprogettare le attuali farm solution di share point con il nuovo modell...
Come riprogettare le attuali farm solution di share point con il nuovo modell...Come riprogettare le attuali farm solution di share point con il nuovo modell...
Come riprogettare le attuali farm solution di share point con il nuovo modell...
Fabio Franzini
 
Windows phone app development overview
Windows phone app development overviewWindows phone app development overview
Windows phone app development overview
Alan Mendelevich
 
Sviluppare app per office
Sviluppare app per officeSviluppare app per office
Sviluppare app per office
Fabio Franzini
 

What's hot (20)

The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
The Magic Revealed: Four Real-World Examples of Using the Client Object Model...The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
 
SPUnite17 Become a Developer Hero by Building Office Add ins
SPUnite17 Become a Developer Hero by Building Office Add insSPUnite17 Become a Developer Hero by Building Office Add ins
SPUnite17 Become a Developer Hero by Building Office Add ins
 
Cape Town MS Developer User Group: Xamarin Community Toolkit
Cape Town MS Developer User Group: Xamarin Community ToolkitCape Town MS Developer User Group: Xamarin Community Toolkit
Cape Town MS Developer User Group: Xamarin Community Toolkit
 
SPCA2013 - Building Windows Client Applications for SharePoint 2013
SPCA2013 - Building Windows Client Applications for SharePoint 2013SPCA2013 - Building Windows Client Applications for SharePoint 2013
SPCA2013 - Building Windows Client Applications for SharePoint 2013
 
Building appsinsilverlight4 part_1
Building appsinsilverlight4 part_1Building appsinsilverlight4 part_1
Building appsinsilverlight4 part_1
 
Windows 8 app bar and live tiles
Windows 8 app bar and live tilesWindows 8 app bar and live tiles
Windows 8 app bar and live tiles
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...
 
Getting Started with SharePoint Development
Getting Started with SharePoint DevelopmentGetting Started with SharePoint Development
Getting Started with SharePoint Development
 
Codemotion 2013 - Designing complex applications using html5 and knockoutjs
Codemotion 2013 - Designing complex applications using html5 and knockoutjsCodemotion 2013 - Designing complex applications using html5 and knockoutjs
Codemotion 2013 - Designing complex applications using html5 and knockoutjs
 
tTecniche di sviluppo mobile per share point 2013 e office 365
tTecniche di sviluppo mobile per share point 2013 e office 365 tTecniche di sviluppo mobile per share point 2013 e office 365
tTecniche di sviluppo mobile per share point 2013 e office 365
 
What's new in Xamarin.Forms
What's new in Xamarin.FormsWhat's new in Xamarin.Forms
What's new in Xamarin.Forms
 
COB - PowerApps - the good, the bad and the ugly - early 2018
COB - PowerApps - the good, the bad and the ugly - early 2018COB - PowerApps - the good, the bad and the ugly - early 2018
COB - PowerApps - the good, the bad and the ugly - early 2018
 
Best Practices Configuring And Developing Share Point Solutions
Best Practices Configuring And Developing Share Point SolutionsBest Practices Configuring And Developing Share Point Solutions
Best Practices Configuring And Developing Share Point Solutions
 
Monkey Conf 2020: Xamarin Community Toolkit: More possibilities with Xamarin....
Monkey Conf 2020: Xamarin Community Toolkit: More possibilities with Xamarin....Monkey Conf 2020: Xamarin Community Toolkit: More possibilities with Xamarin....
Monkey Conf 2020: Xamarin Community Toolkit: More possibilities with Xamarin....
 
STUG-Client Object Model SharePoint 2010
STUG-Client Object Model SharePoint 2010STUG-Client Object Model SharePoint 2010
STUG-Client Object Model SharePoint 2010
 
Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app
 
Building a Twitter App with Silverlight 3 - Part 2
Building a Twitter App with Silverlight 3 - Part 2Building a Twitter App with Silverlight 3 - Part 2
Building a Twitter App with Silverlight 3 - Part 2
 
Come riprogettare le attuali farm solution di share point con il nuovo modell...
Come riprogettare le attuali farm solution di share point con il nuovo modell...Come riprogettare le attuali farm solution di share point con il nuovo modell...
Come riprogettare le attuali farm solution di share point con il nuovo modell...
 
Windows phone app development overview
Windows phone app development overviewWindows phone app development overview
Windows phone app development overview
 
Sviluppare app per office
Sviluppare app per officeSviluppare app per office
Sviluppare app per office
 

Similar to Twelve ways to make your apps suck less

Windows 8 DevUnleashed - Session 1
Windows 8 DevUnleashed - Session 1Windows 8 DevUnleashed - Session 1
Windows 8 DevUnleashed - Session 1
drudolph11
 
Learn Electron for Web Developers
Learn Electron for Web DevelopersLearn Electron for Web Developers
Learn Electron for Web Developers
Kyle Cearley
 
IBM Connect 2016 - Break out of the Box
IBM Connect 2016 - Break out of the BoxIBM Connect 2016 - Break out of the Box
IBM Connect 2016 - Break out of the Box
Karl-Henry Martinsson
 
DODN2009 - Jump Start Silverlight
DODN2009 - Jump Start SilverlightDODN2009 - Jump Start Silverlight
DODN2009 - Jump Start Silverlight
Clint Edmonson
 
Why meteor
Why meteorWhy meteor
Why meteor
Jonathan Perl
 
Android Workshop
Android WorkshopAndroid Workshop
Android Workshop
Junda Ong
 
Automatic deployment on .NET web stack (Minsk .NET meetup 12.02.14)
Automatic deployment on .NET web stack (Minsk .NET meetup 12.02.14)Automatic deployment on .NET web stack (Minsk .NET meetup 12.02.14)
Automatic deployment on .NET web stack (Minsk .NET meetup 12.02.14)
Is Antipov
 
Building Your First Store App with XAML and C#
Building Your First Store App with XAML and C#Building Your First Store App with XAML and C#
Building Your First Store App with XAML and C#
Tamir Dresher
 
Splunk app for stream
Splunk app for stream Splunk app for stream
Splunk app for stream
csching
 
Windows 8 Metro apps and the outside world
Windows 8 Metro apps and the outside worldWindows 8 Metro apps and the outside world
Windows 8 Metro apps and the outside world
Prabhakaran Soundarapandian
 
Windows 8 Apps and the Outside World
Windows 8 Apps and the Outside WorldWindows 8 Apps and the Outside World
Signal R 2015
Signal R 2015Signal R 2015
Signal R 2015
Mihai Coscodan
 
Building Rich Internet Apps with Silverlight 2
Building Rich Internet Apps with Silverlight 2Building Rich Internet Apps with Silverlight 2
Building Rich Internet Apps with Silverlight 2
Microsoft Iceland
 
Cross site scripting
Cross site scriptingCross site scripting
Cross site scripting
Dilan Warnakulasooriya
 
Streaming Sensor Data Slides_Virender
Streaming Sensor Data Slides_VirenderStreaming Sensor Data Slides_Virender
Streaming Sensor Data Slides_Virender
vithakur
 
IIS Web Ecosystem
IIS Web EcosystemIIS Web Ecosystem
IIS Web Ecosystem
Kenny Abdiel Maita
 
Scaling asp.net websites to millions of users
Scaling asp.net websites to millions of usersScaling asp.net websites to millions of users
Scaling asp.net websites to millions of users
oazabir
 
ITCamp 2013 - Raffaele Rialdi - Windows Runtime (WinRT) deep dive
ITCamp 2013 - Raffaele Rialdi - Windows Runtime (WinRT) deep diveITCamp 2013 - Raffaele Rialdi - Windows Runtime (WinRT) deep dive
ITCamp 2013 - Raffaele Rialdi - Windows Runtime (WinRT) deep dive
ITCamp
 
Building Social Enterprise with Ruby and Salesforce
Building Social Enterprise with Ruby and SalesforceBuilding Social Enterprise with Ruby and Salesforce
Building Social Enterprise with Ruby and Salesforce
Raymond Gao
 
Advanced iOS Build Mechanics, Sebastien Pouliot
Advanced iOS Build Mechanics, Sebastien PouliotAdvanced iOS Build Mechanics, Sebastien Pouliot
Advanced iOS Build Mechanics, Sebastien Pouliot
Xamarin
 

Similar to Twelve ways to make your apps suck less (20)

Windows 8 DevUnleashed - Session 1
Windows 8 DevUnleashed - Session 1Windows 8 DevUnleashed - Session 1
Windows 8 DevUnleashed - Session 1
 
Learn Electron for Web Developers
Learn Electron for Web DevelopersLearn Electron for Web Developers
Learn Electron for Web Developers
 
IBM Connect 2016 - Break out of the Box
IBM Connect 2016 - Break out of the BoxIBM Connect 2016 - Break out of the Box
IBM Connect 2016 - Break out of the Box
 
DODN2009 - Jump Start Silverlight
DODN2009 - Jump Start SilverlightDODN2009 - Jump Start Silverlight
DODN2009 - Jump Start Silverlight
 
Why meteor
Why meteorWhy meteor
Why meteor
 
Android Workshop
Android WorkshopAndroid Workshop
Android Workshop
 
Automatic deployment on .NET web stack (Minsk .NET meetup 12.02.14)
Automatic deployment on .NET web stack (Minsk .NET meetup 12.02.14)Automatic deployment on .NET web stack (Minsk .NET meetup 12.02.14)
Automatic deployment on .NET web stack (Minsk .NET meetup 12.02.14)
 
Building Your First Store App with XAML and C#
Building Your First Store App with XAML and C#Building Your First Store App with XAML and C#
Building Your First Store App with XAML and C#
 
Splunk app for stream
Splunk app for stream Splunk app for stream
Splunk app for stream
 
Windows 8 Metro apps and the outside world
Windows 8 Metro apps and the outside worldWindows 8 Metro apps and the outside world
Windows 8 Metro apps and the outside world
 
Windows 8 Apps and the Outside World
Windows 8 Apps and the Outside WorldWindows 8 Apps and the Outside World
Windows 8 Apps and the Outside World
 
Signal R 2015
Signal R 2015Signal R 2015
Signal R 2015
 
Building Rich Internet Apps with Silverlight 2
Building Rich Internet Apps with Silverlight 2Building Rich Internet Apps with Silverlight 2
Building Rich Internet Apps with Silverlight 2
 
Cross site scripting
Cross site scriptingCross site scripting
Cross site scripting
 
Streaming Sensor Data Slides_Virender
Streaming Sensor Data Slides_VirenderStreaming Sensor Data Slides_Virender
Streaming Sensor Data Slides_Virender
 
IIS Web Ecosystem
IIS Web EcosystemIIS Web Ecosystem
IIS Web Ecosystem
 
Scaling asp.net websites to millions of users
Scaling asp.net websites to millions of usersScaling asp.net websites to millions of users
Scaling asp.net websites to millions of users
 
ITCamp 2013 - Raffaele Rialdi - Windows Runtime (WinRT) deep dive
ITCamp 2013 - Raffaele Rialdi - Windows Runtime (WinRT) deep diveITCamp 2013 - Raffaele Rialdi - Windows Runtime (WinRT) deep dive
ITCamp 2013 - Raffaele Rialdi - Windows Runtime (WinRT) deep dive
 
Building Social Enterprise with Ruby and Salesforce
Building Social Enterprise with Ruby and SalesforceBuilding Social Enterprise with Ruby and Salesforce
Building Social Enterprise with Ruby and Salesforce
 
Advanced iOS Build Mechanics, Sebastien Pouliot
Advanced iOS Build Mechanics, Sebastien PouliotAdvanced iOS Build Mechanics, Sebastien Pouliot
Advanced iOS Build Mechanics, Sebastien Pouliot
 

More from Fons Sonnemans

Xamarin Froms 4.x
Xamarin Froms 4.xXamarin Froms 4.x
Xamarin Froms 4.x
Fons Sonnemans
 
Writing High Peformance C# 7 Code
Writing High Peformance C# 7 CodeWriting High Peformance C# 7 Code
Writing High Peformance C# 7 Code
Fons Sonnemans
 
Coding for kids - TechDays 2017
Coding for kids - TechDays 2017Coding for kids - TechDays 2017
Coding for kids - TechDays 2017
Fons Sonnemans
 
TechDays 2016 - Developing websites using asp.net core mvc6 and entity framew...
TechDays 2016 - Developing websites using asp.net core mvc6 and entity framew...TechDays 2016 - Developing websites using asp.net core mvc6 and entity framew...
TechDays 2016 - Developing websites using asp.net core mvc6 and entity framew...
Fons Sonnemans
 
Coding for kids - TechDaysNL 2015
Coding for kids - TechDaysNL 2015Coding for kids - TechDaysNL 2015
Coding for kids - TechDaysNL 2015
Fons Sonnemans
 
Making money with apps
Making money with appsMaking money with apps
Making money with apps
Fons Sonnemans
 

More from Fons Sonnemans (6)

Xamarin Froms 4.x
Xamarin Froms 4.xXamarin Froms 4.x
Xamarin Froms 4.x
 
Writing High Peformance C# 7 Code
Writing High Peformance C# 7 CodeWriting High Peformance C# 7 Code
Writing High Peformance C# 7 Code
 
Coding for kids - TechDays 2017
Coding for kids - TechDays 2017Coding for kids - TechDays 2017
Coding for kids - TechDays 2017
 
TechDays 2016 - Developing websites using asp.net core mvc6 and entity framew...
TechDays 2016 - Developing websites using asp.net core mvc6 and entity framew...TechDays 2016 - Developing websites using asp.net core mvc6 and entity framew...
TechDays 2016 - Developing websites using asp.net core mvc6 and entity framew...
 
Coding for kids - TechDaysNL 2015
Coding for kids - TechDaysNL 2015Coding for kids - TechDaysNL 2015
Coding for kids - TechDaysNL 2015
 
Making money with apps
Making money with appsMaking money with apps
Making money with apps
 

Recently uploaded

Demystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through StorytellingDemystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through Storytelling
Enterprise Knowledge
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
DianaGray10
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
operationspcvita
 
Day 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio FundamentalsDay 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio Fundamentals
UiPathCommunity
 
"What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w..."What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w...
Fwdays
 
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham HillinQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
LizaNolte
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
Neo4j
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
UiPathCommunity
 
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
DanBrown980551
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Ukraine
 
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin..."$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
Fwdays
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
Ajin Abraham
 
Christine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptxChristine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptx
christinelarrosa
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
BibashShahi
 
Introducing BoxLang : A new JVM language for productivity and modularity!
Introducing BoxLang : A new JVM language for productivity and modularity!Introducing BoxLang : A new JVM language for productivity and modularity!
Introducing BoxLang : A new JVM language for productivity and modularity!
Ortus Solutions, Corp
 
AWS Certified Solutions Architect Associate (SAA-C03)
AWS Certified Solutions Architect Associate (SAA-C03)AWS Certified Solutions Architect Associate (SAA-C03)
AWS Certified Solutions Architect Associate (SAA-C03)
HarpalGohil4
 

Recently uploaded (20)

Demystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through StorytellingDemystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through Storytelling
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
 
Day 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio FundamentalsDay 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio Fundamentals
 
"What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w..."What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w...
 
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham HillinQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
 
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
 
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin..."$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
 
Christine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptxChristine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptx
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
 
Introducing BoxLang : A new JVM language for productivity and modularity!
Introducing BoxLang : A new JVM language for productivity and modularity!Introducing BoxLang : A new JVM language for productivity and modularity!
Introducing BoxLang : A new JVM language for productivity and modularity!
 
AWS Certified Solutions Architect Associate (SAA-C03)
AWS Certified Solutions Architect Associate (SAA-C03)AWS Certified Solutions Architect Associate (SAA-C03)
AWS Certified Solutions Architect Associate (SAA-C03)
 

Twelve ways to make your apps suck less

  • 1. Twelve ways to make your apps suck less Fons Sonnemans @fonssonnemans © Reflection IT BV. All rights reserved.
  • 2. Fons Sonnemans •Software Development Consultant •Programming Languages •Clipper, Smalltalk, Visual Basic, C# •Platforms •Windows Forms, ASP.NET (Web Forms, MVC), XAML (WPF, Silverlight, Windows Phone, Windows 8) •Databases •MS SQL Server, Oracle •Role •Trainer, Coach, Advisor, Architect, Designer, Developer •More info: www.reflectionit.nl 2
  • 3. My Phone Apps •> 775K downloads 3
  • 4. My Windows Apps > 1.8 million downloads 4
  • 5. Topics 1.Create Universal Apps 2.Start with a Design not Code 3.Design proper Visual Assets 4.Create custom themes 5.Be mobile 6.Reviews are important 7.Use Vectors and Fonts 8.Performance is key! 9.Localize your app 10.Use Data Binding and MVVM 11.Learn Blend 12.Cache your first page 5
  • 6. 1. Create Universal Apps •Be prepared for Windows 10 •Connect your Windows Phone app with the Windows 8 app •Share Roaming data across platforms •Share code •Portable Class Libraries (PCL) •Shared projects •File linking 6
  • 7. IsTextScaleFactorEnabled <StackPanel Margin="10"> <Button Content="Button 1" /> <TextBlock Text="Hello World 1" FontSize="20" Margin="0,10" /> <TextBox Text="TextBox 1" /> <Button Content="Button 2" IsTextScaleFactorEnabled="False" Margin="0,40,0,0" /> <TextBlock Text="Hello World 2" IsTextScaleFactorEnabled="False" FontSize="20" Margin="0,10" /> <TextBox Text="TextBox 2" IsTextScaleFactorEnabled="False" /> </StackPanel> 8
  • 8. 2. Start with a Design not Code http://design.windows.com •Modern Design •RTFM (Principles, Guidelines, UX Patterns) •Vision and process •Discover your best idea •Identity •Create a beautiful visual identity •Gallery •Learn (“steal”) from the best/competition 9
  • 9. 3. Design proper Visual Assets •Visual Assets •Tiles, SplashScreen, Icons, etc •All Scale Factors •Windows 80, 100, 140, 180 •Phone 100, 140, 240 •Use vectors •Expression Design (Free), Adobe Illustrator 10
  • 10. 3. Design proper Visual Assets •Expression Design Demo 11
  • 11. 4. Create Custom Themes 12
  • 12. 4. Create Custom Themes •Windows •C:Program Files (x86)Windows Kits8.1IncludeWinRTXamlDesignGeneric.xaml •Windows Phone •C:Program Files (x86)Windows Phone Kits8.1IncludeabiXamlDesignGeneric.xaml •Use the ThemeManager of Dave Smits •http://www.familie-smits.com/theming-in-a-universal- app •Use HAMMER.Pants for Windows •https://github.com/Code52/HAMMER 13
  • 13. 5. Be Mobile •HttpClient •Resolve the correct type •System.Net.Http.HttpClient is slightly different in the most basic use, and quite different when you get into advanced work. •Always make sure you’re using Windows.Web.Http •System.Net.Http shows up first 14
  • 14. 5. Be Mobile •Mobile devices are often connected to poor quality network connections •Best chance of success in network data transfers achieved by: •Keep data volumes as small as possible •Use the most compact data serialization available (use JSON instead of XML) •Avoid large data transfers •Avoid transferring redundant data •Design your protocol to only transfer precisely the data you need and no more
  • 15. Network Awareness in your apps •Making Decisions based on Data Connections •Mobile apps shouldn’t diminish the user experience by trying to send or receive data in the absence of network connectivity •Mobile apps should be intelligent about performing heavy data transfers only when the appropriate connectivity is available •Use the NetworkInterfaceType object to detect network type and speed •Subscribe to the NetworkChange event to detect when network state changes Make your app aware of its networking environment and state!
  • 16. 17 Network Information in Windows Runtime private bool IsOnWiFi() { ConnectionProfile InternetConnectionProfile = NetworkInformation.GetInternetConnectionProfile(); if (internetConnectionProfile == null) return false; return InternetConnectionProfile.IsWlanConnectionProfile; } private bool IsConnectedtoDataRoaming() { bool isRoaming = false; ConnectionProfile internetConnectionProfile = NetworkInformation.GetInternetConnectionProfile(); if (internetConnectionProfile != null && internetConnectionProfile.IsWwanConnectionProfile) { ConnectionCost cc = internetConnectionProfile.GetConnectionCost(); isRoaming = cc.Roaming; // See if user is currently roaming } return isRoaming; } private void AddEventHandlers() { // NetworkStatusChanged fires when the network status changes for a connection NetworkInformation.NetworkStatusChanged += OnNetworkStatusChanged; }
  • 17. What is Data Sense? •Data Sense is a set of components designed to help: •End users: understand and manage data consumption •Mobile Operators: reduce cellular consumption & optimize connectivity •3rd party developers and ISVs: Build smart data consuming applications 18
  • 18. What Makes Up “Data Sense”? The Data Sense platform Data Sense (UI) Browser Optimization Service WiFi hotspot Mapping
  • 19. Content Streaming Scenario - 1 of 2 ConnectionProfile internetConnectionProfile = NetworkInformation.GetInternetConnectionProfile(); if (internetConnectionProfile != null) { if (internetConnectionProfile.IsWlanConnectionProfile) { // connected on WiFi interface; double check it is not a metered WiFi hotspot ConnectionCost cc = internetConnectionProfile.GetConnectionCost(); if ((NetworkCostType.Unknown == cc.NetworkCostType) || (NetworkCostType.Unrestricted == cc.NetworkCostType)) { // assume free network; connect and start streaming content } } else if (internetConnectionProfile.IsWwanConnectionProfile) { ...
  • 20. 22 Content Streaming Scenario – 2 of 2 else if (InternetConnectionProfile.IsWwanConnectionProfile) { ConnectionCost cc = InternetConnectionProfile.GetConnectionCost(); // check the type of data plan - make sure user is not currently roaming if (!cc.Roaming) { if ((NetworkCostType.Unknown == cc.NetworkCostType) || (NetworkCostType.Unrestricted == cc.NetworkCostType)) { // assume free network; connect and start streaming content } else if (NetworkCostType.Fixed == cc.NetworkCostType) { // make sure user not currently over limit or near limit if ((!cc.OverDataLimit) && (!cc.ApproachingDataLimit)) { // connect and start streaming content } } } } Source: http://channel9.msdn.com/Events/TechEd/NorthAmerica/2014/WIN-B326
  • 21. 6. Reviews are important 23
  • 22. 6. Reviews are important 24
  • 23. 6. Reviews are important 25
  • 24. 6. Reviews are important 26
  • 25. 7. Use Vectors and Fonts •Use Bitmaps for Images •JPG for large photos •PNG for perfect quality •Scale 100, 140, 180 •Use Vectors and Fonts for “Icons” •Use <Path data=“” /> for Vector •Use FontIcon or TextBlock for Fonts •AppBarButton supports FontIcon & PathIcon 27
  • 27. Vector •ArtBoard 40x40 •Icon Max Width or Height 24 •Select All -> Export – XAML Silverlight 4 / WPF Canvas •Open .xaml & copy Path
  • 28. Demo <Page x:Class="VectorAndFontDemo.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:VectorAndFontDemo" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Page.BottomAppBar> <CommandBar Background="#FFFFB900" IsOpen="True"> <AppBarButton Label="AppBarButton"> <AppBarButton.Icon> <FontIcon FontFamily="Assets/Fonts/untitled-font-1.ttf#untitled-font-1" Glyph="d" /> </AppBarButton.Icon> </AppBarButton> <AppBarButton Label="AppBarButton"> <AppBarButton.Icon> <PathIcon Data="F1 M20.0017,8 C21.6588,8 23.0021,9.34333 23.0021,11.0004 C23.0021,12.111 22.3987,13.0807 21.5018,13.5995 L21.5018,27.3629 C23.9769,26.8976 26.155,25.2984 27.6868,23.0021 L25.7525,23.0021 L29.0029,16.5013 L32.0033,23.0021 L30.3772,23.0021 C28.8669,27.6635 24.7918,31.0032 20.0017,31.0032 C15.2115,31.0032 11.1364,27.6635 9.62615,23.0021 L8,23.0021 L11.0004,16.5013 L14.2508,23.0021 L12.3166,23.0021 C13.8483,25.2984 16.0263,26.8975 18.5014,27.3629 L18.5014,13.5994 C17.6046,13.0806 17.0013,12.111 17.0013,11.0004 C17.0013,9.34333 18.3446,8 20.0017,8 z M20.0017,10.0003 C19.4493,10.0003 19.0015,10.4481 19.0015,11.0004 C19.0015,11.5528 19.4493,12.0006 20.0017,12.0006 C20.554,12.0006 21.0018,11.5528 21.0018,11.0004 C21.0018,10.4481 20.554,10.0003 20.0017,10.0003 z" /> </AppBarButton.Icon> </AppBarButton> </CommandBar> </Page.BottomAppBar> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Viewbox Height="200" Width="200" VerticalAlignment="Center" HorizontalAlignment="Center"> <FontIcon FontFamily="Assets/Fonts/untitled-font-1.ttf#untitled-font-1" Glyph="c" /> </Viewbox> </Grid> </Page> 30
  • 29. Links •Vectors •http://modernuiicons.com •http://materialdesignicons.com/ •http://thenounproject.com •http://www.thexamlproject.com •http://www.syncfusion.com/downloads/metrostudio •Fonts •http://msdn.microsoft.com/en- us/library/windows/apps/jj841126.aspx •http://www.geekchamp.com/icon-explorer/introduction •http://www.fontello.com/ •http://fontastic.me
  • 31. 9. Localize your app •Offering your app in English only will only cover about 25% of Windows Phone customers, though it covers a larger percentage of tablets and PCs users. Adding Spanish, French, Mandarin, Russian and German increases coverage to more than 75% of the base. http://blogs.windows.com/buildingapps/2014/09/29/windows-and-windows- phone-store-trends-september-2014-update/ 33
  • 32. 10. Use Data Binding and MVVM •Motivations: •Reduces complexity with Model to UI integration •Separation of concerns •Clear Designer-Developer separation •Makes code more Unit testable •Approach: •Split the UI architecture into Model, View and View- Model •Model: Represents the data •View : UI defined declaratively in XAML •View Model: Specialization of the Model that View uses for data binding
  • 33. Model View ViewModel View (XAML UserControls + CodeBehind) ViewModel (State + Operations) DataBinding Commands Events / Messages Model ("Data") DataBinding
  • 34. 11. Learn Blend •Layout •Animations •Styling •Templating •Resources •Data Binding •Sample Data •Visual States •Behaviors 36
  • 35. 12. Cache your first page public sealed partial class HubPage : Page { private readonly NavigationHelper navigationHelper; private readonly ObservableDictionary defaultViewModel = new ObservableDictionary(); private readonly ResourceLoader resourceLoader = ResourceLoader.GetForCurrentView("Resources"); public HubPage() { this.InitializeComponent(); // Hub is only supported in Portrait orientation DisplayInformation.AutoRotationPreferences = DisplayOrientations.Portrait; this.NavigationCacheMode = NavigationCacheMode.Required; this.navigationHelper = new NavigationHelper(this); this.navigationHelper.LoadState += this.NavigationHelper_LoadState; this.navigationHelper.SaveState += this.NavigationHelper_SaveState; } 37
  • 37. Copyright •Copyright © by Reflection IT BV. All rights reserved. •Some parts quote Microsoft public materials. •This presentation, its workshops, labs and related materials may not be distributed or used in any form or manner without prior written permission by the author. 39