![Page 1: Building Great Looking Mobile Applications Tech Ed](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554eba9fb4c905de468b46a3/html5/thumbnails/1.jpg)
![Page 2: Building Great Looking Mobile Applications Tech Ed](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554eba9fb4c905de468b46a3/html5/thumbnails/2.jpg)
Developing Great Looking Mobile Applications
Arunjeet SinghMobility ConsultantMicrosoftSession Code:
![Page 3: Building Great Looking Mobile Applications Tech Ed](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554eba9fb4c905de468b46a3/html5/thumbnails/3.jpg)
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: Building Great Looking Mobile Applications Tech Ed](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554eba9fb4c905de468b46a3/html5/thumbnails/4.jpg)
Session Prerequisites
Visual Studio.NET
.NET Compact Framework
Familiarity with P/Invoke
Knowledge of Windows Mobile Development
![Page 5: Building Great Looking Mobile Applications Tech Ed](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554eba9fb4c905de468b46a3/html5/thumbnails/5.jpg)
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: Building Great Looking Mobile Applications Tech Ed](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554eba9fb4c905de468b46a3/html5/thumbnails/6.jpg)
My Favourite Mobile Applications
![Page 7: Building Great Looking Mobile Applications Tech Ed](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554eba9fb4c905de468b46a3/html5/thumbnails/7.jpg)
My Favourite Mobile Applications
![Page 8: Building Great Looking Mobile Applications Tech Ed](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554eba9fb4c905de468b46a3/html5/thumbnails/8.jpg)
My Favourite Mobile Applications
![Page 9: Building Great Looking Mobile Applications Tech Ed](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554eba9fb4c905de468b46a3/html5/thumbnails/9.jpg)
What Makes a Great Looking UI
Background Images
Transparent Overlays
No Sharp Edges
Gradients!
![Page 10: Building Great Looking Mobile Applications Tech Ed](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554eba9fb4c905de468b46a3/html5/thumbnails/10.jpg)
Transparency
Transparent Backgrounds
Semi-transparent Images
Using the Alpha Channel
![Page 11: Building Great Looking Mobile Applications Tech Ed](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554eba9fb4c905de468b46a3/html5/thumbnails/11.jpg)
Transparency
Transparent Backgrounds
![Page 12: Building Great Looking Mobile Applications Tech Ed](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554eba9fb4c905de468b46a3/html5/thumbnails/12.jpg)
Transparency
Transparent Backgrounds
![Page 13: Building Great Looking Mobile Applications Tech Ed](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554eba9fb4c905de468b46a3/html5/thumbnails/13.jpg)
Transparency
Transparent Backgrounds
Semi-transparent Images
Using the Alpha Channel
![Page 14: Building Great Looking Mobile Applications Tech Ed](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554eba9fb4c905de468b46a3/html5/thumbnails/14.jpg)
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: Building Great Looking Mobile Applications Tech Ed](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554eba9fb4c905de468b46a3/html5/thumbnails/15.jpg)
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: Building Great Looking Mobile Applications Tech Ed](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554eba9fb4c905de468b46a3/html5/thumbnails/16.jpg)
Building a Splash ScreenArunjeet SinghMobility ConsultantMicrosoft
demo
![Page 17: Building Great Looking Mobile Applications Tech Ed](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554eba9fb4c905de468b46a3/html5/thumbnails/17.jpg)
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
IImagingFactoryIImage
![Page 18: Building Great Looking Mobile Applications Tech Ed](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554eba9fb4c905de468b46a3/html5/thumbnails/18.jpg)
Using Alpha ChannelsArunjeet SinghMobility ConsultantMicrosoft
demo
![Page 19: Building Great Looking Mobile Applications Tech Ed](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554eba9fb4c905de468b46a3/html5/thumbnails/19.jpg)
Custom Borders
Turn off the default border
Using custom borders
Using Rounded Borders
![Page 21: Building Great Looking Mobile Applications Tech Ed](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554eba9fb4c905de468b46a3/html5/thumbnails/21.jpg)
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 23: Building Great Looking Mobile Applications Tech Ed](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554eba9fb4c905de468b46a3/html5/thumbnails/23.jpg)
Recap
Mobile UI trends
Transparency implementation
Custom Borders
UI Framework
![Page 24: Building Great Looking Mobile Applications Tech Ed](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554eba9fb4c905de468b46a3/html5/thumbnails/24.jpg)
Next Steps
Get the Windows Mobile 6 SDK
http://www.microsoft.com/downloads/details.aspx?familyid=06111A3A-A651-4745-88EF-3D48091A390B&displaylang=en
![Page 25: Building Great Looking Mobile Applications Tech Ed](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554eba9fb4c905de468b46a3/html5/thumbnails/25.jpg)
Next Steps
Leverage what we talked about today
http://code.msdn.microsoft.com/Release/ProjectReleases.aspx?ProjectName=uiframework&ReleaseId=2315
![Page 26: Building Great Looking Mobile Applications Tech Ed](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554eba9fb4c905de468b46a3/html5/thumbnails/26.jpg)
Next Steps
Build Great Looking Applications!
![Page 27: Building Great Looking Mobile Applications Tech Ed](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554eba9fb4c905de468b46a3/html5/thumbnails/27.jpg)
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 28: Building Great Looking Mobile Applications Tech Ed](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554eba9fb4c905de468b46a3/html5/thumbnails/28.jpg)
More Information
How-to Display Gradient Fill:http://msdn.microsoft.com/en-us/library/ms229655.aspx
Building Graphically advanced Apps in .NET Compact Framework:
http://expression.microsoft.com/en-us/dd279543.aspx
MSDN Article that covers these concepts:http://msdn.microsoft.com/en-us/library/dd630622.aspx
![Page 29: Building Great Looking Mobile Applications Tech Ed](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554eba9fb4c905de468b46a3/html5/thumbnails/29.jpg)
धन्यवा�दઆભા�ર ধন্য�বা�দ
ਧੰ�ਨਵਾ�ਦ
ଧନ୍ୟ�ବା�ଦ
நன்றி�
ధన్య�వాదాలు� ಧನ್ಯ�ವಾ�ದಗಳು
നി�ങ്ങള്ക്ക്� നിന്ദി�
![Page 30: Building Great Looking Mobile Applications Tech Ed](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554eba9fb4c905de468b46a3/html5/thumbnails/30.jpg)
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: Building Great Looking Mobile Applications Tech Ed](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554eba9fb4c905de468b46a3/html5/thumbnails/31.jpg)
question & answerBlog: http://blogs.msdn.com/knowledgecast
Email: [email protected]
Twitter: @arunjeetsingh
![Page 32: Building Great Looking Mobile Applications Tech Ed](https://reader033.vdocuments.mx/reader033/viewer/2022052822/554eba9fb4c905de468b46a3/html5/thumbnails/32.jpg)
© 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.