Professional Microsoft Smartphone Programming phần 9 pdf

Normally, before calling the DrawString() method, you should first call Graphics::MeasureString() to obtain a RectangleF structure of the bounding text box that can be passed to DrawString(). The underlying reason is that when a string in a font is measured, some extra spacing and overhanging glyphs will be added to the result. With this piece of information, you can use the DrawString() method to finely control the string display by placing the text at the appropriate location or adjusting the alignment. The following is an example of using the MeasureString() method to obtain the size of the text: // Measure string size first SizeF szeText = g.MeasureString(“.NET Compact Framework rocks!”, Font); g.DrawRectangle(new Pen(Color.Black), 0, 0, (int)szeText.Width, (int)szeText.Height); g.DrawString(“.NET Compact Framework rocks!”, Font, new SolidBrush(Color.Blue), 0, 0); To place your text string into a rectangular box, you must pass a Rectangle object to DrawString(): RectangleF rct = new RectangleF(30F, 30F, 200F, 100F); g.DrawString(“Smartphone Application rocks!”, Font, new SolidBrush(Color.Red), rct); If the rectangle is not wide enough to hold the string, then the text will wrap around to the next line if there is sufficient space. If no space is available, the text string will be truncated. The text is left-aligned and top-aligned by default. If you want to change the formatting, use a StringFormat object and pass it to DrawString(): RectangleF rct = new RectangleF(0, 30F, 200, 60); StringFormat strFmt = new StringFormat(); // Text will be put at the bottom of the Rectangle strFmt.LineAlignment = StringAlignment.Far; // Text will be put in the middle on a horizontal line strFmt.Alignment = StringAlignment.Center; g.DrawString(“ Mobile “, Font, new SolidBrush(Color.Black), rct, strFmt); The StringFormat::Alignment property determines how the text is aligned horizontally, and the StringFormat::LineAlignment property specifies the vertical position of the text in a rectangle. Both of these properties get the value from the StringAlignment enumeration, where StringAlignment:: Center means “in the middle,” StringAlignment::Near means “close to the beginning of a text,” and StringAlignment::Far means “to the other side of the beginning.” In a left-to-right writing system such as English, “near” refers to left-aligned and top-aligned. 398 Chapter 15 21_762935 ch15.qxp 11/20/06 8:00 AM Page 398 Working with Fonts The preceding examples use a form’s Font property to write text. Alternatively, you can create a System.Drawing.Font object by specifying a font name string, font size, and font style, chosen from the FontStyle enumeration, as shown in the following example: Font fntArial = new Font(“Arial”, 14, FontStyle.Bold | FontStyle.Underline); Another way to create a Font object is by specifying a System.Drawing.FontFamily, which represents a generic font type from which several fonts may be derived, as shown in the following example. The code also uses StringFormat objects to format the text within a RectangleF box. Note that the second StringFormat object, strFmt2, has a NoClip setting with its FormatFlags property. This specifies that if the text can’t be displayed within the rectangle ( recF2 in the example), then it will continue outside the bounding box. To clearly illustrate these settings in StringFormat, the bounding boxes for the two strings are displayed as well. Font fntMono = new Font(FontFamily.GenericMonospace,10,FontStyle.Italic); RectangleF rctF = new RectangleF(0F, 100F, 200F, 40F); RectangleF rctF2 = new RectangleF(0F, 150F, 40F, 60F); g.DrawRectangle(new Pen(Color.Black), (int)rctF.Left, (int)rctF.Top,(int)rctF.Width,(int)rctF.Height); g.DrawRectangle(new Pen(Color.Red), (int)rctF2.Left, (int)rctF2.Top, (int)rctF2.Width, (int)rctF2.Height); g.DrawString(“Smartphone Application rocks!”, fntMono, new SolidBrush(Color.Red), rctF); // Create a StringFormat object for text display settings StringFormat strFmt2 = new StringFormat(); // Align center strFmt2.Alignment = StringAlignment.Near; // Align bottom strFmt2.LineAlignment = StringAlignment.Center; // Set “No clipping” for the text strFmt2.FormatFlags = StringFormatFlags.NoClip; // Draw the string with the StringFormat object g.DrawString(“Mobile rocks!”, fntArial, new SolidBrush(Color.Red), rctF2, strFmt2 ); Figure 15-5 shows the display of these two text strings with different formatting. The first is top- and left-aligned by default because no StringFormat is applied, and the other is center- and left-aligned without clipping. 399 Graphics 21_762935 ch15.qxp 11/20/06 8:00 AM Page 399 Figure 15-5 As you can see from the example, drawing text in the .NET Compact Framework for Windows Smartphone typically involves creating a number of graphics objects, such as Pen, Brush, Font, RectangleF, Region, and so on. Generally, to get better performance while a user interacts with the GUI, you need to create these objects before the user interaction starts, rather than create them on-the-fly while handling control events. For example, if a black pen will be used many times in your application, you can just create it once during application startup and use it whenever needed. In addition, using the form or control’s Font property to draw text may lead to slower drawing performance, especially when many text strings are drawn. In this case, a Font object should be created before the GUI is loaded to the screen. Drawing Images You can draw images directly on the display surface or onto an Image object. If you only want to display an image with a format of bitmap (bmp), jpeg (jpg), png, gif, or icon (ico), simply use an image control (for example, a PictureBox). In addition, you can use an ImageList control to display images in a ListView control or a TreeView control. You can add images manually at design time on the ImageList control’s properties page; you can also do this programmatically in the code (by adding a dynamically created image to the ImageList). The following example shows how to use an ImageList control in a ListView control. We drag and drop these two controls to a Windows form, and manually add three 16 ×16 images (png files) to the ImageList. Then, when the form is shown, we generate the fourth image and add it to the ImageList. The ListView control is then populated with four text strings and is associated with the ImageList. After setting the ListView’s View property to SmallIcon, we show the ListView. private void Form3_Paint(object sender, PaintEventArgs e) { Bitmap newImage = new Bitmap(16, 16); Graphics gBitmap = Graphics.FromImage(newImage); gBitmap.Clear(Color.Red); gBitmap.DrawLine(new Pen(Color.White, 2.0F), 8, 0, 8, 16); 400 Chapter 15 21_762935 ch15.qxp 11/20/06 8:00 AM Page 400 imgList.Images.Add(newImage); // Draw the four images first Graphics g = CreateGraphics(); g.DrawImage(imgList.Images[0], 0, 0); g.DrawImage(imgList.Images[1], 20, 0); g.DrawImage(imgList.Images[2], 40, 0); g.DrawImage(imgList.Images[3], 60, 0); // Another way to use the ImageList: associate each image with an item in ListView for (int i = 0; i < 4; i++) { ListViewItem lstItem = new ListViewItem(“Test “ + i); lstItem.ImageIndex = i; listView1.Items.Add(lstItem); } listView1.SmallImageList = imgList; listView1.View = View.SmallIcon; listView1.Show(); g.Dispose(); gBitmap.Dispose(); } While reading the preceding code, you can safely skip the beginning part of it, as we discuss the bitmap creation and drawing functions shortly. Pay attention to the lines that relate to the ListView control listView1. To add items onto the ListView control, use a ListViewItem object, which is constructed with a text string and is associated with an index to the ImageList associated with the ListView. Note that a ListView has four types of views —SmallIcon, LargeIcon, List, and Details — each corre- sponding to a standard Windows list method. The images in our ImageList are used as small icons in the ListView accompanying the list items when View.SmallIcon is enabled. Figure 15-6 shows the ListView control with four list items and four small images. Figure 15-6 401 Graphics 21_762935 ch15.qxp 11/20/06 8:00 AM Page 401 There might be other scenarios in which you want to have direct control over what is displayed in order to create some special visual effects. In these cases, you need to use the Bitmap class and the Graphics:: DrawImage() method to display the image. Drawing Bitmaps The System.Drawing.Bitmap class is derived from the System.Drawing.Image class. To create a Bitmap class, use one of the five constructors with different parameters. You can create a Bitmap object based on an existing Image instance, a data stream (for an embedded resource; explained later), or an image filename. Or, you can create an empty bitmap with a specific size, and a pixel format as enumer- ated in System.Drawing.Imaging.PixelFormat. PixFormat defines the number of bits used for RGB, respectively. Following are the available PixFormat values for the .NET Compact Framework; there are more for the .Net Framework: ❑ Format16bppRgb555: 16 bits per pixel, with 5 bits each for red, green, and blue; the remaining one bit is not used ❑ Format16bppRgb565: 16 bits per pixel, with 5 bits for red, 6 bits for green, and 5 bits for blue ❑ Format24bppRgb: 24 bits per pixel, with 8 bits each for red, green, and blue ❑ Format32bppRgb: 32 bits per pixel, with 8 bits each for red, green, and blue; the remaining 8 bits are not used The following are some examples of creating Bitmap objects: Bitmap b1 = new Bitmap(@”\Storage Card\wind.jpg”); Bitmap b2 = new Bitmap(100, 100, System.Drawing.Imaging.PixelFormat.Format16bppRgb555); Bitmap b3 = new Bitmap(b1); Graphics g = CreateGraphics(); // Draw an image g.DrawImage(b3,0, 0); // Dispose images to release resource b1.Dispose(); b2.Dispose(); b3.Dispose(); In these examples, Bitmap b3 is created from Bitmap b1, which in turn is loaded from a jpeg file at the specified path. Then b3 will be displayed on the screen using one of the overloaded methods, Graphics::DrawImage(). The parameters in this call are the Image instance (b3) and a coordinates pair specifying where the image will be displayed. Drawing on a Bitmap As mentioned earlier in this chapter, the Graphics object can be created with an Image object by calling the Graphic::FromImage() method. For example, after creating an empty Bitmap object, you can obtain a Graphics object from the Bitmap and use it to draw vectors and text onto the Bitmap, just as you would draw on a display surface: 402 Chapter 15 21_762935 ch15.qxp 11/20/06 8:00 AM Page 402 // Create a bitmap image int size = 60; Bitmap bmp = new Bitmap(size, size, System.Drawing.Imaging.PixelFormat.Format16bppRgb555); Graphics g = Graphics.FromImage(bmp); // Draw onto the bitmap Pen penWhite = new Pen(Color.White, 2.0F); g.Clear(Color.DarkBlue); g.DrawLine(penWhite,0, 5, size, 5); g.DrawLine(penWhite, 0, 10, size, 10); g.DrawLine(penWhite, 5, 0, 5, size); g.DrawLine(penWhite, 10, 0, 10, size); g.DrawEllipse(new Pen(Color.Yellow, 2.0F), 15, 15, 40, 40); // Draw the bitmap on screen Graphics gScreen = CreateGraphics(); // Display the image at its original size gScreen.DrawImage(bmp, 0, 0); // Rectangle of the original bitmap Rectangle rct0 = new Rectangle( 0, 0, bmp.Width, bmp.Height); // Enlarge rectangle for the bitmap to fit in Rectangle rct1 = new Rectangle( bmp.Width + 5, bmp.Height + 5, bmp.Width * 2, bmp.Height * 2); // Display the bitmap, but enlarged gScreen.DrawImage(bmp, rct1, rct0, GraphicsUnit.Pixel); g.Dispose(); The preceding example demonstrates a technique called double buffering, which draws the image in memory on an off-screen Graphics object, and then displays the prepared image from memory to the screen (commonly known as blitting). This can significantly reduce display flickering and is widely using in desktop graphics applications. In the code, a Graphics object is created from the Bitmap instance. The g.Clear(Color.DarkBlue) call clears the background of the bitmap with a selected color. Four lines are drawn on it, two horizontal and two vertical, and then a circle is drawn. To draw the bitmap on the screen, a different Graphics object is created. The bitmap is drawn twice on the screen: the first time at the origin ( 0, 0) at its original size (bmp.Width, bmpHeight), and the second time at another place ( bmp.Width + 5, bmp.Height – 5) at doubled its original size. The first Graphics::DrawImage call gScreen.DrawImage(bmp, 0, 0); passes three parameters: 403 Graphics 21_762935 ch15.qxp 11/20/06 8:00 AM Page 403 ❑ The Bitmap instance (bmp) ❑ A coordinates pair specifying the place to draw the image (0, 0) Thus, this method is used to draw the entire image at a specified location. The second Graphics::DrawImage() call gScreen.DrawImage(bmp, rct1, rct0, GraphicsUnit.Pixel); passes four parameters: ❑ The image instance (bmp). ❑ The bounding rectangle in which the image or a portion of the image will be drawn (rct1). ❑ A rectangle representing the portion of the original image to be drawn (rct0). ❑ The GraphicsUnit value (GraphicsUnit.Pixel) indicating the unit of measure. Only GraphicsUnit.Pixel is supported in the .NET Compact Framework. Thus, this call draws the specified portion of the image at the specified location and with the specified size. In our example, we drew the entire bitmap and doubled its size. Figure 15-7 shows the screen dis- play of the emulator. Figure 15-7 There are similar overloaded methods of Graphics::DrawImage() that require a different signature but essentially do the same thing. One of the overloaded DrawImage()methods accepts a parameter of a System.Drawing.Imaging.ImageAttributes object that controls color transparency. You need to define a color key that consists of a high key value and a low key value; any color that has each of its three components (red, green, blue) falling into the corresponding range between the low key and high key is made transparent. You can use the SetColorKey() method of the ImageAttributes object to define a color key. 404 Chapter 15 21_762935 ch15.qxp 11/20/06 8:00 AM Page 404 In the .NET Compact Framework, the ImageAttributes::SetColorKey(Color lowKey, Color highKey) method can accept only a single color key, meaning that both the low key and the high key must be the same. However, in the .NET Framework, the two keys can be different, specifying a color key range. If the image has a matching color, that color will not be drawn. The overloaded DrawImage() method using ImageAttributes has seven parameters: the Image object, a Rectangle object specifying the target rectangle for the image, X and Y coordinates, width and height that collectively specify a rectangle relative to the source image that will be drawn, GraphicsUnit, and an ImageAttributes object. The following is an example of using this method. The bitmap is drawn in the rectangle destRct. The bitmap’s dark-blue color will not be drawn, as it matches the color key defined in the ImageAttributes imgAttr object imgAttr : Rectangle destRct = new Rectangle(bmp.Width, 0, bmp.Width, bmp.Height); System.Drawing.Imaging.ImageAttributes imgAttr = new System.Drawing.Imaging.ImageAttributes(); // Set the transparent color key; both high key and low key must be the same imgAttr.SetColorKey(Color.DarkBlue, Color.DarkBlue); gScreen.DrawImage(bmp, destRct, 0, 0, bmp.Width , bmp.Height, System.Drawing.GraphicsUnit.Pixel, imgAttr); Manipulating a Bitmap A bitmap is a series of pixels. Graphics entities drawn on the image are eventually saved pixel by pixel, each taking a color value that can be 16 bits or 32 bits, as defined in System.Drawing.Imaging .PixelFormat . The Bitmap class provides the GetPixel() and SetPixelI() methods to control each pixel in the bitmap. GetPixel(int x, int y) returns a Color object at Pixel (x, y) on the bitmap, whereas the SetPixel(int x, int y, Color c) method sets the color of Pixel (x, y) to Color c. The following sample program demonstrates using GetPixel(), SetPixel(), and a timer to create some animation on an image file. The idea is to create a bitmap with a background color ( Color.SeaGreen), and then randomly draw some pixels onto the bitmap. It the pixel selected has a color of the background, draw a different color for it; otherwise, draw the pixel with the background color. We use a timer that fires every 500 milliseconds; each time, a DrawPixels() method will be called and 100 randomly selected pix- els on the bitmap will be drawn. The Enter button on the navigation pad can enable and disable the timer, thus pausing and restarting the animation. When the program runs, at first you will see more and more red dots show up on the green background. While the number of red dots continues to increase, the color of the display will gradually stabilize and there will be roughly the same number of dots of each color. Overall, the bitmap looks like many blinking dots on a green background. The following is the complete form class: using System; using System.Collections.Generic; 405 Graphics 21_762935 ch15.qxp 11/20/06 8:00 AM Page 405 using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms; namespace Chap15Graphics { public partial class Form4 : Form { // Random number generator private Random r = null; // Timer for drawing Timer timer = new Timer(); bool firstDraw = true; // The bitmap object for drawing Bitmap bmp = null; public Form4() { InitializeComponent(); r = new Random(); // Timer fires every 500 milliseconds timer.Interval = 500; // Timer’s event handler timer.Tick += new EventHandler(DrawPixels); } private void DrawPixels(object sender, System.EventArgs e) { for (int i = 0; i < 100; i++) { // Randomly select a pixel // x and y are both with the range of [0,200) int x = r.Next(200); int y = r.Next(200); Color c1 = bmp.GetPixel(x, y); // Toggle the color of the pixel if (c1 == Color.SeaGreen) bmp.SetPixel(x, y, Color.Red); else bmp.SetPixel(x, y, Color.SeaGreen); } // Draw the image. Is there a light-weight way to do this? Graphics g = CreateGraphics(); g.DrawImage(bmp, 0, 0); g.Dispose(); } private void Form4_Paint(object sender, PaintEventArgs e) { if (firstDraw) 406 Chapter 15 21_762935 ch15.qxp 11/20/06 8:00 AM Page 406 { // Create a Bitmap bmp = new Bitmap(200, 200, System.Drawing.Imaging.PixelFormat.Format24bppRgb); // Draw a background for this Bitmap Graphics g = Graphics.FromImage(bmp); g.Clear(Color.SeaGreen); Graphics gScreen = e.Graphics; gScreen.DrawImage(bmp, 0, 0); gScreen.Dispose(); g.Dispose(); firstDraw = false; // Enable the timer timer.Enabled = true; } } private void Form4_KeyDown(object sender, KeyEventArgs e) { if ((e.KeyCode == System.Windows.Forms.Keys.Left)) { // Left Application.Exit(); } if ((e.KeyCode == System.Windows.Forms.Keys.Enter)) { // Enter if (timer.Enabled) timer.Enabled = false; else timer.Enabled = true; } } } } The class has a private member of the Random object, which is used to obtain random coordinates within the range of the bitmap size. The Random object is initialized in the constructor of the class. Together with the Random object, a System.Windows.Forms.Timer object (not to be confused with System .Timers.Timer or System.Threading.Timer) is initialized in the class constructor. The timer’s inter- val ( timer.Interval property) is set to 500 milliseconds. In fact, due to the runtime overhead, a timer will need to take many milliseconds to fire, even if you can set this Interval property to 1 millisecond. An EventHandler delegate is created to pass the timer procedure, DrawPixels(), to the Timer object via the Timer::Tick event. The form’s OnPaint event handler draws the bitmap with a background color and starts the timer. When the timer expires, the DrawPixels() method is called by the main UI thread and 100 randomly pixels are drawn. Note that we don’t need to reset the timer’s interval; the timer will keep going until it is disabled. 407 Graphics 21_762935 ch15.qxp 11/20/06 8:00 AM Page 407 [...]... Boxed Value Types 14 – – – – – Process Heap – 360 617 75 59 72 16240 Short Term Heap – 0 1286 96 5 0 2 494 4 JIT Heap – 0 1572 50813 0 1 199 12 App Domain Heap – 0 4122 1028 29 0 156080 GC Heap – 0 67326 1880365 0 2588672 Native Bytes JITed 134220 168 440 305 80 5540 Methods JITed 440 – – – – – Bytes Pitched 110104 112 4 09 2 69 0 5540 Methods Pitched 4 09 – – – – – Method Pitch Latency Time (ms) 11 11 1 11 11... Use After GC – 296 056 4636 1577820 296 056 1656704 415 22_76 293 5 ch16.qxp 11/20/06 8:00 AM Page 416 Chapter 16 You can see that for this performance counter, the last piece of data is 296 056 bytes, which is the amount of bytes after last garbage collection There are 4636 data items available for this counter The mean value of this counter is 1577820, and the minimum and maximum are 296 056 and 1656704,... Garbage Collections (GC) 4636 – – – – – Bytes Collected by GC 50 192 04248 486468 4636 1082658 486468 1222824 Managed Bytes in Use After GC – 6208 4636 135325 6208 214084 Total Bytes in Use After GC – 296 056 4636 1577820 296 056 1656704 GC Compactions 0 – – – – – Code Pitchings 1 – – – – – Calls to GC.Collect 0 – – – – – GC Latency Time (ms) 142 496 24 4636 30 0 66 Pinned Objects 0 – – – – – Objects Moved by... graphics applications for Smartphone, you must keep one thing in mind: performance This is extremely critical for managed applications, which tend to be slower than native code A rule of thumb is to make use of off-screen buffers to minimize direct screen drawing and reduce the number of Graphics objects in your application 4 09 21_76 293 5 ch15.qxp 11/20/06 8:00 AM Page 410 22_76 293 5 ch16.qxp 11/20/06 8:00... library guidelines ❑ XML data ❑ Windows forms General Principles As discussed in previous chapters, programming for Smartphone means you have to work with resource-constrained devices: memory, processor, form factor, power, network bandwidth, and so 22_76 293 5 ch16.qxp 11/20/06 8:00 AM Page 412 Chapter 16 on Smartphone application performance tuning is somewhat more challenging than on desktop computers,... Monitor.Enter Calls 9 – – – – – Contested Monitor.Enter Calls 0 – – – – – Peak Bytes Allocated (native + managed) 2862248 – – – – – Managed Objects Allocated 150733 – – – – – Managed Bytes Allocated 50056 098 44 28 150733 33208 8 200064 Managed String Objects Allocated 50158 – – – – – Bytes of String Objects Allocated 5002566140 – – – – – Table continued on following page 413 22_76 293 5 ch16.qxp 11/20/06... user’s experience with a Smartphone application is determined largely by the application’s performance Consider an on-the-go salesperson launching a Smartphone application to access an enterprise database via a wireless data network If the application runs very slowly or the UI is virtually unresponsive during a transaction, the salesperson would look for a new application A Smartphone application must... 22_76 293 5 ch16.qxp 11/20/06 8:00 AM Page 4 29 Performance XML Serialization You can use the XMLSerializer class to serialize and deserialize objects to and from an XML document XMLSerializer will serialize the metadata of your object — an expensive operation As a result, you should create only one instance for a single type Choosing XML as the vehicle for data serialization is not suggested for Smartphone. .. For example, always use DiffGrams (see Chapter 9 for details about this setting) to perform incremental data updates to DataSets, or apply some compression to the data being transferred As mentioned earlier, using XML Web services to pass data is suggested only when the amount of transactional data is small or there is no other open interface 4 29 22_76 293 5 ch16.qxp 11/20/06 8:00 AM Page 430 Chapter... Content setting means that the image file, like HTML files in a web application project, will be part of the output group downloaded to the client during deployment Figure 15-8 408 21_76 293 5 ch15.qxp 11/20/06 8:00 AM Page 4 09 Graphics If the image file is named a.bmp and the project’s namespace is MyApp, the embedded resource will be named MyApp.a.bmp (case-sensitive) This information is stored in the assembly’s . left-aligned without clipping. 399 Graphics 21_76 293 5 ch15.qxp 11/20/06 8:00 AM Page 399 Figure 15-5 As you can see from the example, drawing text in the .NET Compact Framework for Windows Smartphone typically. Types 14 – – – – – Process Heap – 360 617 75 59 72 16240 Short Term Heap – 0 1286 96 5 0 2 494 4 JIT Heap – 0 1572 50813 0 1 199 12 App Domain Heap – 0 4122 1028 29 0 156080 GC Heap – 0 67326 1880365 0 2588672 Native. objects in your application. 4 09 Graphics 21_76 293 5 ch15.qxp 11/20/06 8:00 AM Page 4 09 21_76 293 5 ch15.qxp 11/20/06 8:00 AM Page 410 Performance A user’s experience with a Smartphone application is