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/
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.)
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>
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
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}“/>
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
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