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!