Draw a graph with rotated text in WPF and C#

example

This example shows how you can draw a graph with rotated text. The example Draw a graph with labels in WPF and C# has a DrawText method that makes adding text to a graph relatively easy. This example uses the following modified version that lets you rotate the text. The modified code is highlighted in blue.

// Position a label at the indicated point.
private void DrawText(Canvas can, string text,
    Point location, double angle, double font_size,
    HorizontalAlignment halign, VerticalAlignment valign)
{
    // Make the label.
    Label label = new Label();
    label.Content = text;
    label.FontSize = font_size;
    can.Children.Add(label);

    // Rotate if desired.
    if (angle != 0)
        label.LayoutTransform = new RotateTransform(angle);

    // Position the label.
    label.Measure(new Size(double.MaxValue, double.MaxValue));

    double x = location.X;
    if (halign == HorizontalAlignment.Center)
        x -= label.DesiredSize.Width / 2;
    else if (halign == HorizontalAlignment.Right)
        x -= label.DesiredSize.Width;
    Canvas.SetLeft(label, x);

    double y = location.Y;
    if (valign == VerticalAlignment.Center)
        y -= label.DesiredSize.Height / 2;
    else if (valign == VerticalAlignment.Bottom)
        y -= label.DesiredSize.Height;
    Canvas.SetTop(label, y);

    // Uncomment the following code to see
    // the Label's bounding rectangle.
    //Rectangle rect = new Rectangle();
    //rect.Width = label.DesiredSize.Width;
    //rect.Height = label.DesiredSize.Height;
    //rect.StrokeThickness = 1;
    //rect.Stroke = Brushes.Red;
    //can.Children.Add(rect);
    //Canvas.SetLeft(rect, x);
    //Canvas.SetTop(rect, y);
}

The only change is the addition of the angle parameter. If angle isn’t 0, the code sets the Label control’s LayoutTransform property to a new RotateTransform object that rotates by the desired angle. That automatically rotates the Label.

When the program calls the control’s Measure method to see how big it needs to be, the method returns the size it needs to display itself in the rotated position. (You can uncomment the code at the end of the method to make the program display the control’s bounding rectangle so you can see how much space the control says it needs.)

The only trick here is understanding the difference between the LayoutTransform and RenderTransform properties. The LayoutTransform property transforms a control before it is arranged with the other controls. It moves, rotates, scales, or skews the control, and then uses its new size and location to arrange the control with other controls.

The RenderTransform property only affects the way the control is drawn. It doesn’t change the control’s size or position before it is arranged.

Usually you should use the LayoutTransform property so transform the control both when laying it out and when drawing it. If you use RenderTransform, then you sometimes get a control positioned as if it were one size and then drawn as if it were another. The result can be confusing.


Download Example   Follow me on Twitter   RSS feed




About RodStephens

Rod Stephens is a software consultant and author who has written more than 30 books and 250 magazine articles covering C#, Visual Basic, Visual Basic for Applications, Delphi, and Java.
This entry was posted in algorithms, drawing, geometry, graphics, mathematics and tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

One Response to Draw a graph with rotated text in WPF and C#

  1. Pingback: Let the user click on graph points in WPF and C# -

Leave a Reply

Your email address will not be published. Required fields are marked *