240 likes | 376 Views
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.
E N D
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("BackgroundIMG.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); SolidBrushBlueBrush = new SolidBrush(Color.Blue); SolidBrushRedBrush = 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 uintUpperLeft; public uintLowerRight; public GRADIENT_RECT(uintul, uintlr) { this.UpperLeft = ul; this.LowerRight = lr; } }
[DllImport("coredll.dll", SetLastError = true, EntryPoint = "GradientFill")] public extern static boolGradientFill( IntPtrhdc, TRIVERTEX[] pVertex, uintdwNumVertex, GRADIENT_RECT[] pMesh, uintdwNumMesh, uintdwMode); 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. IntPtrhdc = 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(); ImageAttributesattr = 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); SolidBrushGreenBrush = 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?culture=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