in

Software FX Community

Discuss and find help for all Software FX products.

WPF Blog

Showing vertical titles

Chart FX for WPF uses the title class in several places including Chart.Titles, Axis.Title, LegendBox.Titles and CustomGridLine.Title; in most of these scenarios there are cases where the title needs to be drawn vertically. For example the following XAML generates a chart with 4 titles each docked in a different position

      <cfx:Chart.Titles>
        <cfx:Title DockPanel.Dock="Top">Top</cfx:Title>
        <cfx:Title DockPanel.Dock="Left">Left</cfx:Title>
        <cfx:Title DockPanel.Dock="Right">Right</cfx:Title>
        <cfx:Title DockPanel.Dock="Bottom">Bottom</cfx:Title>
      </cfx:Chart.Titles>

Which results in a chart like this

VerticalTitles1

Note that we rotate the titles on the right side 90 degrees clockwise while the title on the left side is rotated 90 degrees counterclockwise. You can control this using the RotateVerticalMode property, in the following picture we will set the left title RotateVerticalMode to None which might be suitable for short titles, you can also force a specific rotation by using Clockwise or CounterClockwise. We are using Counterclockwise for the right title.

VerticalTitles2

Can we use this feature to draw vertical titles where the letters are not rotated? I am glad you asked, setting the RotateVerticalMode to None is useful if we “borrow” delay’s code for a vertical text block, in this case our XAML would set the title’s content to be an instance of VerticalTextBlock which derives from control

      <cfx:Chart.Titles>
        <cfx:Title DockPanel.Dock="Left" RotateVerticalMode="None">
          <local:VerticalTextBlock Text="SALES"/>
        </cfx:Title>
      </cfx:Chart.Titles>

Which results in the following chart

VerticalTitles3

Note that the Title.Content is of type object so you can also provide any visuals, e.g. a StackPanel with an icon and some text, a button, etc.

There are some scenarios though where Chart FX might reuse your title in more than one place, an axis for example could potentially be reused in multiple panes, in this case you will want to use the visuals in the Title.ContentTemplate property.

JuanC

Published Jun 18 2009, 10:31 AM by JuanC
Filed under:

Comments

No Comments
Copyright 2008 Software FX, Inc.