Upload
tamir-dresher
View
825
Download
4
Embed Size (px)
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/
Citation preview
Tamir DresherSenior Software ArchitectJanuary 27, 2014
Building Your First Store App using XAML
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.
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
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
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
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
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
• Attributes
<StackPanel> <Button>Click me!</Button>
</StackPanel>
<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
Step 1: Creating the project & understand solution’s layout
Identifies that app is targeted for Windows 8.1
Step 1: Creating the project & understand solution’s layout
References WinRT
Step 1: Creating the project & understand solution’s layout
Folder for assets of the app
Step 1: Creating the project & understand solution’s layout
Typically created by a wizard, common classes to be shared across the project
Step 1: Creating the project & understand solution’s layout
Starting point of the application. It can be changed into Package.appxmanifest
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.
Step 1: Creating the project & understand solution’s layout
Appxmainfest.Configure the permissions, Capabilities and other about the App
Step 1: Creating the project & understand solution’s layout
Certificate for development & test
24
The Main View
25
The Main View
(0,1)(0,0)
(1,0) (1,1)
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>
27
Demo
Creating The View
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
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
GridView
MainPageViewModel
Items
TODO1 TODO2TODOView
TODOView
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
• 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;}
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
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>); }
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
Presenter contact detailsc: +972-52-4772946t: @tamir_dreshere: [email protected]: TamirDresher.comw: www.codevalue.net