Silverlight 4: Space between text lines.

If you have some text, within the same TextBlock, on multiple lines, this might be handy to know.

It is all about the LineStackingStrategy where you have 2 choices.

It's actually rather easy and I doubt I can explain it clearer than Microsoft themselves, so I'll link to the website where they give a thourough explanation with examples.

Microsoft article about Line Stacking Strategy

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"
            ...>

Getting visible axis in a chart

I was using a template of a chart and wanted my Y-axis to be visible. So far, I only had the lines where numbers were given (e.g. they started at 10 instead of 0). This template had been created a while back by a colleague and I'm still a noob.

In that particular chart, there are pre generated curves that will not change. The scatter data is dynamic and changes whenever we modify the search settings.

Trying with adding Minimum="0" in the LinearAxis for Y in the code below:

<toolkit:Chart.Axes>
     <toolkit:LinearAxis
          Orientation="X"
          Title="{Binding SOMETHING, Source SOMETHING}"
           Minimum="0"
           Maximum="120"
           Interval="10"
           ShowGridLines="False"/>
      <toolkit:LinearAxis
           Orientation="Y"
           Title="{Binding SOMETHING, Source SOMETHING}"      
           Minimum="0"         
           ShowGridLines="True"/>
</toolkit:Chart.Axes>

Results: I got my Y-axis, however the curves were squeezed. Their upper limits were still the same, but their lower limits were increased. They were, obviously, no longer accurate.

I tried a few things, then found something rather simple (isn't it always the case?). The one creating the template had remove a border from the initial template (when you choose to edit a copy). The border is mostly there to give a border for the area within the axis (a border to show a border, who would have guessed...).

It goes like this:

Template
   > Border
     > Grid
        > Grid
           > Border
           > Chart Area
              > Grid
              > Border
That last border is the one that does the trick!
Add a colour to its BorderBrush and put some of the BorderThickness to 0 depending on what result you want. I wanted my X and Y axis, so I used 1, 0, 0, 1, like this:

<Border BorderBrush="Black" BorderThickness="1,0,0,1"/>

Button: Different background color for the same template

I was wondering if I could create a template for all my toggle buttons, yet still manage to change their colors as they were all supposed to have different hues. At first I thought it could be done via the contentPresenter, but a colleague helped me (greatly) to figure out how it could be possible. As with most things, it turned out to be rather simple.


In the button template (this is done on a toggle button)

Go to the background color, right-click on the little square and pick
"Template binding", then select "background" or whichever color you want it to be bound to (works with stroke, etc).

Exit the template and set a background color to your button, if you have not already done so.

Exemple for my round toggle button

Template
  > Grid
    > Background (canvas)
      > Grid
         > ellipseShadow (cheat to avoid the dropShadow effect in order to make the application run faster)
         > ellipse (is a rectangle in the default button)
         > BackGroundAnimation (canvas, was there in the default button, could likely be swapped for an ellipse too)
      > contentPresenter (canvas), not very useful in this example as there is no text in the buttons.
      > DisabledVisualElement (same shape as your button, ellipse in this case)
      > FocusVisualElement (I don't use it at the moment, but same as above)

In this case, the BackGroundAnimation is the one having its background bound to the "real" button.
The ellipseShadow has a gradient going from 100 to 0 in about 1-2 px. It is also 1-2 px bigger than the ellipse/BackGroundAnimation.

In the states, you simply have to make the BackGroundAnimation visible when the button is checked (if that is the effect you are aiming for, of course).

Hello World!

Let's start this blog with the cliché for most application tutorials. Hello world!

This blog is meant as a place where I can write down the tricks I find about Silverlight as well as the solutions I found to encountered problems. I want this to be my place to look when I forget how to fix something, but if it helps someone along the way, all the better!