These are the slides from the webinar that was done on 27/01/2014 during the webinar we learned basic XAML and created a simple TODO app from scartch the recording can be found on my blog:http://blogs.microsoft.co.il/iblogger/2014/01/28/webinar-building-your-first-store-app-with-xaml-and-c-hebrew/

1. Building Your First Store App using XAML
Tamir Dresher
Senior Software Architect
January 27, 2014

2. About Me
@tamir_dresher
tamirdr@codevalue.net
http://www.TamirDresher.com.
•
•
•
•
•
Software architect, consultant and instructor
Software Engineering Lecturer @ Ruppin Academic Center
Technology addict
10 years of experience
.NET and Native Windows Programming

3. Agenda
• Windows 8.1 platform (briefly)
• Basic XAML
• Your First Store App

4. Agenda
• Windows 8.1 platform (briefly)
• Basic XAML
• Your First Store App

5. Windows 8 Platform
Core
System Services
Model
Controller
View
Modern UI Apps
XAML
C
C++
Desktop Apps
HTML / CSS
C#
VB
JavaScript
(Chakra)
HTML
C
C++
C#
VB
Internet
Explorer
Win32
.NET
/ SL
JavaScript
WinRT APIs
Communication
& Data
Graphics &
Media
Application Model
Devices &
Printing
Windows Core OS Services

6. Windows Store app life cycle
Process status
App gets 5s to handle
suspend
App is not notified
before termination
suspend
Start app
resume
Low resources
App
terminated
Apps are notified
when they have been
resumed
Splash
screen
Code Execution
App not running
Logic state of the app
http://msdn.microsoft.com/en-us/library/windows/apps/hh464925.aspx

7. App Manifest (.appxmanifest)
• It declares explicitly endpoints for integration of the
app
• File (music/images/videos/documents…)
• Device (webcam, microphone, location, …)
• Network and identity (internet, private
network, credentials)
• File associations
• App contracts (search, share, etc.)

8. Agenda
• Windows 8/8.1 platform (briefly)
• Basic XAML
• Your First Store App

9. What is XAML?
• Extensible Application Markup Language
• Technology developed by Microsoft
• Markup language for definition of UI, it maps directly CLR
object instances into markup
• Used by Silverlight, WPF... and now for Win 8 apps, too
• Easy to use for who knows HTML or XML technologies

10. Basic XAML Syntax (1)
• Elements
<StackPanel>
<Button>Click me!</Button>
</StackPanel>
• Attributes
<Button Background="Blue" Content="This is a button"/>

11. Basic XAML Syntax (2)
• Property Element Syntax
<Button>
<Button.Background>
<SolidColorBrush Color="Blue"/>
</Button.Background>
<Button.Foreground>
<SolidColorBrush Color="Red"/>
</Button.Foreground>
<Button.Content>
This is a button
</Button.Content>
</Button>

12. Basic XAML Syntax - Events
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="ExampleNamespace.ExamplePage">
<Button Click="Button_Click">Click Me!</Button>
</Page>

13. Basic XAML Syntax – Markup Extensions
<Page.Resources>
<SolidColorBrush x:Key="MyBrush" Color="Gold"/>
<Style TargetType="Border" x:Key="PageBackground">
<Setter Property="Background" Value="Blue"/>
</Style>
...
</Page.Resources>
<StackPanel>
<Border Style="{StaticResource PageBackground}">
...
</Border>
</StackPanel>

14. Agenda
• Windows 8/8.1 platform (briefly)
• Basic XAML
• Your First Store App

15. Step 1: Creating the project & understand solution’s layout
Tip: Replace always Blank Page with Basic Page.
Basic Page adds some basic layouts and useful helpers

16. Step 1: Creating the project & understand solution’s layout
Identifies that app is targeted for
Windows 8.1

17. Step 1: Creating the project & understand solution’s layout
References WinRT

18. Step 1: Creating the project & understand solution’s layout
Folder for assets of the app

19. Step 1: Creating the project & understand solution’s layout
Typically created by a
wizard, common classes to be
shared across the project

20. Step 1: Creating the project & understand solution’s layout
Starting point of the application. It
can be changed into
Package.appxmanifest

21. Step 1: Creating the project & understand solution’s layout
Main Page of the project. I advice
to replace it always with a Basic
Page, instead of using a Blank
Page.

22. Step 1: Creating the project & understand solution’s layout
Appxmainfest.
Configure the
permissions, Capabilities and other
about the App

23. Step 1: Creating the project & understand solution’s layout
Certificate for development & test

24. The Main View
24

25. The Main View
(0,0)
25
(0,1)
(1,0)
(1,1)

26. The Main View
(0,0)
(1,0)
26
(0,1)
(1,1)
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<!--Your Elements Goes Here
<!--Grid.Row="<RowNumber>"
<!--Grid.Column="<ColumnNumber>"
<!--Grid.RowSpan="<RowsAmount>"
<!--Grid.ColumnSpan="<ColumnAmount>"
<!--Declares The Element Position
</Grid>
-->
-->
-->
-->
-->
-->

27. Demo
Creating The View

28. The MVVM Pattern
Methods,
Properties
Commands,
Properties
View
ViewModel
Events
Model
Model
Model
Events
• Model – View – ViewModel
• Separation of concerns
• Natural pattern for XAML based applications
– Data binding is key
• Enables developer-designer workflow
• Increases application testability and readability

29. ToDoItem

30. DataBinding
• the mechanism for establishing a connection between the UI
element and a Data source
• DataContext – Contains the default data source object
<Element Property=“{Binding Path=PropName}“/>

31. DataBinding
• <GridView ItemsSource=“{Binding Items}” />
MainPage
GridView
MainPageViewModel
ToDoItems

32. DataBinding
• <GridView ItemsSource=“{Binding Items}” />
MainPage
MainPageViewModel
GridView
TODO
View
TODO
View
Items
TODO1
TODO2

33. Demo
Creating the Binding

34. DataTemplate
• Configure the visual appearance of a data item
• Set the ItemTemplate For ItemsControls like:
ListBox, ComboBox, ListView, GridView etc.
• Default template (in case you don’t override) is just a TextBlock
• For complex objects – ToString() will be called

35. DataTemplate
<GridView ItemsSource="{Binding Items}">
<GridView.ItemTemplate>
<DataTemplate>
<!--Your Elements Goes Here-->
</DataTemplate>
</GridView.ItemTemplate>
</GridView>

36. Demo
Creating the DataTemplate

37. ICommand
• Enables binding to an operation
interface ICommand
bool CanExecute(object parameter
void Execute(object parameter ;
event EventHandler CanExecuteChanged;
}
• RelayCommad – implements ICommand and gives a generic
way to create command using delegates

38. Demo
Adding a New Item

39. Search
• Search Charm

40. Search – Add Capability

41. Search – Set the Logic
1) Get the search pane and attach to it
var searchPane = SearchPane.GetForCurrentView();
searchPane.SuggestionsRequested += OnSearchPaneSuggestionsRequested;

42. Search – Set the Logic
2) Implement the search logic
void OnSearchPaneSuggestionsRequested(SearchPane sender,
SearchPaneSuggestionsRequestedEventArgs e)
{
var request = e.Request;
...
// Your Search Logic
...
A
// Add suggestion to Search Pane – SearchPane can show up to 25 result
request.SearchSuggestionCollection.AppendQuerySuggestion(<Result String>);
}

43. Search – Handle the selected value
• in your App class override the method:
void OnSearchActivated(SearchActivatedEventArgs args
• args.QueryText contains the string that was
entered/selected in the SearchPane

44. Demo
Integrating Search

45. What have we seen
•
•
•
•
•
Developing Windows 8/8.1 App is Fun
Basic XAML
Basic Binding
Creating View and ViewModel
Adding Search Capability

46. Presenter contact details
c: +972-52-4772946
t: @tamir_dresher
e: tamirdr@codevalue.net
b: TamirDresher.com
w: www.codevalue.net