Title: Draw a graph with rotated text in WPF and C#

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 to 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 the example to experiment with it and to see additional details.