XAML Star Rating
February 15. 2008 Posted in:
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:
Comments
Thanks a lot for this article. I was looking for mark-up to create star shape
Raju