0
Building Your First Store App using XAML
Tamir Dresher
Senior Software Architect
January 27, 2014
About Me
@tamir_dresher
tamirdr@codevalue.net
http://www.TamirDresher.com.
•
•
•
•
•

Software architect, consultant and i...
Agenda
• Windows 8.1 platform (briefly)
• Basic XAML
• Your First Store App
Agenda
• Windows 8.1 platform (briefly)
• Basic XAML
• Your First Store App
Windows 8 Platform

Core

System Services

Model
Controller

View

Modern UI Apps
XAML
C
C++

Desktop Apps

HTML / CSS
C#
...
Windows Store app life cycle
Process status
App gets 5s to handle
suspend

App is not notified
before termination

suspend...
App Manifest (.appxmanifest)
• It declares explicitly endpoints for integration of the
app
• File (music/images/videos/doc...
Agenda
• Windows 8/8.1 platform (briefly)
• Basic XAML
• Your First Store App
What is XAML?
• Extensible Application Markup Language
• Technology developed by Microsoft
• Markup language for definitio...
Basic XAML Syntax (1)
• Elements
<StackPanel>
<Button>Click me!</Button>
</StackPanel>

• Attributes
<Button Background="B...
Basic XAML Syntax (2)
• Property Element Syntax
<Button>
<Button.Background>
<SolidColorBrush Color="Blue"/>
</Button.Back...
Basic XAML Syntax - Events
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas...
Basic XAML Syntax – Markup Extensions
<Page.Resources>
<SolidColorBrush x:Key="MyBrush" Color="Gold"/>
<Style TargetType="...
Agenda
• Windows 8/8.1 platform (briefly)
• Basic XAML
• Your First Store App
Step 1: Creating the project & understand solution’s layout
Tip: Replace always Blank Page with Basic Page.
Basic Page add...
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 acr...
Step 1: Creating the project & understand solution’s layout
Starting point of the application. It
can be changed into
Pack...
Step 1: Creating the project & understand solution’s layout
Main Page of the project. I advice
to replace it always with a...
Step 1: Creating the project & understand solution’s layout
Appxmainfest.
Configure the
permissions, Capabilities and othe...
Step 1: Creating the project & understand solution’s layout
Certificate for development & test
The Main View

24
The Main View

(0,0)

25

(0,1)

(1,0)

(1,1)
The Main View

(0,0)

(1,0)

26

(0,1)

(1,1)

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<Ro...
Demo
Creating The View
The MVVM Pattern
Methods,
Properties

Commands,
Properties

View

ViewModel
Events

Model
Model
Model

Events

• Model – V...
ToDoItem
DataBinding
• the mechanism for establishing a connection between the UI
element and a Data source
• DataContext – Contain...
DataBinding
• <GridView ItemsSource=“{Binding Items}” />
MainPage
GridView

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

MainPageViewModel

GridView
TODO
View

TODO
View

Items...
Demo
Creating the Binding
DataTemplate
• Configure the visual appearance of a data item
• Set the ItemTemplate For ItemsControls like:
ListBox, Comb...
DataTemplate
<GridView ItemsSource="{Binding Items}">
<GridView.ItemTemplate>
<DataTemplate>
<!--Your Elements Goes Here--...
Demo
Creating the DataTemplate
ICommand
• Enables binding to an operation
interface ICommand
bool CanExecute(object parameter
void Execute(object paramet...
Demo
Adding a New Item
Search
• Search Charm
Search – Add Capability
Search – Set the Logic
1) Get the search pane and attach to it
var searchPane = SearchPane.GetForCurrentView();
searchPane...
Search – Set the Logic
2) Implement the search logic
void OnSearchPaneSuggestionsRequested(SearchPane sender,
SearchPaneSu...
Search – Handle the selected value
• in your App class override the method:
void OnSearchActivated(SearchActivatedEventArg...
Demo
Integrating Search
What have we seen
•
•
•
•
•

Developing Windows 8/8.1 App is Fun
Basic XAML
Basic Binding
Creating View and ViewModel
Addi...
Presenter contact details
c: +972-52-4772946
t: @tamir_dresher
e: tamirdr@codevalue.net
b: TamirDresher.com
w: www.codeval...
Upcoming SlideShare
Loading in...5
×

Building Your First Store App with XAML and C#

871

Published on

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/

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
871
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Building Your First Store App with XAML and C#"

  1. 1. Building Your First Store App using XAML Tamir Dresher Senior Software Architect January 27, 2014
  2. 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. 3. Agenda • Windows 8.1 platform (briefly) • Basic XAML • Your First Store App
  4. 4. Agenda • Windows 8.1 platform (briefly) • Basic XAML • Your First Store App
  5. 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. 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. 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. 8. Agenda • Windows 8/8.1 platform (briefly) • Basic XAML • Your First Store App
  9. 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. 10. Basic XAML Syntax (1) • Elements <StackPanel> <Button>Click me!</Button> </StackPanel> • Attributes <Button Background="Blue" Content="This is a button"/>
  11. 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. 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. 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. 14. Agenda • Windows 8/8.1 platform (briefly) • Basic XAML • Your First Store App
  15. 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. 16. Step 1: Creating the project & understand solution’s layout Identifies that app is targeted for Windows 8.1
  17. 17. Step 1: Creating the project & understand solution’s layout References WinRT
  18. 18. Step 1: Creating the project & understand solution’s layout Folder for assets of the app
  19. 19. Step 1: Creating the project & understand solution’s layout Typically created by a wizard, common classes to be shared across the project
  20. 20. Step 1: Creating the project & understand solution’s layout Starting point of the application. It can be changed into Package.appxmanifest
  21. 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. 22. Step 1: Creating the project & understand solution’s layout Appxmainfest. Configure the permissions, Capabilities and other about the App
  23. 23. Step 1: Creating the project & understand solution’s layout Certificate for development & test
  24. 24. The Main View 24
  25. 25. The Main View (0,0) 25 (0,1) (1,0) (1,1)
  26. 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. 27. Demo Creating The View
  28. 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. 29. ToDoItem
  30. 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. 31. DataBinding • <GridView ItemsSource=“{Binding Items}” /> MainPage GridView MainPageViewModel ToDoItems
  32. 32. DataBinding • <GridView ItemsSource=“{Binding Items}” /> MainPage MainPageViewModel GridView TODO View TODO View Items TODO1 TODO2
  33. 33. Demo Creating the Binding
  34. 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. 35. DataTemplate <GridView ItemsSource="{Binding Items}"> <GridView.ItemTemplate> <DataTemplate> <!--Your Elements Goes Here--> </DataTemplate> </GridView.ItemTemplate> </GridView>
  36. 36. Demo Creating the DataTemplate
  37. 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. 38. Demo Adding a New Item
  39. 39. Search • Search Charm
  40. 40. Search – Add Capability
  41. 41. Search – Set the Logic 1) Get the search pane and attach to it var searchPane = SearchPane.GetForCurrentView(); searchPane.SuggestionsRequested += OnSearchPaneSuggestionsRequested;
  42. 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. 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. 44. Demo Integrating Search
  45. 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. 46. Presenter contact details c: +972-52-4772946 t: @tamir_dresher e: tamirdr@codevalue.net b: TamirDresher.com w: www.codevalue.net
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×