Making Your Mobile Apps Sexy Using the Compact Framework 3.5 Stephen Leverett DotNetConsult
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
© Copyright 2024