GDI+

Create a Screen Saver with GDI+

2006-10-02T06:37:00Z

Create a Screen Saver with GDI+

You might think there’s something mysterious about a Microsoft Windows screen saver, but it’s really nothing more than a Windows application in disguise. You can easily build your own screen saver by creating a regular Windows application with a form that’s displayed in dialog mode, maximized to fill the screen, and waiting for a cue to be dismissed. The cue can be a mouse click or a movement of the mouse. This sample shows you how to create and deploy a screen saver with Visual Basic .NET.

FormBorderStyle = None
ControlBox = False
MaximizeBox = False
MinimizeBox = False
ShowInTaskbar = False
SizeGripStyle = Hide
TopMost = True
WindowState = Maximized

TIP
While you’re developing the screen saver, set the form’s size to a fraction of the screen’s size, set the ControlBox property to True, and set the WindowState property to Normal. That way the form won’t cover the entire screen, you can see your code for debugging purposes, and the form will have a title bar so that you can move it around.

Code Walkthrough

The sample solution has two projects: Create a Screensaver with GDI+.vbproj and GDI+ Screen Saver.vbproj. The second one is the screen-saver project, while the first is a small installation program to install your screen saver once you’ve completed it. The procedures we’ll describe next are in the screen-saver project, except for those in the “Deploying the Screen Saver” section. Figure 10-5 shows the screen saver form during development, small and sizeable.

Figure 10-5. While you’re developing your screen saver, keep the form small and sizeable so that you can test and debug it easily.

Application Entry Point

Sub Main is the entry point into our application, the first procedure that executes when the screen-saver program is run. The STAThread attribute means this application will run in a single-threaded apartment, and it’s needed for COM interoperability reasons. Windows will pass parameters to this program whenever a user is setting up the screen saver using the Display Properties │ Screen Saver property screen. The parameters will be passed in an array named args, and Windows will pass a /p, /c, or /s argument, depending on how the screen saver should behave. We’ll explain each argument in the following paragraphs.

First we need to determine whether an argument was passed and, if so, which one. A /p argument means we’re being asked to show a preview of the screen saver. We haven’t implemented the preview functionality here because it involves creating and joining threads and is beyond the scope of this sample, so we’ll simply exit the application.

<STAThread()> Shared Sub Main(ByVal args As String())
    If args.Length > 0 Then
        If args(0).ToLower = "/p" Then
            Application.Exit()
        End If

If the screen saver should offer a form for user options, Windows passes a /c, so we’ll create and display a frmOptions form, and then exit when the form is closed. If the screen saver should simply execute normally, Windows passes a /s, so we’ll create and display a screenSaverForm and then exit when the form is closed.

        If args(0).ToLower.Trim().Substring(0, 2) = "/c" Then
            Dim userOptionsForm As New frmOptions()
            userOptionsForm.ShowDialog()            Application.Exit()
        End If
        If args(0).ToLower = "/s" Then
            Dim screenSaverForm As New frmSceenSaver()
            screenSaverForm.ShowDialog()            Application.Exit()
        End If

If there are no arguments, we’ll simply execute the screen saver normally, because it means that the user double-clicked the .scr or .exe file or ran it from within Visual Studio. We know this because otherwise Windows would have passed a parameter to the application.

    Else
        Dim screenSaverForm As New frmSceenSaver()
        screenSaverForm.ShowDialog()        Application.Exit()
    End If
End Sub

Normal Operation

When the screen-saver form is loaded, we initialize it by creating the Graphics object we’ll use for drawing, loading the user’s saved options (creating an options file if one does not exist), setting the speed based on the user-defined options, and enabling the timer. The speed setting dictates how quickly shapes will be displayed when the screen saver is active.

Private Sub frmSceenSaver_Load(...
    m_Graphics = Me.CreateGraphics()
    m_Options.LoadOptions()    Select Case m_Options.Speed
        Case "Slow"            Me.tmrUpdateScreen.Interval = 500
        Case "Fast"            Me.tmrUpdateScreen.Interval = 100
        Case Else
            Me.tmrUpdateScreen.Interval = 200
    End Select
    Me.tmrUpdateScreen.Enabled = True
End Sub

All subsequent operations are in response to events. When the timer ticks, a new shape is drawn on the screen, and this continues until a mouse button is clicked or the mouse is moved over the form.

Private Sub tmrUpdateScreen_Tick(...
    DrawShape()End Sub

The DrawShape subroutine draws a randomly colored, randomly sized shape to the screen, based on some user-defined parameters. It starts by computing the largest possible values for the screen, as indicated by the form width and height. (Remember that the form is maximized.) Note that x1, x2, y1, and y2 are coordinates for random points to be generated later, myRect is the rectangle within which the shapes will be drawn, and myColor is the color to be used to draw the shapes.

Private Sub DrawShape()
    Dim maxX As Integer = Me.Width    Dim maxY As Integer = Me.Height    Dim x1, x2, y1, y2 As Integer
    Dim myRect As Rectangle
    Dim myColor As Color

Next we generate some random numbers ranging between zero and the maximums we determined earlier, and we create a rectangle based on the generated coordinates.

    x1 = m_Random.Next(0, maxX)
    x2 = m_Random.Next(0, maxX)
    y1 = m_Random.Next(0, maxY)
    y2 = m_Random.Next(0, maxY)
    myRect = New Rectangle(Math.Min(x1, x2), Math.Min(y1, y2), _
        Math.Abs(x1 - x2), Math.Abs(y1 - y2))

We’ll select a color at random for the shape we’re about to draw. If the user wants transparent shapes, we’ll allow the transparency to be randomly generated as well. If not, we’ll set the Alpha to 255 (the maximum). Alpha, which is the first argument to the Color.FromArgb function, determines how opaque the shape will be.

    If m_Options.IsTransparent Then
        myColor = Color.FromArgb(m_Random.Next(255), m_Random.Next(255), _
            m_Random.Next(255), m_Random.Next(255))
    Else
        myColor = Color.FromArgb(255, m_Random.Next(255), _
            m_Random.Next(255), m_Random.Next(255))
    End If

Finally, we draw an ellipse or rectangle based on user-defined options.

    If m_Options.Shape = "Ellipses" Then
        m_Graphics.FillEllipse(New SolidBrush(myColor), myRect)
    Else
        m_Graphics.FillRectangle(New SolidBrush(myColor), myRect)
    End If
End Sub

Ending the Application

When the user clicks a button or moves the mouse, we want the screen saver to quit. The following routines accomplish that. The first one simply exits if any mouse button is clicked on the screen saver form.

Private Sub frmSceenSaver_MouseDown(...
    Application.Exit()End Sub

The second one responds to a mouse movement. Because the MouseMove event can sometimes be fired by very trivial moves of the mouse, we’ll verify that the mouse has actually been moved by at least a few pixels before exiting. To do that, we store the current location of the mouse, turn on a switch that shows we’re tracking the mouse movements, and exit only if the mouse has been moved at least 10 pixels.

Private Sub frmSceenSaver_MouseMove(...
    If Not m_IsActive Then
        Me.m_MouseLocation = New Point(e.X, e.Y)
        m_IsActive = True
    Else
        If Math.Abs(e.X - Me.m_MouseLocation.X) > 10 Or _
            Math.Abs(e.Y - Me.m_MouseLocation.Y) > 10 Then
            Application.Exit()
        End If
    End If
End Sub

Setting Options

We want the user to be able to choose screen-saver options such as how fast shapes should be drawn on the screen, whether they should be rectangles or ellipses, and whether the shapes should be transparent. So we provide an Options form, which gets called when the screen-saver program is invoked with the /c argument.

We’ve defined a class named Options (which you can see in Options.vb) to hold the preferences as properties and provide methods for loading and saving the preferences. Creating a class makes it easy to save the options to disk in XML format by serializing the class and then later retrieving them by deserialization. (See “Application #82: Serialize Objects” for more details.)

The btnOK_Click procedure in frmOptions creates an Options object and sets its values to the user-selected values on the form. It then saves the choices to disk.

Private Sub btnOK_Click(...
    Dim myOptions As New Options()    If Me.optEllipses.Checked Then
        myOptions.Shape = "Ellipses"
    Else
        myOptions.Shape = "Rectangles"
    End If
    myOptions.IsTransparent = Me.chkTransparent.Checked
    myOptions.Speed = Me.cboSpeed.Text
    myOptions.SaveOptions()    Me.Close()
End Sub

The Form_Load event procedure of frmOptions loads the current user-defined options and sets the controls on the form accordingly. The Load method of the Options class always returns values, even if the options file doesn’t currently exist.

Private Sub frmOptions_Load(...
    Dim myOptions As New Options()    myOptions.LoadOptions()
    Me.cboSpeed.Text = myOptions.Speed    Me.chkTransparent.Checked = myOptions.IsTransparent    If myOptions.Shape = "Ellipses" Then
        Me.optEllipses.Checked = True
    Else
        Me.optRectangles.Checked = True
    End If
End Sub

Deploying the Screen Saver

Screen savers live in the Windows System directory, which by default is C:\Windows\System32. To install your new screen saver, you simply have to copy the .exe application file to the System directory, changing the extension from .exe to .scr. In the sample solution, we’ve provided a project that copies the file to its correct location. It assumes you have a copy of “101 VB.NET Sample Applications Screensaver.scr” in the root directory of the 89 Create a Screensaver with GDI+ project.

If you don’t, copy “101 VB.NET Sample Applications Screensaver.exe” from GDI+ Screen Saver\bin to the root directory of the 89 Create a Screensaver with GDI+ project and change the extension to .scr.

Once you’re sure the screen-saver file is in place, the btnInstall_Click procedure of frmMain handles the installation for you. Notice the use of Environment.CurrentDirectory (the folder where the executable is running) and Environment.SystemDirectory (the Windows System directory).

Private Sub btnInstall_Click(...
    Dim fileName As String = _
        "101 VB.NET Sample Applications Screensaver.scr"
    Dim sourceFile As String = _
        Environment.CurrentDirectory & "\..\" & fileName
    Dim destFile As String = Environment.SystemDirectory & "\" & fileName
    Try
        File.Copy(sourceFile, destFile, True)
    Catch ex As Exception
        MsgBox(ex.ToString(), MsgBoxStyle.Exclamation, Me.Text)
    End Try
End Sub

Conclusion

In this sample application, you’ve seen that a screen saver is simply a Windows Application in disguise. Once you change its file extension from .exe to .scr and put it in the Windows System directory, it will show up on the list of screen savers in Control Panel │ Display. You’ve seen that Windows passes /p, /c, or /s arguments to the screen saver to indicate how it should behave. They indicate Preview, Set Options, and Normal, respectively. We’ve also shown you that generating random colors and even random levels of transparency is easy with the Random class and the FromArgb function of the Color class.

About The Author

Saahil Khan has been a Team Lead with Offshore Programmers Ltd and freelance write with Megasolutions Ltd. He has over 5 years of experience in industrial automation and technologies like Java, .NET, and Flash. Saahil has extensive experience in strategizing/architecting solutions in .NET. Today, Sahil is completely focused on Microsoft .NET Technologies like C#, ASP.NET, and emerging technologies like FlashRemoting.

Work with GDI+ to Manipulate Images

2006-10-02T06:32:00Z

Work with GDI+ to Manipulate Images

This sample shows you how to manipulate images using GDI+, including changing the size of an image and rotating, zooming, and cropping an image.

GDI+ provides new ways to work with images. This example illustrates several of them.

Changing the Size of an Image

Once you’ve loaded your image into a PictureBox, you can apply one of four SizeMode settings to the PictureBox:

AutoSize
The PictureBox size is adjusted to match the size of the image in it.
CenterImage
The image is displayed in the center of the PictureBox. If the image is larger than the PictureBox, its outside edges are clipped.
Normal
The image is located in the upper left corner of the PictureBox. Its right and bottom edges are clipped if it is larger than the PictureBox.
StretchImage
The opposite of AutoSize. The image is stretched or shrunk to fit the size of the PictureBox.

Rotating Images

The Image class RotateFlip method lets you rotate an image, flip it, or both. You provide the method with a RotateFlipType argument (for example, Rotate180FlipX) that determines how many degrees you want to rotate the image and the axis, if any, on which you want to flip it. Choices include rotation by 90, 180, and 270 degrees; flipping on the x-axis, y-axis, or both; and combinations of all these options. Rotation is always clockwise.

Zooming and Cropping Images

Zooming means resizing the image so that it appears that the user’s perspective has changed by being either brought closer to or moved farther away from the picture.

Cropping consists of creating a new image at a size you specify and filling it with the portion of the old image that will fit the dimensions of the new one. If you want to allow the user to undo the crop, you need to create a variable that holds a copy of the bitmap before it’s cropped. Figure 10-4 shows an image that is both rotated and cropped.

Figure 10-4. The WaterLilies.jpg, which is bigger than the PictureBox, is centered within it, and its edges are cropped. The inset shows a portion of the image after it is rotated by 90 degrees.

Code Walkthrough

Let’s examine some ways we can manipulate an image, starting with resizing it.

Image Sizing

All four size settings mentioned previously are represented by four Size Mode radio buttons on the sample form. The SizeModeRadioButtons_CheckedChanged procedure handles the CheckedChanged events of all four radio buttons, and it adjusts the PictureBox.SizeMode property accordingly. Each radio button stores one of the values of the PictureBoxSizeMode enumeration (whose values are 0 through 3) in its Tag property.

Private Sub SizeModeRadioButtons_CheckedChanged(...
    Dim opt As RadioButton = CType(sender, RadioButton)
    Dim sm As PictureBoxSizeMode = CType(opt.Tag, PictureBoxSizeMode)
    If opt.Checked Then
        picImage.SizeMode = sm

You must manually reset the PictureBox to its original size if AutoSize has been set. It will not automatically return to the size set in the designer.

        If sm = PictureBoxSizeMode.AutoSize Then
            btnFit.Enabled = False
        Else
            btnFit.Enabled = True
            picImage.Width = PICTUREBOX_WIDTH
            picImage.Height = PICTUREBOX_HEIGHT        End If
    End If
End Sub

The Fit procedure makes the image fit properly in the PictureBox. You might think that AutoSize would make the image appear in the PictureBox according to its true aspect ratio within the fixed bounds of the PictureBox. But AutoSize simply expands or shrinks the PictureBox itself. So the Fit procedure determines whether the image is smaller than the PictureBox. If it is, and if Fit was called by the Zoom In button, it centers the image.

Private Sub Fit()
    If picImage.Image.Width < picImage.Width And _
        picImage.Image.Height < picImage.Height Then
        If Not IsFitForZoomIn Then
            picImage.SizeMode = PictureBoxSizeMode.CenterImage
        End If
    End If
    CalculateAspectRatioAndSetDimensions()
End Sub

Image Rotation

As we mentioned earlier, rotation is always clockwise when you use the RotateFlip method, and in btnRotateRight_Click in the following code, we’re simply rotating the image by 90 degrees. In btnRotateLeft_Click, we’re achieving the left rotation by rotating the image by 270 degrees, which is the same as if we had rotated it counter-clockwise by 90 degrees. Note that in each case we need to refresh the PictureBox after the rotation.

Private Sub btnRotateRight_Click(...
    picImage.Image.RotateFlip(RotateFlipType.Rotate90FlipNone)    picImage.Refresh()
End Sub

Private Sub btnRotateLeft_Click(...
    picImage.Image.RotateFlip(RotateFlipType.Rotate270FlipNone)    picImage.Refresh()
End Sub

Zooming

To zoom, we resize the image, as shown in the following procedure. When zooming in or out, the SizeMode controls on the sample form are disabled. Otherwise, the zooming won’t work as anticipated. The following If test ensures that the initial Zoom In transition is smooth. Without the test, if the SizeMode is something other than AutoSize, the image can appear to Zoom Out on the first click, and then Zoom In on subsequent clicks.

Private Sub btnZoomIn_Click(...
    If grpSizeMode.Enabled Then
        picImage.SizeMode = PictureBoxSizeMode.AutoSize    End If
    grpSizeMode.Enabled = False
    btnFit.Enabled = True
    IsFitForZoomIn = True

The StretchImage mode works best for zooming because the image is forced to conform to the size of the PictureBox. Zoom works best if you first fit the image according to its true aspect ratio. (See CalculateAspectRatioAndSetDimensions.)

When it’s time to actually do the zoom, you do it by simply adjusting the image’s dimensions up or down—in this case, by 25 percent. You could, of course, choose any increment you want, including letting the user enter it.

    picImage.SizeMode = PictureBoxSizeMode.StretchImage
    Fit()
    picImage.Width = CInt(picImage.Width * 1.25)
    picImage.Height = CInt(picImage.Height * 1.25)
End Sub

Private Sub btnZoomOut_Click(...
    grpSizeMode.Enabled = False
    btnFit.Enabled = True
    Fit()
    picImage.SizeMode = PictureBoxSizeMode.StretchImage
    picImage.Width = CInt(picImage.Width / 1.25)
    picImage.Height = CInt(picImage.Height / 1.25)
End Sub

The following procedure calculates and returns the image’s aspect ratio and sets its proper dimensions. It’s used by the Fit procedure and also for saving thumbnails of images.

Private Function CalculateAspectRatioAndSetDimensions() As Double
    Dim ratio As Double
    If picImage.Image.Width > picImage.Image.Height Then
        ratio = picImage.Image.Width / _
                picImage.Image.Height
        picImage.Height = CInt(CDbl(picImage.Width) / ratio)    Else
        ratio = picImage.Image.Height / _
                picImage.Image.Width
        picImage.Width = CInt(CDbl(picImage.Height) / ratio)    End If
    Return ratio
End Function

Cropping

In our example, we accept upper left x- and y-coordinates from the user, along with the width and height of the desired new image. Then we create a rectangle defined by those coordinates (relative to the upper left corner of the PictureBox) and the desired width and height.

Private Sub btnCrop_Click(...
    If IsValidCropValues() Then
        imgUndo = picImage.Image
        btnUndo.Enabled = True
        Dim recSource As New Rectangle(CInt(txtXCoord.Text), _
            CInt(txtYCoord.Text), CInt(txtWidth.Text), _
            CInt(txtHeight.Text))

CAUTION
You might be tempted to create a Graphics object off the PictureBox (rather than a new Bitmap) and then to clear the PictureBox and draw the cropped image onto it, like this:

Dim grPicImage As Graphics = picImage.CreateGraphics
grPicImage.Clear(picImage.BackColor)
grPicImage.DrawImage(picImage.Image, 0, 0, recSource, _
    GraphicsUnit.Pixel)

This will appear to work, but as soon as you use any of the other controls on the form you’ll see that the PictureBox actually still contains the original image, not the cropped one.

Then we create a new, blank Bitmap on which we will draw the cropped image. We get a Graphics object from the Bitmap for drawing, and we draw the image in the upper left corner of the Bitmap. Finally, we set the PictureBox image to the new cropped image.

        Dim bmpCropped As New Bitmap(CInt(txtWidth.Text), _
            CInt(txtHeight.Text))
        Dim grBitmap As Graphics = Graphics.FromImage(bmpCropped)
        grBitmap.DrawImage(picImage.Image, 0, 0, recSource, _
            GraphicsUnit.Pixel)
        picImage.Image = bmpCropped
    End If
End Sub

Conclusion

In this sample application, we’ve shown you that an image in a PictureBox can be resized several ways by setting the SizeMode property of the PictureBox. You’ve seen that you can rotate and flip an image at the same time, and the RotateFlip method accepts a variety of RotateFlipType arguments that let you turn and flip an image in any direction you want. Zooming means resizing the image. Be careful about the first user click after choosing Zoom In if the SizeMode is something other than AutoSize.

About The Author

Work with GDI+ Text

2006-10-02T06:22:00Z

Work with GDI+ Text

You might find it surprising that to display text on a form, PictureBox, or some other surface you need to draw it—but that’s exactly the way it is. This sample shows some of the many features available when using GDI+ to work with text.

Fonts and text are rendered by means of GDI+, and the major method you’ll use to display text to the screen is the DrawString method of the Graphics object. You need four essential items to display text using DrawString:

The text to be displayed
A font in which you want the text displayed
A brush to draw with
The location where it should be displayed, which can be x and y coordinates or a rectangle within which the text will be displayed

Whereas you use a Pen to draw lines and curves, you need a Brush to draw text. As always, the Brush is a holder for characteristics of the drawing, while the Graphics object provides the methods for doing the drawing.

You have a variety of options when displaying text. You always display text within a bounding rectangle, within which you can use hatch brushes, texture brushes, gradient brushes, and of course, solid brushes. You must carefully measure the size of the text you intend to display, because the size of the bounding rectangle will determine whether the text is appropriately positioned on the screen and whether it will fit in the space provided. Figure 10-3 shows text reflected by the TranslateTransform method.

Figure 10-3. When you draw text with GDI+ brushes, you can use transformations to show the text in a variety of orientations.

Code Walkthrough

We’ll examine several options for displaying text on a drawing surface, illustrating the point we made earlier—that text must be drawn.

Block Text

Our first option creates the sample text with a block appearance. We begin by setting up the brushes we’ll use for the foreground and background. We need a font object for the text, so we create one, using the values the user has set. Notice how we’ve used the CheckState of the chkBold check box. CheckState.Checked is equal to 1 and Unchecked is 0. FontStyle.Bold is equal to 1 and Regular is 0. So we simply cast the check state of the check box to a font style and we’ve declared whether we want boldface type or not. Then we create a Graphics object from the picture box and clear the box.

Private Sub btnBlockText_Click(...
    Dim myForeBrush As Brush = Brushes.Aquamarine
    Dim myBackBrush As Brush = Brushes.Black
    Dim myStyle As FontStyle = CType(chkBold.CheckState, FontStyle)
    Dim myFont As New Font("Times New Roman", Me.nudFontSize.Value, _
        myStyle)
    Dim g As Graphics = picDemoArea.CreateGraphics()
    g.Clear(Color.White)

We need to determine the size that will be required to draw the sample text. The MeasureString method provides the exact dimensions of the provided string, so you can determine whether it will fit in the area where you want to display it. MeasureString returns its results in a SizeF structure, which has Width and Height properties. Using those properties, we calculate the x- and y-coordinates for the starting point of our display.

    Dim textSize As SizeF = g.MeasureString(Me.txtSample.Text, myFont)
    Dim xLocation As Single = (picDemoArea.Width - textSize.Width) / 2
    Dim yLocation As Single = (picDemoArea.Height - textSize.Height) / 3

Now we’re ready to display the text. We’ll draw the black background first. To get the block effect, we draw the text repeatedly from the offset in the lower left up to the point where the main text will be drawn. Because people tend to think of light as coming from the upper left, we’ve subtracted the offset depth from the x dimension instead of adding it. If we had added it, the block might look more like a shadow.

    Dim i As Integer
    For i = CInt(nudBlockDepth.Value) To 0 Step -1
        g.DrawString(txtSample.Text, myFont, myBackBrush, _
            xLocation - i, yLocation + i)
    Next

Finally, we draw the white main text over the black text. Note how we provide the DrawString method with the text we want to display, the font to use, the brush to draw with, and the coordinates at which to draw.

    g.DrawString(txtSample.Text, myFont, myForeBrush, xLocation, _
        yLocation)
End Sub

Brush Text

Here we’ll display the sample text by using either a Hatch or Gradient brush. In creating a HatchBrush, we must specify the style of hatch we want (in this case, Diagonal Brick), as well as foreground and background colors. Before we create the LinearGradientBrush, we want to provide a boundary within which the gradient will be displayed. So we create a rectangle that’s the size of our text. Then we pass that rectangle as the first argument to the constructor of the LinearGradientBrush, along with the starting and ending colors of the gradient and the orientation of the gradient (in this case, Forward Diagonal).

Private Sub btnBrushText_Click(...
    
    Dim textSize As SizeF = g.MeasureString(Me.txtSample.Text, myFont)
    Dim myBrush As Brush    If Me.optHatch.Checked Then
        myBrush = New HatchBrush(HatchStyle.DiagonalBrick, _
            Color.Yellow, Color.Blue)
    Else
        Dim gradientRectangle As New RectangleF(New PointF(0, 0), textSize)
        myBrush = New LinearGradientBrush(gradientRectangle, Color.Blue, _
            Color.Yellow, LinearGradientMode.ForwardDiagonal)
    End If
    g.DrawString(txtSample.Text, myFont, myBrush, _
        (picDemoArea.Width - textSize.Width) / 2, _
        (picDemoArea.Height - textSize.Height) / 3)
End Sub

Embossed Text

The following procedure creates the sample text with an embossed look. To create the effect, the sample text is drawn twice. It’s drawn first in black, offset slightly from the drawing starting point, and then drawn again in white, the current background color. This gives the impression that the text is raised. To give the impression of engraving instead of embossing, simply use the negative of the offset value.

Private Sub btnEmboss_Click(...
    Dim myBackBrush As Brush = Brushes.Black
    Dim myForeBrush As Brush = Brushes.White
    
    Dim textSize As SizeF = g.MeasureString(Me.txtSample.Text, myFont)
    xLocation = (picDemoArea.Width - textSize.Width) / 2
    yLocation = (picDemoArea.Height - textSize.Height) / 3

We’ll draw the black background first. (Note: if you subtract the nudEmbossDepth value instead of adding it, you’ll get an Engraved effect. Try it with the Depth control on the form.) Finally, we draw the white main text over the black text.

    g.DrawString(txtSample.Text, myFont, myBackBrush, _
            xLocation + Me.nudEmbossDepth.Value, _
            yLocation + Me.nudEmbossDepth.Value)
    g.DrawString(txtSample.Text, myFont, myForeBrush, xLocation, yLocation)
End Sub

Reflected Text

This example reflects text around the baseline of the characters. It’s more advanced than most of the other examples and requires careful measurement of the text. Because we’ll be scaling, and scaling effects the entire Graphics object not just the text, we need to reposition the origin of the Graphics object from (0,0) to the (xLocation, yLocation) point. If we don’t, when we attempt to flip the text with a scaling transform, it will merely draw the reflected text at (xLocation, - yLocation), which is outside the viewable area.

Private Sub btnReflectedText_Click(...
    Dim myBackBrush As Brush = Brushes.Gray
    Dim myForeBrush As Brush = Brushes.Black
    
    g.TranslateTransform(xLocation, yLocation)

Reflecting around the origin still poses problems. The origin represents the upper left corner of the text’s bounding rectangle. This means the reflection will occur at the top of the original drawing. This is not how people are used to seeing reflected text. So we need to determine where to draw the text, and we can do that only when we’ve calculated the height required by the drawing.

This is not as simple as it might seem. The Height returned from the MeasureString method includes some extra spacing for descenders and white space. But we want only the height from the baseline (which is the line on which all caps sit). Any characters with descenders drop below the baseline. To calculate the height above the baseline, we need to use the GetCellAscent method. Because GetCellAscent returns a Design Metric value, it must be converted to pixels and scaled for the font size.

    Dim lineAscent As Integer
    Dim lineSpacing As Integer
    Dim lineHeight As Single
    Dim textHeight As Single
    lineAscent = myFont.FontFamily.GetCellAscent(myFont.Style)
    lineSpacing = myFont.FontFamily.GetLineSpacing(myFont.Style)
    lineHeight = myFont.GetHeight(g)
    textHeight = lineHeight * lineAscent / lineSpacing

TIP
Reflection looks best with characters that can be reflected over the baseline nicely—like capital letters. Characters with descenders look odd. To fix that, factor in the height of the descenders as you calculate the text height, and then you’ll reflect across the lowest descender height. Here’s how:

Dim lineDescent As Integer
lineDescent = myFont.FontFamily.GetCellDescent(myFont.Style)
textHeight = lineHeight * (lineAscent + lineDescent) / lineSpacing

We’ll draw the reflected text first so that we can demonstrate the use of the GraphicsState object. A GraphicsState object maintains the state of the Graphics object as it currently stands. You can then scale, resize, and otherwise transform the Graphics object. You can immediately go back to a previous state by using the Restore method of the Graphics object. Had we drawn the main one first, we would not have needed the Restore method or the GraphicsState object.

First we’ll save the graphics state so that we can restore it later. To draw the reflection, we’ll use the ScaleTransform method with a negative value. Using - 1 will reflect the text with no distortion. Then we restore the previous state and draw the main text.

    Dim myState As GraphicsState = g.Save()    g.ScaleTransform(1, -1.0F)
    g.DrawString(txtSample.Text, myFont, myBackBrush, 0, -textHeight)
    g.Restore(myState)    g.DrawString(txtSample.Text, myFont, myForeBrush, 0, -textHeight)
End Sub

Shadowed Text

This example draws the sample text with a solid brush and a shadow. To create the shadow, the sample text is drawn twice. The first time it’s offset and drawn in gray, and then it’s drawn again normally in black.

Private Sub btnShadowText_Click(...
    Dim myShadowBrush As Brush = Brushes.Gray
    Dim myForeBrush As Brush = Brushes.Black
    
    g.DrawString(txtSample.Text, myFont, myShadowBrush, _
        xLocation + Me.nudShadowDepth.Value, _
        yLocation + Me.nudShadowDepth.Value)
    g.DrawString(txtSample.Text, myFont, myForeBrush, xLocation, yLocation)
End Sub

Sheared Text

The following procedure shears the text so that it appears angled. This requires the use of a Matrix, which will define the shear. Because we’ll be scaling, and scaling affects the entire Graphics object and not just the text, we need to reposition the origin of the Graphics object from (0, 0) to the (xLocation, yLocation) point.

Private Sub btnShearText_Click(...
    
    g.TranslateTransform(xLocation, yLocation)

Now we set a reference to the Transform object for the current Graphics object, Shear it by the specified amount, and finally, draw the main text.

    Dim myTransform As Matrix = g.Transform
    myTransform.Shear(nudSkew.Value, 0)
    g.Transform = myTransform
    g.DrawString(txtSample.Text, myFont, myForeBrush, 0, 0)
End Sub

Simple Text

The following procedure simply takes the lines of text in the text box and places them in the picDemoArea PictureBox. The text will word wrap as necessary, but it will not scroll.

Private Sub btnSimpleText_Click(...
    
    g.DrawString(txtLongText.Text, myFont, myForeBrush, _
        New RectangleF(0, 0, picDemoArea.Width, picDemoArea.Height))
End Sub

Conclusion

In this sample application, you’ve seen that you display text within a bounding rectangle, whose size you must measure with the MeasureString method to determine whether the text is appropriately positioned on the screen and whether it will fit in the space provided. You’ve also seen that you can use any font on your system when you’re drawing text. Powerful scaling and transformation methods let you twist, bend, shear, and distort text into a variety of shapes.

About The Author

Work with GDI+ Brushes

2006-10-02T06:02:00Z

Work with GDI+ Brushes

In the previous tutorial, we showed how .NET gives us easy access to GDI+ via a comprehensive set of classes and methods from the System.Drawing namespace. You saw that to draw you need a Graphics object and a Pen. In this sample, we’ll show you how to use the Brush object to fill closed shapes such as rectangles and ellipses.

Whereas you use a pen to draw the outline of a shape, you use a brush to fill the interior of such a shape. You can choose to have both a border and a fill or to have only one of the two. To fill a shape, you need a Graphics object and a Brush. The Graphics object provides methods such as FillRectangle and FillEllipse, while the Brush gives you a way to specify the color, pattern, and other properties of the fill.

Five kinds of brushes are available, two in the System.Drawing namespace and three in System.Drawing.Drawing2D. They are as follows:

System.Drawing.SolidBrush
A brush composed of a single color. Use this brush to fill a shape with a solid color.
System.Drawing.TextureBrush
A brush that uses an image as its source. Use this brush to fill a shape from an image. For example, you might fill an oval shape from a portrait to imitate the look of an old-fashioned picture.
System.Drawing.Drawing2D.HatchBrush
A rectangular brush composed of three elements: a foreground color, which specifies the color of the lines in the hatch; a background color, which represents the color of the spaces between the lines; and a hatch pattern, which includes such choices as checkerboards, diagonals, diamonds, and zigzags.
System.Drawing.Drawing2D.LinearGradientBrush
A brush that lets you create a fill that transitions smoothly from one color to another. The Blend property of the brush lets you determine the relative intensity of the colors at each point along the gradient.
System.Drawing.Drawing2D.PathGradientBrush
Whereas the LinearGradient color transition goes from one edge of the shape to the other, the shading with this brush starts in the center of the shape and transitions to the outside. It can be used on simple shapes such as rectangles and ellipses, as well as on the more complex shapes represented by GraphicsPath objects.

Figure 10-2 shows a TextureBrush being used to fill a pair of ellipses using a photograph as its drawing source.

Figure 10-2. A TextureBrush lets you use a graphical image as the source for your drawing.

Code Walkthrough

The RedrawPicture procedure provides the meat of the demonstration. It creates one of the five types of brushes and assigns the appropriate user-defined properties to the brush. The brush is then assigned to m_Brush, which is used to draw one of three different shapes. There is also code to ensure that the user interface (UI) displays only the options that are appropriate for the type of brush being used. As you’ll notice, this procedure handles virtually all events fired by the UI.

Private Sub RedrawPicture(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles MyBase.Activated, _
    cboBrushType.SelectedIndexChanged, cboDrawing.SelectedIndexChanged, _
    txtColor1.TextChanged, cboWrapMode.SelectedIndexChanged, _
    cboHatchStyle.SelectedIndexChanged, txtColor2.TextChanged, _
    cboGradientMode.SelectedIndexChanged, nudRotation.ValueChanged, _
    nudGradientBlend.ValueChanged, MyBase.Resize

After clearing the picture box and the status bar, we’re ready to get to the business of creating a brush.

SolidBrush

The first option is a solid brush, based on the user-selected color. We’ll assign it to m_brush, our class-level brush variable, because doing that will make IntelliSense help available on the brush object.

    Select Case cboBrushType.Text
        Case "Solid"
            
            Dim mySolidBrush As New SolidBrush(m_Color1)
            m_Brush = mySolidBrush

HatchBrush

The second option is to create a new HatchBrush using the user-selected colors for foreground and background color settings. Because the HatchStyle property is read-only, it must be set as we instantiate the HatchBrush.

        Case "Hatch"
            
            Dim myHatchBrush As New HatchBrush( _
                CType(cboHatchStyle.SelectedItem, HatchStyle), _
                m_Color1, m_Color2)
            m_Brush = myHatchBrush

TextureBrush

The third option is to create a new TextureBrush based on a bitmap picture of water lilies. The bitmap can also be a pattern you’ve created. The WrapMode determines how the brush will be tiled if it’s not spread over the entire graphics area. The RotateTransform method rotates the brush by the user-specified amount. We could also have used a ScaleTransform to re-shape the brush. For example, this statement cuts the width of the brush in half and doubles the height: myTextureBrush.ScaleTransform(0.5F, 2.0F)

CAUTION
Be cautious when creating a TextureBrush. If you define a Rectangle larger than the bitmap, it will trigger an OutOfMemory exception.

        Case "Texture"
            
            Dim myTextureBrush As New TextureBrush( _
                New Bitmap("..\WaterLilies.jpg"), m_BrushSize)
            myTextureBrush.WrapMode = CType(cboWrapMode.SelectedItem, _
                WrapMode)
            myTextureBrush.RotateTransform(nudRotation.Value)
            m_Brush = myTextureBrush

LinearGradientBrush

Our next option is to create a new LinearGradientBrush. The brush is based on a size defined by a rectangle. In this case, we’re using the user-defined m_BrushSize. Two colors are used, one for defining the start color of the gradient and one for defining the end color.

TIP
You can create more advanced gradients by using the Blend property, which lets you specify the relative intensity of each of the colors along the gradient path.

We define the LinearGradientMode in the constructor. This controls the direction of the gradient. We could have used an angle, but for simplicity that isn’t done here. The WrapMode determines how the gradient will be tiled if it is not spread over the entire graphics area. The LinearGradientBrush can use all values for WrapMode except Clamp.

To set the point where the blending will focus, you can use any value between 0 and 1. The default is 1.

        Case "LinearGradient"
            
            Dim myLinearGradientBrush As New LinearGradientBrush( _
                m_BrushSize, m_Color1, m_Color2, _
                CType(cboGradientMode.SelectedItem, LinearGradientMode))
            If CType(cboWrapMode.SelectedItem, WrapMode) <> _
                WrapMode.Clamp Then
                myLinearGradientBrush.WrapMode = _
                    CType(cboWrapMode.SelectedItem, WrapMode)
            Else
                Me.sbrDrawingStatus.Text += _
                    "A Linear Gradient Brush cannot use the " & _
                    "Clamp WrapMode."
            End If
            myLinearGradientBrush.RotateTransform(nudRotation.Value)
            myLinearGradientBrush.SetBlendTriangularShape( _
                nudGradientBlend.Value)
            m_Brush = myLinearGradientBrush

For more advanced uses, you can use the SetSigmaBellShape method to set where the center of the gradient occurs, as in this line of code: myLinearGradientBrush.SetSigmaBellShape(0.2)

PathGradient

The last option lets us create a path by defining a set of points and then follow that path by using PathGradient. In cases like this, you’ll often define and use a GraphicsPath object instead of a set of points, but in this case, we’re using a simple triangle. Once we’ve defined the triangle, we create a new PathGradientBrush based on the path just created. Anything not bounded by the path will be transparent instead of containing coloring.

The colors for the PathGradient are defined differently than other gradients because we can use different colors for each side. In this case, we’re using only one color, but we could assign a different color to each side of the path. The CenterColor is the color that the edges blend into. SurroundColors is an array of colors that defines the colors around the edge. We could also set the CenterPoint property somewhere other than the center of the path (even outside the rectangle bounding the path)—for example: myPathGradientBrush.CenterPoint = New PointF(50, 50)

        Case "PathGradient"
            
            Dim pathPoint() As Point = {New Point(0, m_BrushSize.Height), _
                New Point(m_BrushSize.Width, m_BrushSize.Height), _
                New Point(m_BrushSize.Width, 0)}
            Dim myPathGradientBrush As New PathGradientBrush(pathPoint)
            myPathGradientBrush.CenterColor = m_Color1
            myPathGradientBrush.SurroundColors = New Color() {m_Color2}
            myPathGradientBrush.WrapMode = _
                CType(cboWrapMode.SelectedItem, WrapMode)
            myPathGradientBrush.RotateTransform(nudRotation.Value)
            myPathGradientBrush.SetBlendTriangularShape( _
                nudGradientBlend.Value)
            m_Brush = myPathGradientBrush

Conclusion

In this sample application, we’ve shown you how to use a Brush to fill the interiors of shapes. A HatchBrush is a brush with a variety of possible patterns. A TextureBrush is one whose source is an image. Gradient brushes let you create fills that transition smoothly from one color to another.