RADNUGtro.xaml

1. RADNUG.metro.xaml 7-24-12 Matt Serbinski @aquaseal

2. what are we doing? Learning the basics of XAML syntax, controls, layout databinding styles, control templates, vsm Whats new in WinRT commanding surfaces listview, gridview, flipview, webview semantic zoom xaml metro

3. what is xaml? XAML => Extensible Application Markup Language initialize objects set properties on objects XAML builds upon XML valid xaml must be valid xml xaml is case-sensitive Generally used for UI development

4. xaml syntax Object element syntax <Button /> shorthand for: <Button></Button> Property element syntax <Button> <Button.Content> HelloWorld! </Button.Content> </Button> Attribute syntax <Button Content="Hello World!" />

5. namespaces Use keyword “xmlns:” for the attribute name Prefix with any name you would like Set the value to be “using:” followed by the specific code-backing namespace name xmlns:RADNUG.metro.xaml="using:RADNUG.metro.xaml“ “using:” is new in WinRT If the prefix contains more than 1 period VS 2012 will throw an exception

6. common xmlns:x namespace constructs x:Key Sets a unique user-defined key for each resource in a ResourceDictionary x:Class Specifies the code namespace and class name for the class that provides code-behind for a XAML page x:Name Specifies a run-time object name for the instance that exists in run-time code after an object element defined in XAML is processed x:Uid Identifies elements that should use localized resources for some of their property values x:Null Specifies null as a value for a property being set through a XAML attribute

7. xaml intrinsic data types x:Boolean corresponds to the Boolean data type case sensitive x:String corresponds to the String data type encoding for the string defaults to the surrounding XML encoding x:Double corresponds to the Double data type can use text value “NaN” (case sensitive) this is how "Auto" for layout behavior can be stored as a resource value x:Int32 corresponds to the Int32 data type treated as signed can include the minus (“-”) symbol for a negative integer

8. markup extensions { } {Binding} provides a data-bound property value such that the value is deferred until run time {StaticResource} provides a value for any XAML attribute by evaluating a reference to an already defined resource {TemplateBinding} links the value of a property in a control template to the value of some other exposed property on the templatedcontrol {RelativeSource} provides a means to specify the source of a binding in terms of a relative relationship in the run-time object graph Binding StaticResource TemplateBinding RelativeSource

9. winRT controls windows.ui.xaml.controls namespace *NEW

10. winRT text editing controls

11. winRTtext editing controls: behaviors *Context Menu

12. panels Look-less containers for displaying child elements StackPanel arranges child elements into a single line that can be oriented horizontally or vertically VirtualizingPanel virtualizes its visual children typically you derive from VirtualizingPanel:VirtualizingStackPanel WrapGrid positions child elements sequentially from left to right or top to bottom when elements extend beyond the container edge, elements are positioned in the next row or column VariableSizedWrapGrid provides a grid-style layout panel where each tile/cell can be a variable size based on content SwapChainBackgroundPanel implements a XAML layout surface target for Microsoft DirectX interoperation scenarios

13. layout XAML supports fluid layout through: horizontal / vertical stretching of elements HorizontalAlignment=“Stretch” VerticalAlignment=“Stretch” auto sizing elements Width=“Auto” star-sizing Width=“*” XAML supports fixed layout through: setting a pre-defined width / height fast and fluid

14. demo panels and layout

15. databinding Provides a simple way for apps to display and interact with data Updates only occur if you implement INotifyPropertyChanged

16. databinding: binding sources ElementName bind directly to another visual element RelativeSource set binding source relative to the position of the target StaticResource or any object reference Data context is inherited by all child elements set the source property to override data context

17. databinding: data flow {BindingMode=OneWay} updates the target property when the binding is created. Changes to the source object also propagate to the target {Binding Mode=OneTime} updates the target property when the binding is created {BindingMode=TwoWay} updates either the target or the source object when either changes. When the binding is created, the target property is updated from the source

18. converters Use code to translate data to match target and source data types Implement IValueConverter implement Convert modifies the source data before passing it to the target implement ConvertBack modifies the target data before passing it to the source

19. demo databinding

20. styles, control templates Style contains property setters that can be shared between instances of a type use BasedOn to get styles that have inheritance Control template customize a control's visual structure and visual behavior

21. vsm: app orientation states <!--Application Orientation States--> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="ApplicationViewStates"> <VisualState x:Name="FullScreenLandscape" /> <VisualState x:Name="Filled" /> <VisualState x:Name="FullScreenPortrait" /> <VisualState x:Name="Snapped" /> </VisualStateGroup> </VisualStateManager.VisualStateGroups> Manages states and the logic for transitioning between states for controls

22. vsm: button example <ControlTemplateTargetType="Button"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualStateGroup.Transitions> <!--Take one half second to transition to the PointerOver state--> <VisualTransition To="PointerOver" GeneratedDuration="0:0:0.5" /> </VisualStateGroup.Transitions> <VisualState x:Name="Normal" /> <!--Change the Background to red--> <VisualState x:Name="PointerOver"> <Storyboard> <ColorAnimationStoryboard.TargetName="ButtonBrush" Storyboard.TargetProperty="Color"  To="Red" /> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Grid.Background> <SolidColorBrush x:Name="ButtonBrush" Color="Green" /> </Grid.Background> </Grid> </ControlTemplate>

23. winRT controls – custom styles *NEW

24. demo style, control templates, vsm

25. commanding surfaces

26. list view, grid view, flip view

27. grouping, selecting and animating

28. demo list view, grid view, flip view

29. web view

30. demo web view

31. semantic zoom

32. demo semantic zoom

33. xamlquirks in winRT (release preview) Binding Mode is not TwoWay by default, it is OneWay Loaded is the only RoutedEvent supported in EventTriggers VS Editor reports a WindowsUIXamlBindingWrapper exception when binding anything to a control’s datacontext Set EnableDependentAnimation to true to animate properties that cannot be hardware accelerated New method argument property called CallerMemberNameAttributethat allows you to obtain the method or property name of the caller to the method (great forINotifyPropertyChanged) Missing: TileBrush, RadialGradientBrush, VisualBrush, ImageBrush’sTileModeproperty PriorityBinding, MultiBinding, StringFormat, TargetNullValue

34. demo XAML Spy

35. metro.next Next month continue winRT topics Homework work on ideas and storyboards for RADNUG.metro Upload to: http://sdrv.ms/PEYI90

36. resources – toolkits and tools Callisto https://github.com/timheuer/callisto WinRT Toolkit http://winrtxamltoolkit.codeplex.com XAML Spy http://www.xamlspy.com

37. resources Many graphics and info was taken from the Windows 8 Camp in a box, Release Preview Edition http://www.microsoft.com/en-us/download/details.aspx?id=29854 Guidelines for snapped and fill views http://msdn.microsoft.com/en-us/library/windows/apps/hh465371.aspx Metro style app guidelines http://msdn.microsoft.com/en-US/library/windows/apps/hh464920

38. resources XAML overview http://msdn.microsoft.com/en-us/library/windows/apps/Hh700354.aspx Basic XAML syntax guide http://msdn.microsoft.com/en-us/library/windows/apps/hh700351.aspx XAML object mapping specification (MS-XAML-2012) http://msdn.microsoft.com/en-us/library/hh857629(v=prot.10).aspx

39. thank you