March 2011 - Posts
I am heading to London, Paris, Bruges, and Amsterdam later this week. Anyone have any suggestions for "must see" attractions or "must eat" restaurants?
My oldest daughter has been doing her college semester abroad in London. She has the full month of April off for her spring break, so I'm visiting for a week. Later in April my youngest daughter is going out to visit her for a week.
It will be great to take some time off!
The tick marks on the charts may not look like much, but they can be helpful to clarifying the meaning of your charts.
By default, the tick marks are small little black lines on each axis that identify the axis "ticks". See the following chart. (I put a red circle around one of them since they are a little hard to see.)
This prior post sets the ground work for displaying a chart. This post covers how to format the tick marks on the axes.
NOTE: This post is part of a series that starts with this prior post. The example in this post uses the application that is built as part of that series.
If you have a chart on your page, you already have the necessary namespace:
xmlns:toolkit=
"http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
To style the axis tick marks, add a CategoryAxis.MajorTickMarkStyle element under the CategoryAxis element within the Chart.Axes element. The XAML is shown below.
<toolkit:Chart.Axes>
<toolkit:CategoryAxis Orientation="X"
Location="Bottom"
Foreground="White">
<toolkit:CategoryAxis.AxisLabelStyle>
<Style TargetType="toolkit:AxisLabel">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="toolkit:AxisLabel">
<TextBlock
Text="{TemplateBinding FormattedContent}"
TextAlignment="Right"
TextWrapping="Wrap"
Width="50"
Margin="-40,-5,0,26"
RenderTransformOrigin="1,.5">
<TextBlock.RenderTransform>
<RotateTransform Angle="300" />
</TextBlock.RenderTransform>
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</toolkit:CategoryAxis.AxisLabelStyle>
<toolkit:CategoryAxis.MajorTickMarkStyle>
<Style TargetType="Line">
<Setter Property="Stroke"
Value="White" />
<Setter Property="StrokeThickness"
Value="2" />
<Setter Property="Y1"
Value="0" />
<Setter Property="Y2"
Value="10" />
<Setter Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="15" />
</Setter.Value>
</Setter>
</Style>
</toolkit:CategoryAxis.MajorTickMarkStyle>
</toolkit:CategoryAxis>
</toolkit:Chart.Axes>
This code sets the color using the Stroke property and the thickness using the StrokeThickness property. It sets the line start and end using the Y1 and Y2 properties. It then uses RenderTransform to angle the tick mark so it matches nicely with the angled text.
The result is shown below.
Use this technique any time you want to control the layout and style of the chart tick marks.
Enjoy!
When displaying a chart, you may want to format the x and y axes. This post covers how to set the axis font color and wrap and angle the text.
This prior post sets the ground work for displaying a chart. This post covers how to format the axis. This example formats the x-axis, but you can use the same technique to format either axis.
NOTE: This post is part of a series that starts with this prior post. The example in this post uses the application that is built as part of that series.
If you have a chart on your page, you already have the necessary namespace:
xmlns:toolkit=
"http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
To style the axis, use the CategoryAxis element within the Chart.Axes element. The XAML is shown below.
<toolkit:Chart.Axes>
<toolkit:CategoryAxis Orientation="X"
Location="Bottom"
Foreground="White">
<toolkit:CategoryAxis.AxisLabelStyle>
<Style TargetType="toolkit:AxisLabel">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="toolkit:AxisLabel">
<TextBlock
Text="{TemplateBinding FormattedContent}"
TextAlignment="Right"
TextWrapping="Wrap"
Width="50"
Margin="-40,-5,0,26"
RenderTransformOrigin="1,.5">
<TextBlock.RenderTransform>
<RotateTransform Angle="300" />
</TextBlock.RenderTransform>
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</toolkit:CategoryAxis.AxisLabelStyle>
</toolkit:CategoryAxis>
</toolkit:Chart.Axes>
The CategoryAxis element defines the orientation. In this example, the formatting is for the "X" axis. Add a second CategoryAxis element under the Chart.Axes element to format the "Y" axis as well.
The Location property allows you to put the X-axis at the bottom or at the top of the chart. The Foreground property defines the color of the axis text.
The CategoryAxis.AxisLabelStyle allows you to set the template for the axis content. In this example, the style contains a TextBlock, which allows for wrapping and aligning the text.
The Width and Margin adjust the location of the text under the columns. The RenderTransform code angles the text. This is a useful technique if you have text that is long or columns that are close together.
Use this technique any time you want to format or style the chart axes.
Enjoy!