Blog du Tristank

So terrific that 3 of 4 readers rated it "soporific"

Blogs

Avalon Experimentation: Sparklines

  • Comments 2
  • Likes

I decided to try to do something really simple to start learning Avalon: use someone else's sample and try to come up with a Sparkline that described an album.

I quickly found the MSFT Sparkline, but mine never looked right using WinFX Beta 1 RC1 (avec VS2005 Beta 2).

Here's what I'm working through, as a total first-timer:

The Basic Framework:

<?Mapping ClrNamespace="System" Assembly="mscorlib" XmlNamespace="Sys" ?>
<Grid xmlns:sys="Sys" xmlns="http://schemas.microsoft.com/winfx/avalon/2005"  xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">
<Grid>
 <!-- Stuff goes here -->
</Grid>

I know I shouldn't be intimidated by the boilerplate at the top, but I can't help but feel twingy when I look at it.

PolyLines

OK. Looking at the MSFT thing, the PolyLine data is simply numbered 1-n, and the stock value is given for each value of n. Too easy, though I wonder why the series needs to be numbered in n,v format...? 

Jumping in, VS2005 Intellisense says no TextPanel. There's a TextBlock, so let's try that.

Try it in AVPad, yep, that's good. I have text.

Now - I'm really here for the PolyLine, so let's try that.

<TextBlock>I like this album
 <Polyline Points="1,5 2,1 3,3 4,4 5,5 6,4 7,5 8,3 9,4 10,4 11,4 12,5" Stroke="#933" StrokeThickness="1">
 </Polyline>
 The second song sucks, but overall it's pretty good.
</TextBlock>


 

Now that doesn't look right. The Polyline is inline with the text, which I want, but it looks upside down. A bit of experimentation shows that the points listed are actually coordinate points; not simply "first value is 5, second value is 1, third value is 3, and so on, which I wrongly assumed from the MSFT Sparkline example. Worse, the coordinates are screen geometry coordinates, and so 0,0 is the top left corner of something (wonder how the origin is defined) - I need to draw upside down. No using "real values" in a dataset to do the drawing. Yet.

I know I have a five point album rating scale (my hope is to plug this into Media Player's album ratings at some point), so I could probably try some "mod 5" maths on the dataset to correct it, but for now I'd really like to just plug the data in mindlessly, HTML style.

Transforms (Not Transformers, Robots In Disguse)

So I need to find a way of displaying the sparkline upside down. TransformDecorator looks like it's MIA, so that's out.

Intellisense to the rescue, mostly, with RenderTransform providing the clue - first attempt:

<TextBlock>I like this album
 <Polyline Points="1,5 2,1 3,3 4,4 5,5 6,4 7,5 8,3 9,4 10,4 11,4 12,5" Stroke="#933" StrokeThickness="1">
  <Polyline.RenderTransform>
   <ScaleTransform ScaleX="5" ScaleY="-1" />
  </Polyline.RenderTransform>
 </Polyline>
 The second song sucks, but overall it's pretty good.
</TextBlock>

 

Well... that was interesting. Scaling Y by -1 seemed like a good idea at the time, but now the coordinates are simply negative, not flipped. Great.

Pure Hackery

I could try another transform to offset that (just for fun, it's not serious, guv), but AVPad/Avalon doesn't like more than one transform:

<Polyline.RenderTransform>
 <ScaleTransform ScaleX="5" ScaleY="-1" />
 <TranslateTransform Y="5"></TranslateTransform>
</Polyline.RenderTransform>

Error: "Only a single tag should be placed under the property element 'UIElement.RenderTransform'."

Intellisense bails me out again with TransformGroup (though it's awkward trying to work out when I'm looking for an attribute vs an element - I'm sure I'll get the hang of it with experience):

  <Polyline.RenderTransform>
   <TransformGroup>
    <ScaleTransform ScaleX="5" ScaleY="-1" />
    <TranslateTransform Y="5"></TranslateTransform>
   </TransformGroup>
  </Polyline.RenderTransform>

It's a dodgy hack, but I'm persevering for the time being because I'm interested in how much I can do without having to produce any actual code-behind.

Aargh, It's Broken

Now we've got the line in roughly the right place, but it overruns the text. IanG's blog on RenderTransform vs LayoutTransform popped up at exactly the right time, and suggests I'm simply doing it wrong... except that the desktop's stopped responding, so I'm going to call it a night and fiddle with this some more tomorrow. I was going to blame Avalon for some made-up DirectX reason, turns out Maxthon had a hung session that was doing Bad Things with the Desktop (eg, it wouldn't repaint). Bleh.

So, where I'm up to is this:

<?Mapping ClrNamespace="System" Assembly="mscorlib" XmlNamespace="Sys" ?>
<Grid
    xmlns:sys="Sys" xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
    xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
  >
      <Grid Width="400" Height="200" Background="#FFF">
  
<TextBlock>I like this album
 <Polyline Points="1,5 2,1 3,3 4,4 5,5 6,4 7,5 8,3 9,4 10,4 11,4 12,5" Stroke="#933" StrokeThickness="1">
  <Polyline.RenderTransform>
   <TransformGroup>
    <ScaleTransform ScaleX="5" ScaleY="-1" />
    <TranslateTransform Y="5"></TranslateTransform>
   </TransformGroup>
  </Polyline.RenderTransform>
 </Polyline>
 The second song sucks, but overall it's pretty good.
</TextBlock>
   
</Grid>
 

Scary, and fun.

Comments
  • So all you did to get it the way you wanted was to remove the TranslateTransform and replace the Polyline.RenderTransform with Polyline.LayoutTransform? The ScaleX still makes the line have a calligraphic look to it. Changing the StrokeThickness to .5 and the ScaleY to -2 makes it have a pretty decent look, but I'm eager to see what you've done with it.

  • The previous post in the series is here.
    Continuing with the quest for a quick'n'easy Sparkline... ...

Your comment has been posted.   Close
Thank you, your comment requires moderation so it may take a while to appear.   Close
Leave a Comment