More Avalon Album Sparklines


The previous post in the series is here.


Continuing with the quest for a quick'n'easy Sparkline...


After reading Ian's post, I experimented with dumping the multiple-Transform-element approach, trying the LayoutTransform attribute instead.


Results are good:


<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" LayoutTransform="scale 1 -1">
 </Polyline>
 The second song sucks, but overall it's pretty good.
</TextBlock>


The LayoutTransform "scale" value I just messed around with to get it working, and it looks like it solves the vertical offset problem that required a TranslateTransform too.



Now, I'd like it to be wider and a little taller, so I'll scale the X by three with "scale 3 -1.5".



Not bad, but the stroke width seems to have been scaled as well. Todd mentioned in the comments from the last post that I could solve that with StrokeThickness 1/n (thanks Todd!) but that tends to work best only when the aspect ratio is maintained - I wouldn't try this on a 100-foot copy. Well, actually I probably *would*. As an aside, I'd have guessed a RenderTransform would scale the post-drawing image, but I expected LayoutTransform only to affect the pre-Stroke geometry (Stroke as a point list, rather than a "scaled brush" extruded, if that's the right word), but I could argue that either way.


OK, looks like I'm rapidly falling off the edge of my understanding of Avalon, and need to spend some Quality Time with the SDK to get a better understanding of The Basics.


So, I've got roughly what I want my line to look like - now I'd like to add an overall rating and some type of background.


Rating first:


 <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=".3" LayoutTransform="scale 3 -1.5">
   </Polyline>
  <Inline FontFamily="Arial" FontWeight="Bold">4</Inline>
     The second song sucks, but overall it's pretty good.
 </TextBlock>



That was nice and easy, now to try to get a background rectangle under the Polyline.



Um, right.


After some random Intellisense experimentation, I found the Canvas, and it looks promising. At least mostly.


 <TextBlock FontFamily="Garamond">
 I like this album
 <Canvas Width="40" Height="9">
 <Rectangle Width="38" Height="10" Canvas.Left="0" Canvas.Top="0">
  <Rectangle.Fill>
   <SolidColorBrush Color="#EEE" />
  </Rectangle.Fill>
  </Rectangle>
 <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=".3" LayoutTransform="scale 3 -1.5">
 </Polyline>
 </Canvas>
 <Inline FontFamily="Arial" FontWeight="Bold">4</Inline>
  The second song sucks, but overall it's pretty good.
 </TextBlock>



I'm not sure if Canvas is what I should be using here, but it seems to be working pretty well for the Rectangle stacking, and I thought that as it was a graphicky thing, the Polyline should go there too. Looks like a good guess so far.


So, some further position tweaking... It occurred to me that Media Player uses a 5 point 1-based rating system, so I need to exclude about a unit from the vertical measurement - I'll add Canvas.Left="0" Canvas.Top="1" to the PolyLine.


This also lets me translate the units into more-easily-worked-out numbers - for 12 tracks, with a scale of 3, a "36" width Rectangle and Canvas is about right.


   <TextBlock FontFamily="Garamond">
    I like this album
   <Canvas Width="36" Height="9">
   <Rectangle Width="36" Height="10" Canvas.Left="0" Canvas.Top="0">
    <Rectangle.Fill>
     <SolidColorBrush Color="#EEE" />
    </Rectangle.Fill>
   </Rectangle>
   <Polyline Canvas.Left="-1" Canvas.Top="1" 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=".3" LayoutTransform="scale 3 -1.5">
   </Polyline>
   </Canvas>
    <Inline FontFamily="Arial" FontWeight="Bold">4</Inline>
    The second song sucks, but overall it's pretty good.
   </TextBlock>


I'd like to make the Rectangle a Width="100%" type affair so that I just had to set the size for the parent item and it would work it out, but I'm once again out of time. Here's where I'm at:




Wider view:



<?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 FontFamily="Garamond">
    I like this album
   <Canvas Width="36" Height="9">
   <Rectangle Width="36" Height="9" Canvas.Left="0" Canvas.Top="1">
    <Rectangle.Fill>
     <SolidColorBrush Color="#EEE" />
    </Rectangle.Fill>
   </Rectangle>
   <Polyline Canvas.Left="-1" Canvas.Top="1" 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=".3" LayoutTransform="scale 3 -1.5">
   </Polyline>
   </Canvas>
    <Inline FontFamily="Arial" FontWeight="Bold">4</Inline>
    The second song sucks, but overall it's pretty good.
   </TextBlock>
  </Grid>
</Grid>


I'd prefer not to have to "fiddle" the layout items, and if I get to a code-driven layout, I'll Do It Properly. Still, getting there on the XML-driven front.

Comments (1)

  1. Anonymous says:

    Could have used this while playing around with the Sparkline fiddling project, but hey, another time….

Skip to main content