Alnur Ismail Program Manager Microsoft Corporation APP503T Agenda Using builtin controls for great touch apps out of the box Customizing panning and zooming Using the touch API for advanced touch interaction ID: 746350
Download Presentation The PPT/PDF document "Make great touch apps using XAML" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Make great touch apps using XAML
Alnur Ismail Program ManagerMicrosoft Corporation
APP-503TSlide2
Agenda
Using built-in controls for great touch apps out of the boxCustomizing panning and zooming Using the touch API for advanced touch interaction
Recap
You’ll leave with examples of how to
Quickly create touch enabled apps
Easily build advanced touch appsSlide3
Memories app
demo Slide4
Using built-in controls for great touch apps
out-of-the-boxSlide5
Controls that support the touch language
ListView/GridView
Swipe
Panning
Tap
FlipView
Panning
GridView
ListView
FlipViewSlide6
Controls that support the touch language
ScrollViewer
Panning
Optical zoom
Optical zoomSlide7
Controls that support the touch language
JumpViewer
S
emantic zoomSlide8
Customizing panning and zoomingSlide9
Custom panning and zooming using ScrollViewer
demo Slide10
Enabling snap-points
<
ScrollViewer
>
<
StackPanel
>
<
Image
Source="..."
Height="533" Width="800"/>
<Image Source
="..."
Height
="533"
Width
="800"/>
<
Image
Source
="..."
Height
="533"
Width
="800"/>
...
</
StackPanel
>
</ScrollViewer>
VerticalSnapPointsType
="Mandatory"
VerticalSnapPointsAlignment
="Near"Slide11
Enabling rails
<
ScrollViewer
>
<
TextBlock
>
<!-- content
--> </TextBlock
></ScrollViewer
>
HorizontalScrollMode
="Rails"
VerticalScrollMode
="Rails"Slide12
Customizing zooming
//Setting min/max zoom factor
svContent.MinZoomFactor
= .5f;
svContent.MaxZoomFactor
= 8;
//Adding zoom snap-points
svContent.ZoomSnapPoints.Add
(.5f);
svContent.ZoomSnapPoints.Add
(1);
svContent.ZoomSnapPoints.Add
(4);
svContent.ZoomSnapPoints.Add
(8); Slide13
Using the
touch API for advanced touch interactionSlide14
Gesture API
PropertiesIsTapEnabled
IsHoldingEnabled
IsRightTapEnabled
Events
Tapped
Holding
RightTappedSlide15
Holding
private
void
Holding(
object
sender,
HoldingEventArgs
e)
{
switch
(
e.HoldingState) {
case HoldingState.Started
: { //perform
action };
case
HoldingState
.Canceled
:
{
//undo
action
};
case
HoldingState
.Completed
:
{
//commit
action
}; }
}Slide16
Scale, translate & rotate content
demoSlide17
Manipulation API
PropertiesManipulationModes
Events
ManipulationStarting
ManipulationStarted
ManipulationDelta
ManipulationCompleted
ManipulationInertiaStartingSlide18
Walkthrough rotating content
demoSlide19
Painting
demoSlide20
Pointer API
PropertiesPointerCaptures
Events
PointerPressed
PointerReleased
PointerMoved
PointerEntered
PointerExited
PointerCanceled
PointerCaptureLost
PointerWheelChanged
PointerDevice
Pointer
PointerPointSlide21
Painting with pointers
<
Image
PointerPressed
="
PointerPressed
"
PointerReleased
="
PointerReleased
" PointerMoved
="PointerMoved"
/>
PointerCanceled
="
PointerReleased
"Slide22
Painting with pointers
private
void
PointerMoved
(
object
sender,
PointerEventArgs
e)
{
PointerPoint pt = e.GetCurrentPoint
(LayoutRoot);
... Line
l = new Line()
{
...
X2
=
pt.Position
.X
,
Y2
=
pt.Position
.Y
,
StrokeThickness
=
pt.Properties.Pressure
,
};
...
}Slide23
Tips & tricks
Panning/zooming vs. translation/scalingIndependent thread vs. UI thread
ScrollViewer
and manipulation APIs
Reactive/proactive events
Click vs. tap Slide24
RecapSlide25
How XAML makes Windows 8 touch easy
Quickly build touch apps using XAML controls which support common touch scenarios out-of-the-boxEasy to access powerful touch APIs that enable advanced scenarios in a familiar way
Code for touch, mouse and pen in a unified way
Low barrier to entry by using existing knowledge plus a few new conceptsSlide26
Use Windows 8 touch capabilities + XAML to create great touch apps!
And please provide feedback.Slide27
Related sessions
[APP-517T]
Build polished collection and list apps using
XAML
[APP-914T] The
lifetime of XAML text: from input to display through printingSlide28
Further reading and documentation
Look at SDK samples for similar examples + codeTwitter: @alnurismailSlide29
Feedback and q
uestions http://forums.dev.windows.com
Session
f
eedback
http
://bldw.in/SessionFeedback
t
hank youSlide30
©
2011 Microsoft
Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.
MICROSOFT
MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.Slide31