Thanks to Silverlight’s powerful clipping features, it is incredibly simple to create a triangle sliding volume control.
1) Create a Canvas, which contains all visuals;
2) Create a rectangle for the background within the Canvas. Width=100, Height=50. Here, the background is green;
3) Create a rectangle for the slider, on top of the background. Height=50, Width is smaller than 100 to show that this red rectangle is on top;
4) Create a clipping on the Canvas which contains the rectangles;
The clipping XAML defines the rectangle path:
<Canvas.Clip>
<PathGeometry>
<PathFigure StartPoint="0,50" IsClosed="True">
<LineSegment Point="100,0"/>
<LineSegment Point="100,50"/>
</PathFigure>
</PathGeometry>
</Canvas.Clip>
Note that Blend converts the above to a more compact format, but this is not a problem. The path starts at the left-bottom corner, then via a line segment, it goes to the upper-right and then to the bottom-right. The bottom line segment is not required thanks to the “IsClosed” setting.
5) Create a border around the volume control. A part of the clipping geometry is copied for this, into a Path control. The XAML for this path control needs to be inserted below the XAML of the red rectangle, so that the border is on top:
<Path Stroke="#FF9D1EA7" StrokeThickness="3">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,50" IsClosed="True">
<LineSegment Point="100,0"/>
<LineSegment Point="100,50"/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
Note that Blend will convert this Path figure into something more compact, which is no problem if you are satisfied with it.
6) Now that we have the visual part ready, it is time to implement the code behind. First, give names to your controls. The green background gets the x:Name=“Background”, the red slider gets the x:Name=”RedRectangle”. In Visual Studio, both green and red rectangles need mouse events. For both rectangles, these mouse events are wired to the same function.
Add these mouse event attributes to both rectangles:
MouseLeftButtonDown="OnMouseDown"
MouseLeftButtonUp="OnMouseUp"
MouseMove="OnSlide"
7) Implement the mouse events:
private bool clicked =
false;
private void OnMouseDown(
object sender, MouseButtonEventArgs e)
{
clicked =
true;
SetVolumePosition(e.GetPosition(Background));
}
private void OnMouseUp(object sender, MouseButtonEventArgs e)
{
clicked = false;
}
private void OnSlide(object sender, MouseEventArgs e)
{
if (clicked)
{
SetVolumePosition(e.GetPosition(Background));
}
}
private void SetVolumePosition(Point position)
{
RedRectangle.Width = position.X;
}
Explanation:
The mouse-move event should only work when the mouse button is clicked, so the mouse-down and mouse-up events set a variable “clicked”. When clicking, the slider’s position should be adjusted right away, so in the mouse-down event the SetVolumePosition function is called. We are interested in the horizontal mouse-position, relatively to the green background rectangle, as this is our origin. The SetVolumePosition only sets the width of our sliding red rectangle.
Finished!
Subscribe