Monday, January 16, 2012

Expression Blend, Silverlight 4: Set max width on a bar/column in a chart

I wanted to set a max width on my bars so that when I'd remove some of them from the chart, I wouldn't have one bar scaling up to take all the place, which is rather ugly. This way, they scale down in width when all items are selected, but never go wider than 40px when some are removed.

The answer is found in the Data Point Style. Basically, right click on your ColumnSeries, pick "Edit Additional Templates" then select "Edit DataPointStyle".

Your own values will differ of course. What's important is the MaxWidth one. You can also use MinWidth or even set a fixed Width.

<Setter Property="Template">
   <Setter.Value>
      <ControlTemplate TargetType="toolkit:ColumnDataPoint">
         <Border
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            MaxWidth="40"
            ...>

This is an example where the chart has horizontal bars. That's when Height is the useful property.

<Setter Property="Template">
   <Setter.Value>
      <ControlTemplate TargetType="toolkit:BarDataPoint">
         <Border
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            MaxHeight="40"
            ...>

No comments:

Post a Comment