Skip this Video
Download Presentation
Pongsakorn Poosankam Microsoft Innovation Center Manager Microsoft (Thailand) Limited

Loading in 2 Seconds...

play fullscreen
1 / 57

Pongsakorn Poosankam Microsoft Innovation Center Manager Microsoft (Thailand) Limited - PowerPoint PPT Presentation

  • Uploaded on

Pongsakorn Poosankam Microsoft Innovation Center Manager Microsoft (Thailand) Limited [email protected] Software Requirements. Windows Phone Developer Tool Silverlight Toolkit for Windows Phone Expression Blend for Windows Phone Windows Phone Emulator.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about ' Pongsakorn Poosankam Microsoft Innovation Center Manager Microsoft (Thailand) Limited' - august-schmidt

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Pongsakorn Poosankam

Microsoft Innovation Center Manager

Microsoft (Thailand) Limited

[email protected]

software requirements
Software Requirements
  • Windows Phone Developer Tool
  • Silverlight Toolkit for Windows Phone
  • Expression Blend for Windows Phone
  • Windows Phone Emulator
layout and controls
Layout and Controls
  • Grid
  • Stack Panel
  • Canvas
  • Scroll Viewer
  • 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.
fine tuning rows and columns
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.
nesting layout containers
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.
spanning rows and columns
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.
stack panel1
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.
layout properties
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.
  • 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).
  • Tap or Click Input

<Button Content=“Click Me!”/>


  • Content can be Text on any control.
    • Image in Button, Video in Button, Layout
  • Display text only
  • Multiline Support
  • Can wrapping text
  • No Border, No Background Color.
  • Text Input
  • Input Scope Support
  • Hidden Text
  • Display Dot
  • Single choice select

<RadioButtonGroupName="fruit" Content="Apple“ />

<RadioButtonGroupName="fruit" Content="Orange" IsChecked="True“/>

  • Multiple Choice

<CheckBox Content="Apple" IsChecked="True"/>

<CheckBox Content="Orange" IsChecked="True"/>

  • Flag, Maker
  • Use IsChecked attribute for verify status

<ToggleButton Content="Disable"/>



  • 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

<ProgressBar Value="50“/>

<ProgressBarValue="50" IsIndeterminate="True“/>

  • Slide for select value
  • Orientation support
  • Use Minimum & Maximum

attribute for set double value input scope

<Slider Value="5"/>



  • Show or Hide control in Popup element

<Popup x:Name=“myPopup”>


<TextBlock Text="Content Here!"/>



Code for Open Popup

myPopup.IsOpen = True;

  • Useful for display group item
  • Single & Multiple choice support


<ListBoxItem Content="Apple"/>

<ListBoxItem Content="Orange"/>

<ListBoxItem Content="Banana"/>

<ListBoxItem Content="Mango"/>


listbox datatemplate
<ListBox/> - DataTemplate
  • Normally, use with Data template
  • Like “for” loop


<ListBox. ItemTemplate>


<Button Content=“{Binding..}”/>

<TextBox Text=“{Binding ..}”/> </DataTemplate>



Duplicate Pattern

any control
Any control
  • Silverlight Toolkit for

Windows Phone

  • Type of Multimedia
    • Audio
    • Video
    • HTML and Image
    • Maps
audio and video
Audio and Video
  • Multiply Formats
  • Delivery Options
  • Integration with your application
wp7 multiply audio formats
WP7 Multiply Audio Formats.
  • MP3 – MPEG-1 Audio Layer 3
  • WMA – Windows Media Audio
  • AAC – Advanced Audio Coding
  • WAV – Wave from Audio Format
wp7 multiply video format
WP7 Multiply Video Format
  • WMV VC-1 - Windows Media Video
  • MPEG-4 - Moving Picture Experts Group
  • H.263 – MPEG-4 Part 10/AVC
silverlight media capabilities
Silverlight Media Capabilities
  • Optimized to support video
  • Power high profile online video experience
  • High Definition Video
  • 5.1 Surround Audio
how to play smooth streaming
How to play smooth streaming.
  • Download smooth streaming player
  • Add reference
  • Download



<Media:PlaylistItemDeliveryMethod="AdaptiveStreaming" MediaSource=""/>



wp7 two methods of integration media
WP7 Two methods of integration media
  • Media Player Launcher
  • Media Element Control
media player launcher
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);


media element control
Media Element Control
  • More complex
  • More control
  • Embed media in application
  • Support audio and video locally and remotely
wp7 working with html
WP7 Working with HTML
  • Web Browser Control
  • Network or local content


  • Programmatically created HTML


wp7 working with html1
WP7Working with HTML
  • Example of programmatically creating HTML

webBrowser.NavigateToString("<b>Inject HTML</b><p/>Create html programmatically");

session topics
Session Topics
  • Storyboards
  • Animations
  • Keyframes
where do storyboards come from
Where Do Storyboards Come From?

<Storyboard x:Name="Storyboard1"/>

where do storyboards come from1
Where Do Storyboards Come From?
  • Are containers
  • Can contain many animations
  • Can also be created in code
where do animations come from1
Where Do Animations Come From?

<Storyboard x:Name="Storyboard1">





<SplineDoubleKeyFrame KeyTime="00:00:01" Value="370"/>



where do animations come from2
Where Do Animations Come From?
  • Are placed inside Storyboard containers
  • Used to change object properties over time
  • Animation types correspond to data types
    • Double (width, height, left, top, etc.)
    • Color (fill, stroke, etc.)
    • Point (for path manipulation)
  • Can also be created with code
where do animations come from3
Where Do Animations Come From?
  • Each animation type has two variations
    • From/to
    • UsingKeyframes
where do keyframes come from
Where Do Keyframes Come From?

<SplineDoubleKeyFrame KeyTime="00:00:01"


where do keyframes come from1
Where Do Keyframes Come From?
  • There are three types of keyframes
    • Linear (linear movement between keyframes)
    • Spline (allows motion “easing”)
    • Discrete (holds an object until next keyframe)
where do keyframes come from2
Where Do Keyframes Come From?
  • <LinearDoubleKeyFrameKeyTime="00:00:01" Value="370"/>

<SplineDoubleKeyFrameKeyTime="00:00:01" Value="370"/>

  • <SplineDoubleKeyFrame KeyTime="00:00:01" Value="370" KeySpline="0,0,0.50,1"/>
  • <DiscreteDoubleKeyFrame KeyTime="00:00:01" Value="370"/>