Pongsakorn Poosankam
Download
1 / 57

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


  • 134 Views
  • Uploaded on

Pongsakorn Poosankam Microsoft Innovation Center Manager Microsoft (Thailand) Limited i-popoos@microsoft.com. Software Requirements. Windows Phone Developer Tool Silverlight Toolkit for Windows Phone Expression Blend for Windows Phone Windows Phone Emulator.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
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

Pongsakorn Poosankam

Microsoft Innovation Center Manager

Microsoft (Thailand) Limited

i-popoos@microsoft.com


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



Pongsakorn poosankam microsoft innovation center manager microsoft thailand limited
Grid columns

  • 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 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 columns

  • 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 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 columns

  • 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 columns

  • 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.


Margin
Margin columns



Canvas1
Canvas columns

  • 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).


Button
<Button/> columns

  • 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


Textblock
< columnsTextBlock/>

  • Display text only

  • Multiline Support

  • Can wrapping text

  • No Border, No Background Color.


Textbox
<TextBox/> columns

  • Text Input

  • Input Scope Support


Passwordbox
< columnsPasswordBox/>

  • Hidden Text

  • Display Dot


Radiobutton
< columnsRadioButton/>

  • Single choice select

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

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


Checkbox
< columnsCheckBox/>

  • Multiple Choice

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

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


Togglebutton
< columnsToggleButton/>

  • Flag, Maker

  • Use IsChecked attribute for verify status

<ToggleButton Content="Disable"/>

Default

Checked


Progressbar
< columnsProgressBar/>

  • 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


Progressbar1
< columnsProgressBar/>

<ProgressBar Value="50“/>

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


Slider
<Slider/> columns

  • Slide for select value

  • Orientation support

  • Use Minimum & Maximum

    attribute for set double value input scope

<Slider Value="5"/>

10

0


Popup
<Popup/> columns

  • 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;


Listbox
< columnsListBox/>

  • 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>


Listbox datatemplate
< columnsListBox/> - 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


Any control
Any control columns

  • Silverlight Toolkit for

    Windows Phone

    http://silverlight.codeplex.com


Multimedia
Multimedia columns

  • Type of Multimedia

    • Audio

    • Video

    • HTML and Image

    • Maps


Audio and video
Audio and Video columns

  • Multiply Formats

  • Delivery Options

  • Integration with your application


Wp7 multiply audio formats
WP7 Multiply Audio Formats. columns

  • 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 columns

  • 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 columns

  • 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. columns

  • 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>


Wp7 two methods of integration media
WP7 Two methods of integration media columns

  • Media Player Launcher

  • Media Element Control


Media player launcher
Media Player Launcher columns

  • 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();


Media element control
Media Element Control columns

  • More complex

  • More control

  • Embed media in application

  • Support audio and video locally and remotely


Wp7 working with html
WP7 Working with HTML columns

  • Web Browser Control

  • Network or local content

    WebBrowser.Navigate(Uri);

  • Programmatically created HTML

    WebBrowser.NavigateToString(html);


Wp7 working with html1
WP7 columnsWorking with HTML

  • Example of programmatically creating HTML

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


Animation

Double, Color, Point Animate columns

Animation


Session topics
Session Topics columns

  • Storyboards

  • Animations

  • Keyframes



Where do storyboards come from
Where Do Storyboards Come From? columns

<Storyboard x:Name="Storyboard1"/>


Where do storyboards come from1
Where Do Storyboards Come From? columns

  • Are containers

  • Can contain many animations

  • Can also be created in code



Where do animations come from1
Where Do Animations Come From? columns

<Storyboard x:Name="Storyboard1">

<DoubleAnimationUsingKeyFrames

BeginTime="00:00:00"

Storyboard.TargetName="ellipse"

Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">

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

</DoubleAnimationUsingKeyFrames>

</Storyboard>


Where do animations come from2
Where Do Animations Come From? columns

  • 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? columns

  • Each animation type has two variations

    • From/to

    • UsingKeyframes


Where do keyframes come from
Where Do columnsKeyframes Come From?

<SplineDoubleKeyFrame KeyTime="00:00:01"

Value="370"/>


Where do keyframes come from1
Where Do columnsKeyframes 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 columnsKeyframes 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"/>