Making Your Mobile Apps Sexy
Using the Compact Framework 3.5
Stephen Leverett
DotNetConsult
Compact Framework Controls
Native controls with wrappers
 Filter unwanted messages
 Manage events raised
 Paint events not available
 Custom drawing not available

.NET Compact Framework 3.5:
Graphics consideration
Support 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 considerations
OnPaint with a PaintEventArgs when
using an object
 Draw graphics to off-screen bitmap
 Design drawing with item changes
determined by cursor position

Basic Drawing & Graphics features
Set up a Background Image
 Zoom effect
 Gradient Fill
 Draw Image with Transparency
 Draw Image Off-Screen

Set up a Background Image
Add a resource to Project
 Set “Build Action” under properties to
“Embedded Resource”
 Generate Resource Stream
 Draw Image

Assembly asm = Assembly.GetExecutingAssembly();
Bitmap backgroundImage = new
Bitmap(asm.GetManifestResourceStream("BackgroundI
MG.Toucan.jpg"));
e.Graphics.DrawImage(backgroundImage,
this.ClientRectangle, new Rectangle(0, 0,
backgroundImage.Width, backgroundImage.Height),
GraphicsUnit.Pixel);
Zoom effect
Setup Image
 Create Image
 Zoom into Image
 Draw 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 Fill
Setup Win32Helper
 Setup TRIVERTEX and GradientFill call
 Initialize Graphics
 Make GadientFill call
 DrawImage

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 Image
e.Graphics.DrawImage(bmp, 0, 0);
g.Dispose();
bmp.Dispose();
Draw Image with Transparency
Setup BitMap and Graphics
 Fill part of Graphics with Red(Black
background)
 ImageAttributes color set
 Setup 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-screen
Setup BitMap and Graphics
 Fill Graphics Bitmap with Red
 Create white rectangle with Green Circle
 Draw 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 Bar
Set the FormBorderStyle to none
 Maximize FormWindowState


Example:
this.FormBorderStyle = FormBorderStyle.None;
this.WindowState=FormWindowState.Maximized;
Removing Button Bar

Delete 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 Framework
http://msdn.microsoft.com/en-us/library/hf85w92t.aspx

How to: Set a Background Image on a Form
http://msdn.microsoft.com/en-us/library/ms172529.aspx

How to: Create a Zoom Effect
http://msdn.microsoft.com/en-us/library/ms229648.aspx

How to: Display a Gradient Fill
http://msdn.microsoft.com/en-us/library/ms229655.aspx

How to: Draw Images with Transparency
http://msdn.microsoft.com/en-us/library/ms172507.aspx

How to: Draw Images Off-Screen
http://msdn.microsoft.com/en-us/library/ms172506.aspx

Articles(cont.):
How to: Handle Orientation and Resolution Changes
http://msdn.microsoft.com/en-us/library/ms229649.aspx

Creating Compelling and Attractive UI’s Webcast
http://msevents.microsoft.com/CUI/WebCastEventDetails.aspx?cultur
e=en-US&EventID=1032404297&CountryCode=US

Code for the UI Webcast’s
http://code.msdn.microsoft.com/uiframework

Building Graphically Advanced Applications
http://expression.microsoft.com/en-us/dd279543.aspx

.NET Compact Framework 3.5 Run-Time Breaking Changes
http://msdn.microsoft.com/en-us/netframework/bb986636.aspx
