Making your mobile apps sexy using the compact framework 3 5
This presentation is the property of its rightful owner.
Sponsored Links
1 / 24

Making Your Mobile Apps Sexy Using the Compact Framework 3.5 PowerPoint PPT Presentation


  • 76 Views
  • Uploaded on
  • Presentation posted in: General

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.

Download Presentation

Making Your Mobile Apps Sexy Using the Compact Framework 3.5

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Making your mobile apps sexy using the compact framework 3 5

Making Your Mobile Apps Sexy Using the Compact Framework 3.5

Stephen Leverett

DotNetConsult


Compact framework controls

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

.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

.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

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

Set up a Background Image

  • Add a resource to Project

  • Set “Build Action” under properties to “Embedded Resource”

  • Generate Resource Stream

  • Draw Image


Making your mobile apps sexy using the compact framework 3 5

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

Zoom effect

  • Setup Image

  • Create Image

  • Zoom into Image

  • Draw Normal and Zoom images


Making your mobile apps sexy using the compact framework 3 5

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();

}


Making your mobile apps sexy using the compact framework 3 5

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

Gradient Fill

  • Setup Win32Helper

  • Setup TRIVERTEX and GradientFill call

  • Initialize Graphics

  • Make GadientFill call

  • DrawImage


Making your mobile apps sexy using the compact framework 3 5

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;

}

}


Making your mobile apps sexy using the compact framework 3 5

[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;


Making your mobile apps sexy using the compact framework 3 5

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()));


Making your mobile apps sexy using the compact framework 3 5

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

Draw Image with Transparency

  • Setup BitMap and Graphics

  • Fill part of Graphics with Red(Black background)

  • ImageAttributes color set

  • Setup Image and DrawImage


Making your mobile apps sexy using the compact framework 3 5

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

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


Making your mobile apps sexy using the compact framework 3 5

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

Removing the Title Bar

  • Set the FormBorderStyle to none

  • Maximize FormWindowState

  • Example:

    this.FormBorderStyle = FormBorderStyle.None;

    this.WindowState=FormWindowState.Maximized;


Removing button bar

Removing Button Bar

  • Delete MainMenu from Form


Behaviour variations

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

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

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


  • Login