Making Your Mobile Apps Sexy Using the Compact Framework 3.5

Stephen LeverettDotNetConsult

Compact Framework Controls

Native controls with wrappersFilter unwanted messagesManage events raisedPaint events not availableCustom drawing not available

.NET Compact Framework 3.5: Graphics considerationSupport for drawing primitives

with fill methods: Line, Polygon, Image, etc...

Alpha Blending pixel by pixel of one color

Form and Control objects support CreateGraphics method

Icons with high resolutions supported (not high-color)

.NET Compact Framework 3.5: Performance considerationsOnPaint with a PaintEventArgs

when using an objectDraw graphics to off-screen

bitmapDesign drawing with item

changes determined by cursor position

Basic Drawing & Graphics featuresSet up a Background ImageZoom effectGradient FillDraw Image with TransparencyDraw Image Off-Screen

Set up a Background Image

Add a resource to ProjectSet “Build Action” under

properties to “Embedded Resource”

Generate Resource StreamDraw Image

Assembly asm = Assembly.GetExecutingAssembly();

Bitmap backgroundImage = new

Bitmap(asm.GetManifestResourceStream("BackgroundIMG.Toucan.jpg"));

e.Graphics.DrawImage(backgroundImage, this.ClientRectangle, new Rectangle(0, 0, backgroundImage.Width, backgroundImage.Height), GraphicsUnit.Pixel);

Zoom effectSetup ImageCreate ImageZoom into ImageDraw Normal and Zoom images

void CreateBitmap(){ bmp = new Bitmap(75, 75); Graphics g = Graphics.FromImage(bmp); SolidBrush BlueBrush = new

SolidBrush(Color.Blue); SolidBrush RedBrush = new

SolidBrush(Color.Red); Rectangle OuterRect = new Rectangle(0, 0,

200, 200); g.FillRectangle(BlueBrush, OuterRect); Rectangle InnerRect = new Rectangle(25,

25, 25, 25); g.FillRectangle(RedBrush, InnerRect); g.Dispose();}

private void ZoomIMG() { bmpZoom = new Bitmap(bmp.Width, bmp.Height); Graphics g = Graphics.FromImage(bmpZoom); int new4W = bmp.Width / 4; int new4H = bmp.Height / 4; int new2W = bmp.Width / 2; int new2H = bmp.Height / 2; Rectangle srcRect = new Rectangle(new4W, new4H,

new2W, new2H); Rectangle dstRect = new Rectangle(0, 0,

bmpZoom.Width, bmpZoom.Height); g.DrawImage(bmp, dstRect, srcRect, GraphicsUnit.Pixel); }

protected override void OnPaint(PaintEventArgs e) { e.Graphics.DrawImage(bmp, 0, 0); e.Graphics.DrawImage(bmpZoom, 125, 0); base.OnPaint(e); }

Gradient FillSetup Win32HelperSetup TRIVERTEX and GradientFill

callInitialize GraphicsMake GadientFill callDrawImage

public TRIVERTEX( int x, int y, ushort red, ushort green, ushort blue, ushort alpha)

{ this.x = x; this.y = y; this.Red = (ushort)(red << 8); this.Green = (ushort)(green << 8); this.Blue = (ushort)(blue << 8); this.Alpha = (ushort)(alpha << 8); }public struct GRADIENT_RECT { public uint UpperLeft; public uint LowerRight; public GRADIENT_RECT(uint ul, uint lr) { this.UpperLeft = ul; this.LowerRight = lr; } }

[DllImport("coredll.dll", SetLastError = true, EntryPoint = "GradientFill")]

public extern static bool GradientFill( IntPtr hdc, TRIVERTEX[] pVertex, uint dwNumVertex, GRADIENT_RECT[] pMesh, uint dwNumMesh, uint dwMode);

public const int GRADIENT_FILL_RECT_H = 0x00000000;

public const int GRADIENT_FILL_RECT_V = 0x00000001;

Win32Helper.TRIVERTEX[] tva = new Win32Helper.TRIVERTEX[2]; tva[0] = new Win32Helper.TRIVERTEX(r.X, r.Y, startColor); tva[1] = new Win32Helper.TRIVERTEX(r.Right, r.Bottom, endColor); Win32Helper.GRADIENT_RECT[] gr = new

Win32Helper.GRADIENT_RECT[] { new Win32Helper.GRADIENT_RECT(0, 1)};

// Get the handle from the Graphics object. IntPtr hdc = g.GetHdc();

// PInvoke to GradientFill. bool b; b = Win32Helper.GradientFill( hdc, tva, (uint)tva.Length, gr, (uint)gr.Length, (uint)fillDirection); System.Diagnostics.Debug.Assert(b, string.Format( "GradientFill failed: {0}", System.Runtime.InteropServices.Marshal.GetLastWin32Error()));

Color Topcolor = Color.Red;Color BottomColor = Color.RoyalBlue;

Bitmap bmp = new Bitmap(Width, Height);Graphics g =

System.Drawing.Graphics.FromImage(bmp);

GradientFill.Fill(g, this.ClientRectangle, Topcolor, BottomColor, GradientFill.FillDirection.TopToBottom);

//Draw Graphic Imagee.Graphics.DrawImage(bmp, 0, 0);g.Dispose();bmp.Dispose();

Draw Image with TransparencySetup BitMap and GraphicsFill part of Graphics with

Red(Black background)ImageAttributes color setSetup Image and DrawImage

Bitmap bmp = new Bitmap(200, 200);Graphics g = Graphics.FromImage(bmp);

g.FillEllipse(new SolidBrush(Color.Red), 0, 0, bmp.Width, bmp.Width);

g.Dispose();

ImageAttributes attr = new ImageAttributes();attr.SetColorKey(Color.Black, Color.Black);Rectangle dstRect = new Rectangle(0, 0,

bmp.Width, bmp.Height);

e.Graphics.DrawImage(bmp, dstRect, 0, 0, bmp.Width, bmp.Height, GraphicsUnit.Pixel, attr);

Draw Image off-screenSetup BitMap and GraphicsFill Graphics Bitmap with RedCreate white rectangle with

Green CircleDraw the Bitmap onto the screen

Bitmap bmp = new Bitmap(200, 200); SolidBrush GreenBrush = new

SolidBrush(Color.DarkSeaGreen);Pen WhitePen = new Pen(Color.White, 3);

Graphics g = Graphics.FromImage(bmp);g.FillRectangle(new SolidBrush(Color.Red), 0, 0, bmp.Width, bmp.Height);

Rectangle rect = new Rectangle(x, y, 20, 20);g.DrawRectangle(WhitePen, rect);g.FillEllipse(GreenBrush, rect);

e.Graphics.DrawImage(bmp, 0, 0, ClientRectangle, GraphicsUnit.Pixel);

g.Dispose();

Removing the Title BarSet the FormBorderStyle to noneMaximize FormWindowState

Example:this.FormBorderStyle =

FormBorderStyle.None;this.WindowState=FormWindowState.M

aximized;

Removing Button BarDelete MainMenu from Form

Behaviour Variations?Compact Framework changes

from1.0/2.0 to 3.5?

Check out article:

.NET Compact Framework 3.5 Run-Time Breaking Changes

Articles: Graphics and Drawing in the .NET Compact Frameworkhttp://msdn.microsoft.com/en-us/library/hf85w92t.aspx

How to: Set a Background Image on a Formhttp://msdn.microsoft.com/en-us/library/ms172529.aspx

How to: Create a Zoom Effecthttp://msdn.microsoft.com/en-us/library/ms229648.aspx

How to: Display a Gradient Fillhttp://msdn.microsoft.com/en-us/library/ms229655.aspx

How to: Draw Images with Transparencyhttp://msdn.microsoft.com/en-us/library/ms172507.aspx

How to: Draw Images Off-Screenhttp://msdn.microsoft.com/en-us/library/ms172506.aspx

Articles(cont.): How to: Handle Orientation and Resolution Changeshttp://msdn.microsoft.com/en-us/library/ms229649.aspx

Creating Compelling and Attractive UI’s Webcast http://

msevents.microsoft.com/CUI/WebCastEventDetails.aspx?culture=en-US&EventID=1032404297&CountryCode=US

Code for the UI Webcast’shttp://code.msdn.microsoft.com/uiframework

Building Graphically Advanced Applicationshttp://expression.microsoft.com/en-us/dd279543.aspx

.NET Compact Framework 3.5 Run-Time Breaking Changeshttp://msdn.microsoft.com/en-us/netframework/bb986636.aspx