Pongsakorn Poosankam Microsoft Innovation Center Manager Microsoft (Thailand) Limited

1. Pongsakorn Poosankam Microsoft Innovation Center Manager Microsoft (Thailand) Limited i-popoos@microsoft.com

2. Software Requirements • Windows Phone Developer Tool • Silverlight Toolkit for Windows Phone • Expression Blend for Windows Phone • Windows Phone Emulator

3. The top-level container for each Silverlight page User control

4. WPF Standard Controls (122)

5. Silverlight Standard Controls (90)

6. WP7 Standard Controls (72)

7. Layout and Controls • Grid • Stack Panel • Canvas • Scroll Viewer

8. Separates elements into an invisible grid of rows and columns Grid

9. Grid • The Grid separates elements into an invisible grid of rows and columns. Although more than one element can be placed in a single cell (in which case they overlap), it generally makes sense to place just a single element per cell. Of course, that element may itself be another layout container that organizes its own group of contained controls.

10. Fine-Tuning Rows and Columns • Absolute sizes • You choose the exact size using pixels. This is the least useful strategy because it’s not flexible enough to deal with changing content size, changing container size, or localization. • Automatic sizes • Each row or column is given exactly the amount of space it needs, and no more. This is one of the most useful sizing modes. • Proportional sizes • Space is divided between a group of rows or columns. This is the standard setting for all rows and columns.

11. Nesting Layout Containers • The Grid is impressive on its own, but most realistic user interfaces combine several layout containers. They may use an arrangement with more than one Grid or mix the Grid with other layout containers like the StackPanel.

12. Spanning Rows and Columns • You’ve already seen how you place elements in cells using the Row and Column attached properties. You can also use two more attached properties to make an element stretch over several cells: RowSpan and ColumnSpan. These properties take the number of rows or columns that the element should occupy. • Row and column spanning can achieve some interesting effects and is particularly handy when you need to fit elements in a tabular structure that’s broken up by dividers or longer sections of content.

13. It simply stacks its children in a single row or column Stack panel

14. Stack Panel • The StackPanel is one of the simplest layout containers. It simply stacks its children in a single row or column. These elements are arranged based on their order.

15. Layout Properties • HorizontalAlignment • Determines how a child is positioned inside a layout container when there’s extra horizontal space available. You can choose Center, Left, Right, or Stretch. • VerticalAlignment • Determines how a child is positioned inside a layout container when there’s extra vertical space available. You can choose Center, Top, Bottom, or Stretch. • Margin • Adds a bit of breathing room around an element. The Margin property is an instance of the System.Windows.Thickness structure, with separate components for the top, bottom, left, and right edges. • MinWidth and MinHeight • Set the minimum dimensions of an element. If an element is too large for its layout container, it will be cropped to fit. • MaxWidth and MaxHeight • Set the maximum dimensions of an element. If the container has more room available, the element won’t be enlarged beyond these bounds, even if the HorizontalAlignment and VerticalAlignment properties are set to Stretch. • Width and Height • Explicitly set the size of an element. This setting overrides a Stretch value for the HorizontalAlignment or VerticalAlignment properties. However, this size won’t be honored if it’s outside of the bounds set by the MinWidth, MinHeight, MaxWidth, and MaxHeight.

16. Margin

17. It allows you to place elements using exact coordinates canvas

18. Canvas • The only layout container you haven’t considered yet is the Canvas. It allows you to place elements using exact coordinates, which is a poor choice for designing rich data-driven forms and standard dialog boxes, but a valuable tool if you need to build something a little different (such as a drawing surface for a diagramming tool).

19. <Button/> • Tap or Click Input <Button Content=“Click Me!”/> <Button><Grid>..</Grid></Button> • Content can be Text on any control. • Image in Button, Video in Button, Layout

20. <TextBlock/> • Display text only • Multiline Support • Can wrapping text • No Border, No Background Color.

21. <TextBox/> • Text Input • Input Scope Support

22. <PasswordBox/> • Hidden Text • Display Dot

23. <RadioButton/> • Single choice select <RadioButtonGroupName="fruit" Content="Apple“ /> <RadioButtonGroupName="fruit" Content="Orange" IsChecked="True“/>

24. <CheckBox/> • Multiple Choice <CheckBox Content="Apple" IsChecked="True"/> <CheckBox Content="Orange" IsChecked="True"/>

25. <ToggleButton/> • Flag, Maker • Use IsChecked attribute for verify status <ToggleButton Content="Disable"/> Default Checked

26. <ProgressBar/> • Display task/job progress • Use Value attribute for update progress • Use Minimum & Maximum attribute for set range of progress • Use IsIndeterminateattribute for unknown progress • Can change Background, Foreground collor

27. <ProgressBar/> <ProgressBar Value="50“/> <ProgressBarValue="50" IsIndeterminate="True“/>

28. <Slider/> • Slide for select value • Orientation support • Use Minimum & Maximum attribute for set double value input scope <Slider Value="5"/> 10 0

29. <Popup/> • Show or Hide control in Popup element <Popup x:Name=“myPopup”> <Grid> <TextBlock Text="Content Here!"/> </Grid> </Popup> Code for Open Popup myPopup.IsOpen = True;

30. <ListBox/> • Useful for display group item • Single & Multiple choice support <ListBoxSelectionMode=“Single|Multiple"> <ListBoxItem Content="Apple"/> <ListBoxItem Content="Orange"/> <ListBoxItem Content="Banana"/> <ListBoxItem Content="Mango"/> </ListBox>

31. <ListBox/> - DataTemplate • Normally, use with Data template • Like “for” loop <ListBoxItemSource=“…”> <ListBox. ItemTemplate> <DataTemplate> <Button Content=“{Binding..}”/> <TextBox Text=“{Binding ..}”/> </DataTemplate> </ListBoxItem.ItemTemplate> </ListBox> Duplicate Pattern

32. Any control • Silverlight Toolkit for Windows Phone http://silverlight.codeplex.com

33. Multimedia • Type of Multimedia • Audio • Video • HTML and Image • Maps

34. Audio and Video • Multiply Formats • Delivery Options • Integration with your application

35. WP7 Multiply Audio Formats. • MP3 – MPEG-1 Audio Layer 3 • WMA – Windows Media Audio • AAC – Advanced Audio Coding • WAV – Wave from Audio Format

36. WP7 Multiply Video Format • WMV VC-1 - Windows Media Video • MPEG-4 - Moving Picture Experts Group • H.263 – MPEG-4 Part 10/AVC

37. Silverlight Media Capabilities • Optimized to support video • Power high profile online video experience • High Definition Video • 5.1 Surround Audio

38. Smooth Streaming Demo

39. How to play smooth streaming. • Download smooth streaming player • Add reference • Download http://smf.codeplex.com/ <Core:SMFPlayer> <Core:SMFPlayer.Playlist> <Media:PlaylistItemDeliveryMethod="AdaptiveStreaming" MediaSource="http://video3.smoothhd.com.edgesuite.net/ondemand/Big%20Buck%20Bunny%20Adaptive.ism/Manifest"/> </Core:SMFPlayer.Playlist> </Core:SMFPlayer>

40. WP7 Two methods of integration media • Media Player Launcher • Media Element Control

41. Media Player Launcher • Simplest • Opens media in WP7 Media Player • Support audio and video stored locally and remotly MediaPlayerLauncher player = new MediaPlayerLauncher(); player.Location = MediaLocationType.Install; player.Media = new Uri(“bear.wmv”, UriKind.Relative); player.Show();

42. Media Element Control • More complex • More control • Embed media in application • Support audio and video locally and remotely

43. WP7 Working with HTML • Web Browser Control • Network or local content WebBrowser.Navigate(Uri); • Programmatically created HTML WebBrowser.NavigateToString(html);

44. WP7Working with HTML • Example of programmatically creating HTML webBrowser.NavigateToString("<b>Inject HTML</b><p/>Create html programmatically");

45. Double, Color, Point Animate Animation

46. Session Topics • Storyboards • Animations • Keyframes

47. Where Do Storyboards Come From?

48. Where Do Storyboards Come From? <Storyboard x:Name="Storyboard1"/>

49. Where Do Storyboards Come From? • Are containers • Can contain many animations • Can also be created in code

50. Where Do Animations Come From?