Building a Volume Slider for your Hulu inspired SilverLight video player

In this tutorial we will edit a slider control and use it as our volume slider control. This volume slider will allow the user the ability to scrub the volume from 0-100%.

Steps
1- Place a slider control on the stage
2- Right click on the slider control and select “Edit Template/Edit a copy”
3- Replace the graphics for ‘HorizontalThumb’ and ‘TrackRectangle’
4- Databind the Media Element control ‘volume’ property to the volume slider
5- Set the value property of the volume slider to 1

View all parts of the tutorial
Part 1 – Building a Play-Pause control
Part 2 – Loading external video
Part 3 – Building a Progress Bar
Part 4 – Building a Download Progress Bar
Part 5 – Building a Volume Control
Part 6 – Building the Time Display
Part 7 – Volume Slider control
Part 8 – Start playing button

XAML code


		<Slider x:Name="vol" Height="19" HorizontalAlignment="Right" Margin="0,0,14,5" VerticalAlignment="Bottom" Width="74" Maximum="1" SmallChange="0.01" Value="1" Style="{StaticResource volumeSlider}"/>

Leave a comment