Building Your First Store App with XAML and C#
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Building Your First Store App with XAML and C#

  • 1,107 views
Uploaded on

These are the slides from the webinar that was done on 27/01/2014 ...

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/

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,107
On Slideshare
1,097
From Embeds
10
Number of Embeds
1

Actions

Shares
Downloads
11
Comments
0
Likes
0

Embeds 10

http://www.slideee.com 10

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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