1. Windows 8 and Windows Phone 8
two platforms, multiple experiences
Adrian-Petre Marinică
• adrian.marinic
@adrianmarinica
a@live.com
adrian.marinica@maxcode.ro

2. Agenda
 Setting the expectations
 Use Case
 The platforms
 Demo
 Goals
 The techy stuff

3. Setting the expectations

4. User expectations – What a good app should
1. Work fast
2. Be easy to understand & use
75%
74%
57%
3. Be well designed
Speed
Usability
Yes
Design
No
Data provided by http://www.uxbooth.com

5. Use Case

6. Use Case – The request
 RSS reader with 5 IT related feeds.
 Enable / disable feeds.
 Ability to share application to friends.
 Available on both platforms, W8 &
WP8.

7. Use Case – The request
1 Windows 8 app
1 Windows Phone 8 app

8. Use Case – The goals
 Similar functionality
 Similar look & feel
 Proper User Experience
 Maximize code reuse

9. The platforms

10. The platforms
Windows Phone 8
Windows 8
 One handed touch
 Guaranteed hardware
(camera, accelerometer, etc.)
 One column of content
 Vertical scroll
 Small app bar
 Hardware back button
 No semantic zoom
 One or two-handed touch, mouse
 No guarantee of any specific
hardware, must check at run time
 Multiple columns of content
 Horizontal scroll
 Larger app bar
 On-screen back button
 Semantic zoom

11. The platforms
 Resource
management: similar
 App lifecycles: similar

12. The platforms – App Development
 Windows 8 development
 C# XAML
 C++ XAML
 JavaScript HTML
 Windows Phone 8 development
 C# XAML
 C++ XAML (limited)

13. The platforms – XAML Development
 XAML = Extensible Application Markup Language
 Control-based UI’s
 XML type syntax
 MVVM to the max

14. The platforms – MVVM

15. [DEMO]

16. Use Case – The request & the goals




RSS reader with IT related feeds.
Enable / disable feeds.
Ability to share application to friends.
Available on both platforms, W8 & WP8.




Similar functionality.
Similar look & feel.
Proper User Experience.
Maximize code reuse.

17. Maximize code reuse

18. Maximize code reuse – The problem
 We want to be fast.
 We want to be efficient.
 We want to reuse code in both apps.
 Class libraries are not supported in W8 and WP8. 

19. Maximize code reuse – The solution
"...for those people who are writing .NET and want
it to run on everything from Watches to Phones to
Tablets to Xboxen to Desktops to the Cloud, they
are enjoying what PCLs can offer."
Scott Hanselman

20. Portable Class Library (PCL)
 Library-type project in VisualStudio
 Used for building portable assemblies targeting multiple
platforms at the same time.
 Supports only a subset of features.

21. Portable Class Library (PCL) – Target frameworks
 .NET Framework
.NET4+ or .NET4.0.3+ or .NET4.5
 Silverlight
SL4+ or SL5
 Windows Phone
WP7+ or WP7.5+ or WP8
 .NET for Windows Store apps
 Xbox 360

22. Portable Class Library (PCL) – Features
Feature
.NET Framework
Windows
Store
Silverlight
Windows Phone
Xbox
360
Core
√
√
√
√
√
LINQ
√
√
√
√
IQueryable
√
√
√
7.5 and higher
Dynamic keyword
Only 4.5
√
√
Managed Extensibility Framework (MEF) √
√
√
Network Class Library (NCL)
√
√
√
√
Serialization
√
√
√
√
Windows Communication Foundation
(WCF)
√
√
√
√
Model-View-View Model (MVVM)
Only 4.5
√
√
√
Data annotations
Only 4.0.3 and 4.5 √
√
XLINQ
Only 4.0.3 and 4.5 √
√
System.Numerics
√
√
√
√
√

23. Portable Class Library (PCL) – MVVM
implementation
 MVVM Isolates the User
Interface from the
Business Logic.
 Model and ViewModel
implemented in a
Portable Class Library.
 Custom Views implemented separately in each project.

24. XAML Controls

25. XAML Controls
 Mostly specific to platform.
 Cannot be reused in multiple projects.
 Can be reused in the same project.
 Similar syntax between the two platforms.

26. RSS Reader

27. Classic RSS
reader
async Task<FeedData> GetAsync(string feedUri)
{
var client = new SyndicationClient();
var feedUri = new Uri(feedUriString);
var feed = await client.RetrieveFeedAsync(feedUri);
var articleList = new FeedData();
foreach (SyndicationItem item in feed.Items)
{
var article = ParseArticle(item);
articleList.Items.Add(feedItem);
}
return articleList;
}

28. PCL RSS reader
 Had to use HttpWebRequest 
 Had to use an AsyncCallback 
 Had to parse the XML manually 
 Managed to make it work 

29. PCL RSS reader
Request
View
Callback
Feede
r
Xml feed
Articles
Parser

30. Display the feeds in the UI

31. Display feeds
 Default App templates
 Pivot App – Windows Phone 8
 Split App – Windows 8
 MVVM
 One-Way data binding

32. Display feeds
void AddItemsToViewModel(List<Article> articles)
{
var collection = CreateCollection(articles);
CoreApplication.MainView
.CoreWindow
.Dispatcher
.RunAsync(
CoreDispatcherPriority.Normal,
() => _newsFeed.Add(collection));
}

33. Display feeds
void AddItemsToViewModel(List<Article> articles)
{
var collection = CreateCollection(articles);
Deployment.Current
.Dispatcher
.BeginInvoke(
() => _newsFeed.Add(collection));
}

34. Manage settings

35. Manage settings
Windows 8
 Added a UserControl
 Accessible through the
Settings charm
 Two-way data binding
Windows Phone 8
 Added a Page
 Accessible through the
ApplicationBar
 Two-way data binding

36. Manage settings
public ItemsPage() // constructor
{
SettingsPane.GetForCurrentView()
.CommandsRequested += SettingsReq;
}
void SettingsReq(SettingsPane sender, object args)
{
var handler = new UICommandInvokedHandler(ShowPanel);
var filter = new SettingsCommand("RSSFilter",
"Manage feeds",
handler);
args.Request.ApplicationCommands.Clear();
args.Request.ApplicationCommands.Add(filter);
}

37. Manage settings
void ShowSettings(object sender, EventArgs e)
{
this.NavigationService
.Navigate(new Uri("/Settings.xaml",
UriKind.Relative));
}

38. Manage settings
<StackPanel>
<ToggleSwitch Header="General news feed"
IsOn="{Binding ShowGeneral, Mode=TwoWay}" />
<ToggleSwitch Header="Gadgets news feed"
IsOn="{Binding ShowGadgets, Mode=TwoWay}" />
<ToggleSwitch Header="Cars news feed"
IsOn="{Binding ShowCars, Mode=TwoWay}" />
<ToggleSwitch Header="Health news feed"
IsOn="{Binding ShowHealth, Mode=TwoWay}" />
<ToggleSwitch Header="Security news feed"
IsOn="{Binding ShowSecurity, Mode=TwoWay}" />
</StackPanel>

39. Manage settings
<StackPanel>
<toolkit:ToggleSwitch Content="General"
IsChecked="{Binding ShowGeneral, Mode=TwoWay}" />
<toolkit:ToggleSwitch Content="Gadgets"
IsChecked="{Binding ShowGadgets, Mode=TwoWay}" />
<toolkit:ToggleSwitch Content="Cars"
IsChecked="{Binding ShowCars, Mode=TwoWay}" />
<toolkit:ToggleSwitch Content="Health"
IsChecked="{Binding ShowHealth, Mode=TwoWay}" />
<toolkit:ToggleSwitch Content="Security"
IsChecked="{Binding ShowSecurity, Mode=TwoWay}" />
</StackPanel>

40. Share application to friends

41. Share application to friends - Solutions
 Windows 8
 Enable share in application
 Set application as share
source
 Windows Phone 8
 Create a share task
(email, link, status, SMS, etc.)
 Set message details and
launch

42. Share app
public ItemsPage() // the constructor
{
this.DataTransferManager
.GetForCurrentView()
.DataRequested += DataRequestedHandler;
}
void DataRequestedHandler(object sender, object args)
{
args.Request.Data.Properties.Title = "IT Feeder";
args.Request.Data.SetText("Go to the marketplace
and download IT Feeder. It's great!");
}

43. Share app
args.Request.Data.SetText("Sample text");
args.Request.Data.SetBitmap(bitmapStream);
args.Request.Data.SetData(format, genericData);
args.Request.Data.SetHtmlFormat(htmlContent);
args.Request.Data.SetRtf(rtfContent);
args.Request.Data.SetStorageItems(filesAndFolders);
args.Request.Data.SetWebLink(webLink);

44. Share app
void ShareApp()
{
var smsTask = new SmsComposeTask();
smsTask.Body = "Go to the marketplace and
download IT Feeder.
It's great!";
smsTask.Show();
}

45. Summary

46. Summary
 Develop an app available on both platforms?



Doable: yes
Easy: not all the time
Limited: yes
 Offer similar experience on both platforms?



Doable: yes
Easy: yes
Limited: sometimes
Code
[VAL
UE]
[VAL
UE]
 Reuse code?



Doable: to some extent
Easy: yes
Limited: oh, yeah!
Not reused
Reused

47. Call for apps
We support you to become the winner.
Are you interested? Get in touch with us!
Contact us on: facebook.com/CodeCampRO
More info at: http://appcup.eu

48. Questions?
Questions?
Questions?
Questions?
Questions?
Questions?
Questions?
Questions?

49. Thanks for attending! 
Don’t forget to fill out your feedback forms.

50. Links
•
•
•
•
•
•
http://code.msdn.microsoft.com/windowsapps/RSS-Reader-affe3358
http://msdn.microsoft.com/en-us/magazine/dn296517.aspx
http://msdn.microsoft.com/en-us/library/windows/apps/hh465251.aspx
http://msdn.microsoft.com/en-us/library/gg597391.aspx
http://msdn.microsoft.com/en-us/library/vstudio/gg597391(v=vs.100).aspx
http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj681690(v=vs.105).aspx
•
•
http://code.msdn.microsoft.com/windowsapps/Windows-8-app-samples-3bea89c8
http://code.msdn.microsoft.com/wpapps/