Friday, 15 February 2008

XAML Star Rating

And here's another quick XAML file, this time for star ratings like you see on many websites. By the way, I've been fighting with blogger to try to display code nicely, but it seems to insist on truncating it, and ignoring any styling I try to put on it. I'm hoping to move to another blog platform before too long, but if anyone knows of a simple way to make blogger display formatted code, please let me know.

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
  <Canvas Canvas.Left="20" Canvas.Top="20">
    <Rectangle Width="200" Height="50" Fill="White" RadiusX="5" RadiusY="5" />
    <Canvas Canvas.Left="5" Canvas.Top="20">
      <Path Stroke="#000080" Fill="#FFFF00" StrokeThickness="3" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M 0,0 l 10,0 l 5,-10 l 5,10 l 10,0 l -7,10 l 2,10 l -10,-5 l -10,5 l 2,-10 Z" />
    </Canvas> 
    <Canvas Canvas.Left="45" Canvas.Top="20">
      <Path Stroke="#000080" Fill="#FFFF00" StrokeThickness="3" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M 0,0 l 10,0 l 5,-10 l 5,10 l 10,0 l -7,10 l 2,10 l -10,-5 l -10,5 l 2,-10 Z" />
    </Canvas>
    <Canvas Canvas.Left="85" Canvas.Top="20">
      <Path Stroke="#000080" Fill="#FFFF00" StrokeThickness="3" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M 0,0 l 10,0 l 5,-10 l 5,10 l 10,0 l -7,10 l 2,10 l -10,-5 l -10,5 l 2,-10 Z" />
    </Canvas>
    <Canvas Canvas.Left="125" Canvas.Top="20">
      <Path Stroke="#808080" Fill="#C0C0C0" StrokeThickness="3" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M 0,0 l 10,0 l 5,-10 l 5,10 l 10,0 l -7,10 l 2,10 l -10,-5 l -10,5 l 2,-10 Z" />
    </Canvas>
    <Canvas Canvas.Left="165" Canvas.Top="20">
      <Path Stroke="#808080" Fill="#C0C0C0" StrokeThickness="3" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M 0,0 l 10,0 l 5,-10 l 5,10 l 10,0 l -7,10 l 2,10 l -10,-5 l -10,5 l 2,-10 Z" />
    </Canvas>
  </Canvas>
</Canvas>

And this is what it looks like:

XAML Star Rating

1 comment:

Raju said...

Thanks a lot for this article. I was looking for mark-up to create star shape