Recipe 9.11. Scaling with Transforms

Problem

You want to zoom the view of a drawing area so that the user has a wider or narrower view of the content.

Solution

Sample code folder: Chapter 09\ScalingTransform

Add a scaling transform to the drawing surface before outputting the text. The System.Drawing.Graphics object includes a ScaleTransform() method that lets you scale the output automatically, with separate scales in the X and Y directions.

Discussion

Create a new Windows Forms application, and add the following controls to Form1:

A TextBox control named DisplayText. Set its Multiline property to true and its ScrollBars property to Vertical. Size it so that you can see multiple lines of user-entered text.
A trackBar control named DisplayScale. Set its Minimum property to 1 and its Maximum property to 5. The trackBar control appears in the All Windows Forms section of the Toolbox by default.
A Button control named ActDisplay. Set its Text property to Display.
A PictureBox control named DrawingArea. Set its BackColor property to White and its BorderStyle property to Fixed3D.

Add informational labels if desired. The form should look like Figure 9-17.

Figure 9-17. The controls on the scaled content sample

Now add the following source code to the form's class template:

 Private Sub ActDisplay_Click(ByVal sender As System.Object, _       ByVal e As System.EventArgs) Handles ActDisplay.Click    ' ----- Force the text to redisplay.    DrawingArea.Invalidate() End Sub Private Sub DrawingArea_Paint(ByVal sender As Object, _       ByVal e As System.Windows.Forms.PaintEventArgs) _       Handles DrawingArea.Paint    ' ----- Refresh   the drawing area.    Dim titleFont As Font    Dim mainFont As Font    Dim titleArea As Rectangle    Dim textArea As Rectangle    Dim titleFormat As StringFormat    Const MainTitle As String = "Important Message"    ' ----- Clear any existing content.    e.Graphics.Clear(Color.White)    ' ----- Build some fonts used for the display text.    titleFont = New Font("Arial", 16, FontStyle.Bold)    mainFont = New Font("Arial", 12, FontStyle.Regular)    ' ----- Determine where the title and main text will go.    titleArea = New Rectangle(0, 0, _       DrawingArea.ClientRectangle.Width, titleFont.Height)    textArea = New Rectangle(0, titleFont.Height * 1.4, _       DrawingArea.ClientRectangle.Width, _       DrawingArea.ClientRectangle.Height - _       (titleFont.Height * 1.4))    ' ----- Scale according to the user's request.    e.Graphics.  ScaleTransform(DisplayScale.Value, _       DisplayScale.Value)    ' ----- Add a title to the content.    titleFormat = New StringFormat()    titleFormat.Alignment = StringAlignment.Center    e.Graphics.DrawString(MainTitle, titleFont, _       Brushes.Black, titleArea, titleFormat)    titleFormat.Dispose()    ' ----- Draw a nice dividing line.    e.Graphics.DrawLine(Pens.Black, 20, _       CInt(titleFont.Height * 1.2), _       DrawingArea.ClientRectangle.Width - 20, _       CInt(titleFont.Height * 1.2))    ' ----- Draw the main text.    e.Graphics.DrawString(DisplayText.Text, mainFont, _       Brushes.Black, textArea)    ' ----- Clean up.    mainFont.Dispose()    titleFont.Dispose() End Sub

Run the program, enter some text in the TextBox control, adjust the DisplayScale control value, and click the ActDisplay button. The drawing area zooms in on the content as you adjust the scale. Figure 9-18 shows content without scaling (DisplayScale.Value = 1) and with a 2x scale (DisplayScale.Value = 2).

Figure 9-18. x and 2x scaling of content

The ScaleTransform() method scales everything: text and shape sizes, pen thickness, X and Y positions, rectangular bounding boxes, and so on. The previous sample code scaled the textArea bounding box used to limit the extent of the main text to the output display area. When the content was scaled, though, the bounding box was also scaled, so that the content no longer fits the bounding box. If you still want such bounding boxes to fit, you have to scale them by an inverse factor:

 textArea = New Rectangle(0, titleFont.Height * 1.4, _    DrawingArea.ClientRectangle.Width / DisplayScale.Value, _    DrawingArea.ClientRectangle.Height - _    (titleFont.Height * 1.4))

Figure 9-19 shows the output from this revised block of code.

Figure 9-19. X scaling with boundary adjustments