arunjeet singh mobility consultant microsoft session...

32

Upload: others

Post on 15-Sep-2020

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Arunjeet Singh Mobility Consultant Microsoft Session Codedownload.microsoft.com/download/F/3/3/F33D91DF-D6E3-442A... · 2018. 10. 16. · May 15 (1100 –1215) - Windows mobile platform:
Page 2: Arunjeet Singh Mobility Consultant Microsoft Session Codedownload.microsoft.com/download/F/3/3/F33D91DF-D6E3-442A... · 2018. 10. 16. · May 15 (1100 –1215) - Windows mobile platform:

Arunjeet SinghMobility ConsultantMicrosoftSession Code:

Page 3: Arunjeet Singh Mobility Consultant Microsoft Session Codedownload.microsoft.com/download/F/3/3/F33D91DF-D6E3-442A... · 2018. 10. 16. · May 15 (1100 –1215) - Windows mobile platform:

About Me

Member of the Global Mobility Practices team

Free consulting can occasionally be bought for a large bag of fries and a cold drink

Blog: http://blogs.msdn.com/knowledgecast

Email: [email protected]

Twitter: @arunjeetsingh

Page 4: Arunjeet Singh Mobility Consultant Microsoft Session Codedownload.microsoft.com/download/F/3/3/F33D91DF-D6E3-442A... · 2018. 10. 16. · May 15 (1100 –1215) - Windows mobile platform:

Session Prerequisites

Visual Studio.NET

.NET Compact Framework

Familiarity with P/Invoke

Knowledge of Windows Mobile Development

Page 5: Arunjeet Singh Mobility Consultant Microsoft Session Codedownload.microsoft.com/download/F/3/3/F33D91DF-D6E3-442A... · 2018. 10. 16. · May 15 (1100 –1215) - Windows mobile platform:

What We Will Learn Today

What Makes a Great Looking UI

Transparency and Custom Borders

Some Guidelines

The UI Framework

Recap and Next Steps

Q & A

Page 6: Arunjeet Singh Mobility Consultant Microsoft Session Codedownload.microsoft.com/download/F/3/3/F33D91DF-D6E3-442A... · 2018. 10. 16. · May 15 (1100 –1215) - Windows mobile platform:

My Favourite Mobile Applications

Page 7: Arunjeet Singh Mobility Consultant Microsoft Session Codedownload.microsoft.com/download/F/3/3/F33D91DF-D6E3-442A... · 2018. 10. 16. · May 15 (1100 –1215) - Windows mobile platform:

My Favourite Mobile Applications

Page 8: Arunjeet Singh Mobility Consultant Microsoft Session Codedownload.microsoft.com/download/F/3/3/F33D91DF-D6E3-442A... · 2018. 10. 16. · May 15 (1100 –1215) - Windows mobile platform:

My Favourite Mobile Applications

Page 9: Arunjeet Singh Mobility Consultant Microsoft Session Codedownload.microsoft.com/download/F/3/3/F33D91DF-D6E3-442A... · 2018. 10. 16. · May 15 (1100 –1215) - Windows mobile platform:

What Makes a Great Looking UI

Background Images

Transparent Overlays

No Sharp Edges

Gradients!

Page 10: Arunjeet Singh Mobility Consultant Microsoft Session Codedownload.microsoft.com/download/F/3/3/F33D91DF-D6E3-442A... · 2018. 10. 16. · May 15 (1100 –1215) - Windows mobile platform:

Transparency

Transparent Backgrounds

Semi-transparent Images

Using the Alpha Channel

Page 11: Arunjeet Singh Mobility Consultant Microsoft Session Codedownload.microsoft.com/download/F/3/3/F33D91DF-D6E3-442A... · 2018. 10. 16. · May 15 (1100 –1215) - Windows mobile platform:

Transparency

Transparent Backgrounds

Page 12: Arunjeet Singh Mobility Consultant Microsoft Session Codedownload.microsoft.com/download/F/3/3/F33D91DF-D6E3-442A... · 2018. 10. 16. · May 15 (1100 –1215) - Windows mobile platform:

Transparency

Transparent Backgrounds

Page 13: Arunjeet Singh Mobility Consultant Microsoft Session Codedownload.microsoft.com/download/F/3/3/F33D91DF-D6E3-442A... · 2018. 10. 16. · May 15 (1100 –1215) - Windows mobile platform:

Transparency

Transparent Backgrounds

Semi-transparent Images

Using the Alpha Channel

Page 14: Arunjeet Singh Mobility Consultant Microsoft Session Codedownload.microsoft.com/download/F/3/3/F33D91DF-D6E3-442A... · 2018. 10. 16. · May 15 (1100 –1215) - Windows mobile platform:

Transparent Backgrounds

One color (the background) is transparent

Support OOB in .NET Compact Framework

ImageAttributes attr = new ImageAttributes();

attr.SetColorKey(Color.Red, Color.Red);

e.Graphics.DrawImage(bmp, destRect, 0, 0, bmp.Width, bmp.Height, GrahicsUnit.Pixel, attr)

Page 15: Arunjeet Singh Mobility Consultant Microsoft Session Codedownload.microsoft.com/download/F/3/3/F33D91DF-D6E3-442A... · 2018. 10. 16. · May 15 (1100 –1215) - Windows mobile platform:

Semi-transparent Images

The image blends in with the background

Alpha BlendingSupported by the Platform

[DllImport("coredll.dll")

extern public static Int32 AlphaBlend(IntPtr hdcDest,Int32 xDest, Int32 yDest, Int32 cxDest,Int32 cyDest, IntPtr hdcSrc, Int32 xSrc,Int32 ySrc, Int32 cxSrc, Int32 cySrc,

BlendFunction blendFunction);

Page 16: Arunjeet Singh Mobility Consultant Microsoft Session Codedownload.microsoft.com/download/F/3/3/F33D91DF-D6E3-442A... · 2018. 10. 16. · May 15 (1100 –1215) - Windows mobile platform:

Building a Splash ScreenArunjeet SinghMobility ConsultantMicrosoft

Page 17: Arunjeet Singh Mobility Consultant Microsoft Session Codedownload.microsoft.com/download/F/3/3/F33D91DF-D6E3-442A... · 2018. 10. 16. · May 15 (1100 –1215) - Windows mobile platform:

Using the Alpha Channel

Parts of the image are drawn with an “alpha” channel

The channel defines custom transparency

Supported by a COM interfaces of the Imaging API

IImagingFactory

IImage

Page 18: Arunjeet Singh Mobility Consultant Microsoft Session Codedownload.microsoft.com/download/F/3/3/F33D91DF-D6E3-442A... · 2018. 10. 16. · May 15 (1100 –1215) - Windows mobile platform:

Using Alpha ChannelsArunjeet SinghMobility ConsultantMicrosoft

Page 19: Arunjeet Singh Mobility Consultant Microsoft Session Codedownload.microsoft.com/download/F/3/3/F33D91DF-D6E3-442A... · 2018. 10. 16. · May 15 (1100 –1215) - Windows mobile platform:

Custom Borders

Turn off the default border

Using custom borders

Using Rounded Borders

Page 20: Arunjeet Singh Mobility Consultant Microsoft Session Codedownload.microsoft.com/download/F/3/3/F33D91DF-D6E3-442A... · 2018. 10. 16. · May 15 (1100 –1215) - Windows mobile platform:

Custom bordersArunjeet SinghMobility ConsultantMicrosoft

Page 21: Arunjeet Singh Mobility Consultant Microsoft Session Codedownload.microsoft.com/download/F/3/3/F33D91DF-D6E3-442A... · 2018. 10. 16. · May 15 (1100 –1215) - Windows mobile platform:

Some Guidelines

Window transparency is not supported

Drawing must be done in one Graphics context

Reuse drawing resources (Brushes, Pens, Fonts)

Use double buffering

Page 22: Arunjeet Singh Mobility Consultant Microsoft Session Codedownload.microsoft.com/download/F/3/3/F33D91DF-D6E3-442A... · 2018. 10. 16. · May 15 (1100 –1215) - Windows mobile platform:

The UI FrameworkArunjeet SinghMobility ConsultantMicrosoft

Page 23: Arunjeet Singh Mobility Consultant Microsoft Session Codedownload.microsoft.com/download/F/3/3/F33D91DF-D6E3-442A... · 2018. 10. 16. · May 15 (1100 –1215) - Windows mobile platform:

Recap

Mobile UI trends

Transparency implementation

Custom Borders

UI Framework

Page 24: Arunjeet Singh Mobility Consultant Microsoft Session Codedownload.microsoft.com/download/F/3/3/F33D91DF-D6E3-442A... · 2018. 10. 16. · May 15 (1100 –1215) - Windows mobile platform:

Next Steps

Get the Windows Mobile 6 SDK

http://www.microsoft.com/downloads/details.aspx?familyid=06111A3A-A651-4745-88EF-3D48091A390B&displaylang=en

Page 26: Arunjeet Singh Mobility Consultant Microsoft Session Codedownload.microsoft.com/download/F/3/3/F33D91DF-D6E3-442A... · 2018. 10. 16. · May 15 (1100 –1215) - Windows mobile platform:

Next Steps

Build Great Looking Applications!

Page 27: Arunjeet Singh Mobility Consultant Microsoft Session Codedownload.microsoft.com/download/F/3/3/F33D91DF-D6E3-442A... · 2018. 10. 16. · May 15 (1100 –1215) - Windows mobile platform:

More Information

Code from this session:http://code.msdn.microsoft.com/Release/ProjectReleases.aspx?ProjectName=uiframework&ReleaseId=2315

How to create a Microsoft .NET Compact Framework-based Image Button:

http://msdn.microsoft.com/en-us/library/aa446518.aspx

Chris Lorton’s blog (Alpha Blending):http://blogs.msdn.com/chrislorton/archive/2006/04/07/570649.aspx

Page 29: Arunjeet Singh Mobility Consultant Microsoft Session Codedownload.microsoft.com/download/F/3/3/F33D91DF-D6E3-442A... · 2018. 10. 16. · May 15 (1100 –1215) - Windows mobile platform:
Page 30: Arunjeet Singh Mobility Consultant Microsoft Session Codedownload.microsoft.com/download/F/3/3/F33D91DF-D6E3-442A... · 2018. 10. 16. · May 15 (1100 –1215) - Windows mobile platform:

Related Content

May 15 (1100 – 1215) - Windows mobile platform: Past, Present and Future

May 15 (1500 – 1615) - Occasionally connected Applications using the Sync Framework

May 15 (1630 – 1745) - Understanding and optimizing for .NET CF Memory Architecture

Exam 70-540 - Microsoft Windows Mobile 5.0 - Application Development

Page 31: Arunjeet Singh Mobility Consultant Microsoft Session Codedownload.microsoft.com/download/F/3/3/F33D91DF-D6E3-442A... · 2018. 10. 16. · May 15 (1100 –1215) - Windows mobile platform:

Blog: http://blogs.msdn.com/knowledgecast

Email: [email protected]

Twitter: @arunjeetsingh

Page 32: Arunjeet Singh Mobility Consultant Microsoft Session Codedownload.microsoft.com/download/F/3/3/F33D91DF-D6E3-442A... · 2018. 10. 16. · May 15 (1100 –1215) - Windows mobile platform:

© 2009 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.