building your first store app with xaml and c#
DESCRIPTION
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/TRANSCRIPT
![Page 1: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/1.jpg)
Tamir DresherSenior Software ArchitectJanuary 27, 2014
Building Your First Store App using XAML
![Page 2: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/2.jpg)
About Me
• Software architect, consultant and instructor• Software Engineering Lecturer @ Ruppin Academic Center• Technology addict• 10 years of experience• .NET and Native Windows Programming
@[email protected]://www.TamirDresher.com.
![Page 3: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/3.jpg)
3
Agenda
• Windows 8.1 platform (briefly)• Basic XAML • Your First Store App
![Page 4: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/4.jpg)
4
Agenda
• Windows 8.1 platform (briefly)• Basic XAML • Your First Store App
![Page 5: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/5.jpg)
5
Windows 8 Platform
Modern UI Apps
HTMLJavaScrip
t
CC++
C#VB
Desktop Apps
Win32
.NET / SL
Internet Explore
r
Communication
& Data
Application Model
Devices & Printing
WinRT APIsGraphics &
Media
Syst
em
Serv
ices
JavaScript(Chakra)
CC++
C#VB
XAML HTML / CSSVie
wM
odel
Contr
olle
r
Windows Core OS ServicesCore
![Page 6: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/6.jpg)
6
Windows Store app life cycle
App Excecution
appsuspended
suspendApp
terminatedLow
resources
Code ExecutionNo code
excecutionApp not running
resume
App gets 5s to handle suspend
App is not notified before
termination
Apps are notified when they have been resumed
Start app
Splash screen
Process status
Logic state of the apphttp://msdn.microsoft.com/en-us/library/windows/apps/hh464925.aspx
![Page 7: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/7.jpg)
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.)
7
![Page 8: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/8.jpg)
8
Agenda
• Windows 8/8.1 platform (briefly)• Basic XAML • Your First Store App
![Page 9: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/9.jpg)
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
![Page 10: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/10.jpg)
10
Basic XAML Syntax (1)
• Elements
• Attributes
<StackPanel> <Button>Click me!</Button>
</StackPanel>
<Button Background="Blue" Content="This is a button"/>
![Page 11: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/11.jpg)
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>
![Page 12: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/12.jpg)
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>
![Page 13: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/13.jpg)
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>
![Page 14: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/14.jpg)
14
Agenda
• Windows 8/8.1 platform (briefly)• Basic XAML • Your First Store App
![Page 15: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/15.jpg)
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
![Page 16: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/16.jpg)
Step 1: Creating the project & understand solution’s layout
Identifies that app is targeted for Windows 8.1
![Page 17: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/17.jpg)
Step 1: Creating the project & understand solution’s layout
References WinRT
![Page 18: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/18.jpg)
Step 1: Creating the project & understand solution’s layout
Folder for assets of the app
![Page 19: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/19.jpg)
Step 1: Creating the project & understand solution’s layout
Typically created by a wizard, common classes to be shared across the project
![Page 20: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/20.jpg)
Step 1: Creating the project & understand solution’s layout
Starting point of the application. It can be changed into Package.appxmanifest
![Page 21: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/21.jpg)
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.
![Page 22: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/22.jpg)
Step 1: Creating the project & understand solution’s layout
Appxmainfest.Configure the permissions, Capabilities and other about the App
![Page 23: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/23.jpg)
Step 1: Creating the project & understand solution’s layout
Certificate for development & test
![Page 24: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/24.jpg)
24
The Main View
![Page 25: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/25.jpg)
25
The Main View
(0,1)(0,0)
(1,0) (1,1)
![Page 26: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/26.jpg)
26
The Main View
(0,1)(0,0)
(1,0) (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>
![Page 27: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/27.jpg)
27
Demo
Creating The View
![Page 28: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/28.jpg)
Model
The MVVM Pattern
• 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
View ViewModel
Commands,Properties
Events Events
Methods,Properties
ModelModel
![Page 29: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/29.jpg)
29
ToDoItem
![Page 30: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/30.jpg)
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}“/>
![Page 31: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/31.jpg)
31
DataBinding
• <GridView ItemsSource=“{Binding Items}” />
MainPage
GridView
MainPageViewModel
ToDoItems
![Page 32: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/32.jpg)
32
DataBinding
• <GridView ItemsSource=“{Binding Items}” />
MainPage
GridView
MainPageViewModel
Items
TODO1 TODO2TODOView
TODOView
![Page 33: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/33.jpg)
33
Demo
Creating the Binding
![Page 34: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/34.jpg)
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
![Page 35: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/35.jpg)
35
DataTemplate
<GridView ItemsSource="{Binding Items}"> <GridView.ItemTemplate> <DataTemplate> <!--Your Elements Goes Here--> </DataTemplate></GridView.ItemTemplate>
</GridView>
![Page 36: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/36.jpg)
36
Demo
Creating the DataTemplate
![Page 37: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/37.jpg)
37
ICommand
• Enables binding to an operation
• RelayCommad – implements ICommand and gives a generic way to create command using delegates
interface ICommand} bool CanExecute(object parameter); void Execute(object parameter); event EventHandler CanExecuteChanged;}
![Page 38: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/38.jpg)
38
Demo
Adding a New Item
![Page 39: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/39.jpg)
39
Search
• Search Charm
![Page 40: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/40.jpg)
40
Search – Add Capability
![Page 41: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/41.jpg)
41
Search – Set the Logic
1) Get the search pane and attach to it
var searchPane = SearchPane.GetForCurrentView();searchPane.SuggestionsRequested += OnSearchPaneSuggestionsRequested;
![Page 42: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/42.jpg)
42
Search – Set the Logic
2) Implement the search logic
A
void OnSearchPaneSuggestionsRequested(SearchPane sender, SearchPaneSuggestionsRequestedEventArgs e){ var request = e.Request; ... // Your Search Logic ... // Add suggestion to Search Pane – SearchPane can show up to 25 result request.SearchSuggestionCollection.AppendQuerySuggestion(<Result String>); }
![Page 43: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/43.jpg)
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
![Page 44: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/44.jpg)
44
Demo
Integrating Search
![Page 45: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/45.jpg)
45
What have we seen
• Developing Windows 8/8.1 App is Fun • Basic XAML• Basic Binding• Creating View and ViewModel• Adding Search Capability
![Page 46: Building Your First Store App with XAML and C#](https://reader035.vdocuments.site/reader035/viewer/2022062319/555ad944d8b42a024a8b4e3e/html5/thumbnails/46.jpg)
Presenter contact detailsc: +972-52-4772946t: @tamir_dreshere: [email protected]: TamirDresher.comw: www.codevalue.net