1 2<UserControl 3 x:Class="SilverlightMediaElement.MainPage" 4 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 5 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 6 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 7 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 8 xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows" 9 mc:Ignorable="d" 10 Width="640" Height="360"> 11 <UserControl.Resources> 12 <Style x:Key="roundThumbStyle" TargetType="Thumb"> 13 <Setter Property="Template"> 14 <Setter.Value> 15 <ControlTemplate TargetType="Thumb"> 16 <Ellipse Stroke="#FFFFFFFF" StrokeThickness="2" Fill="#FF484848"/> 17 </ControlTemplate> 18 </Setter.Value> 19 </Setter> 20 </Style> 21 22 <Style x:Key="SliderStyle" TargetType="Slider"> 23 <Setter Property="Template"> 24 <Setter.Value> 25 <ControlTemplate TargetType="Slider"> 26 <Grid x:Name="Root" Background="Transparent"> 27 <Grid.Resources> 28 <ControlTemplate x:Key="RightRepeatButtonTemplate"> 29 <Rectangle Height="8" Margin="-5,0,0,0" Grid.Column="0" Grid.ColumnSpan="3" 30 StrokeThickness="0.5" RadiusY="1" RadiusX="1" Fill="#FF484848"/> 31 </ControlTemplate> 32 <ControlTemplate x:Key="LeftRepeatButtonTemplate"> 33 <Rectangle Height="8" Margin="0,0,-5,0" Grid.Column="0" Grid.ColumnSpan="3" 34 StrokeThickness="0.5" RadiusY="1" RadiusX="1" Fill="#FFAFAFAF"/> 35 </ControlTemplate> 36 </Grid.Resources> 37 <Grid x:Name="HorizontalTemplate"> 38 <Grid.ColumnDefinitions> 39 <ColumnDefinition Width="Auto"/> 40 <ColumnDefinition Width="Auto"/> 41 <ColumnDefinition Width="*"/> 42 </Grid.ColumnDefinitions> 43 44 <RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" Grid.Column="0" 45 IsTabStop="False" Template="{StaticResource LeftRepeatButtonTemplate}"/> 46 <Rectangle x:Name="LeftTrack" Grid.Row="1" Fill="#00FFFFFF" Cursor="Hand" MouseLeftButtonDown="LeftTrack_MouseLeftButtonDown"/> 47 <Thumb Background="#00FFFFFF" Height="10" x:Name="HorizontalThumb" Width="10" 48 Grid.Column="1" Style="{StaticResource roundThumbStyle}" HorizontalAlignment="Left" 49 DragStarted="HorizontalThumb_DragStarted" DragCompleted="HorizontalThumb_DragCompleted" 50 Canvas.ZIndex="1"/> 51 <RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Grid.Column="2" 52 IsTabStop="False" Template="{StaticResource RightRepeatButtonTemplate}"/> 53 <Rectangle x:Name="RightTrack" Grid.Column="2" Grid.Row="1" Fill="#00FFFFFF" Cursor="Hand" MouseLeftButtonDown="LeftTrack_MouseLeftButtonDown"/> 54 </Grid> 55 </Grid> 56 </ControlTemplate> 57 </Setter.Value> 58 </Setter> 59 </Style> 60 61 <ControlTemplate x:Key="PlayButtonTemplate" TargetType="ToggleButton"> 62 <Grid x:Name="grid" Background="Transparent"> 63 <vsm:VisualStateManager.VisualStateGroups> 64 <vsm:VisualStateGroup x:Name="FocusStates"> 65 <vsm:VisualState x:Name="Focused"> 66 <Storyboard> 67 </Storyboard> 68 </vsm:VisualState> 69 <vsm:VisualState x:Name="Unfocused"> 70 <Storyboard/> 71 </vsm:VisualState> 72 </vsm:VisualStateGroup> 73 <vsm:VisualStateGroup x:Name="CommonStates"> 74 <vsm:VisualState x:Name="Normal"> 75 <Storyboard/> 76 </vsm:VisualState> 77 <vsm:VisualState x:Name="MouseOver"> 78 <Storyboard> 79 </Storyboard> 80 </vsm:VisualState> 81 <vsm:VisualState x:Name="Pressed"> 82 <Storyboard/> 83 </vsm:VisualState> 84 </vsm:VisualStateGroup> 85 <vsm:VisualStateGroup x:Name="CheckStates"> 86 <vsm:VisualState x:Name="Checked"> 87 <Storyboard> 88 <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" 89 Storyboard.TargetName="playSymbol" 90 Storyboard.TargetProperty="(UIElement.Opacity)"> 91 <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/> 92 </DoubleAnimationUsingKeyFrames> 93 <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" 94 Storyboard.TargetName="pauseSymbol" 95 Storyboard.TargetProperty="(UIElement.Opacity)"> 96 <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/> 97 </DoubleAnimationUsingKeyFrames> 98 </Storyboard> 99 </vsm:VisualState> 100 <vsm:VisualState x:Name="Unchecked"> 101 <Storyboard> 102 <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="pauseSymbol" Storyboard.TargetProperty="(UIElement.Opacity)"> 103 <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/> 104 </DoubleAnimationUsingKeyFrames> 105 </Storyboard> 106 </vsm:VisualState> 107 </vsm:VisualStateGroup> 108 </vsm:VisualStateManager.VisualStateGroups> 109 <Grid Margin="11,3,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" 110 Opacity="1" x:Name="playSymbol" Width="21" Height="22"> 111 <Path Width="14" Height="15" Stretch="Fill" Fill="#FF7F7F7F" 112 Data="F1 M 15.1997,22.542L 29.7776,14.89L 15.2707,6.99886L 15.1997,22.542 Z "/> 113 </Grid> 114 <Grid Margin="11,2,0,0" Opacity="0" x:Name="pauseSymbol" Width="31" Height="15"> 115 <Rectangle Stretch="Fill" Fill="#FF7F7F7F" HorizontalAlignment="Left" 116 Margin="0,0,0,0" Width="6"/> 117 <Rectangle Stretch="Fill" Fill="#FF7F7F7F" HorizontalAlignment="Stretch" 118 Margin="6,0,13,0" Width="6"/> 119 </Grid> 120 </Grid> 121 </ControlTemplate> 122 123 <ControlTemplate x:Key="MuteButtonTemplate" TargetType="ToggleButton"> 124 <Grid Background="Transparent" Cursor="Hand"> 125 <vsm:VisualStateManager.VisualStateGroups> 126 <vsm:VisualStateGroup x:Name="FocusStates"> 127 <vsm:VisualState x:Name="Focused"> 128 <Storyboard> 129 </Storyboard> 130 </vsm:VisualState> 131 <vsm:VisualState x:Name="Unfocused"> 132 <Storyboard/> 133 </vsm:VisualState> 134 </vsm:VisualStateGroup> 135 <vsm:VisualStateGroup x:Name="CommonStates"> 136 <vsm:VisualState x:Name="Normal"> 137 <Storyboard/> 138 </vsm:VisualState> 139 <vsm:VisualState x:Name="MouseOver"> 140 <Storyboard> 141 </Storyboard> 142 </vsm:VisualState> 143 <vsm:VisualState x:Name="Pressed"> 144 <Storyboard/> 145 </vsm:VisualState> 146 </vsm:VisualStateGroup> 147 <vsm:VisualStateGroup x:Name="CheckStates"> 148 <vsm:VisualState x:Name="Checked"> 149 <Storyboard> 150 <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" 151 Storyboard.TargetName="volumeSymbol" 152 Storyboard.TargetProperty="(UIElement.Opacity)"> 153 <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/> 154 </DoubleAnimationUsingKeyFrames> 155 </Storyboard> 156 </vsm:VisualState> 157 <vsm:VisualState x:Name="Unchecked"> 158 <Storyboard> 159 <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" 160 Storyboard.TargetName="volumeSymbol" 161 Storyboard.TargetProperty="(UIElement.Opacity)"> 162 <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/> 163 </DoubleAnimationUsingKeyFrames> 164 </Storyboard> 165 </vsm:VisualState> 166 </vsm:VisualStateGroup> 167 </vsm:VisualStateManager.VisualStateGroups> 168 <Grid HorizontalAlignment="Left" VerticalAlignment="Top" 169 Width="17"> 170 <Path HorizontalAlignment="Left" Stretch="Fill" 171 Fill="#FF7F7F7F" Data="F1 M 23.1457,26.5056L 23.1457,33.8944L 25.7913,33.8944L 28.8235,37.4722L 30.5346,37.4722L 30.5665,23.0833L 28.8995,23.0833L 25.8679,26.5056L 23.1457,26.5056 Z " 172 Width="7.421" Height="14.389" UseLayoutRounding="False" 173 Margin="0,6.5,0,6.5"/> 174 175 <Grid HorizontalAlignment="Right" Width="7.003" x:Name="volumeSymbol" Margin="0,10"> 176 <Path HorizontalAlignment="Right" VerticalAlignment="Stretch" 177 Width="2.398" 178 Data="M0.5,0.5 C0.5,0.5 2.5939558,2.7128265 2.5946648,7.0504856 C2.5953746,11.391507 0.50033337,13.889001 0.50033337,13.889001" 179 Stretch="Fill" Stroke="#FF7F7F7F" Margin="0,0,-0.398,0" UseLayoutRounding="False"/> 180 <Path HorizontalAlignment="Stretch" Margin="2.4,2.384,2.317,1.584" VerticalAlignment="Stretch" 181 Data="M0.5,0.50000006 C0.5,0.50000006 1.4786903,2.1275051 1.4781417,4.9569001 C1.4776551,7.4670725 0.35717732,9.892808 0.35717732,9.892808" Stretch="Fill" Stroke="#FF7F7F7F" UseLayoutRounding="False"/> 182 <Path HorizontalAlignment="Left" Margin="0,4.36,0,3.46" VerticalAlignment="Stretch" Width="1.542" 183 Data="M0.5,0.5 C0.5,0.5 1.0412779,1.4903735 1.042276,3.1459465 C1.0429831,4.3189368 0.66544437,6.0685911 0.66544437,6.0685911" Stretch="Fill" Stroke="#FF7F7F7F" d:LayoutOverrides="Width"/> 184 </Grid> 185 </Grid> 186 </Grid> 187 </ControlTemplate> 188 189 <ControlTemplate x:Key="ButtonTemplate" TargetType="Button"> 190 <Grid Background="Transparent"> 191 <ContentPresenter Width="Auto"/> 192 </Grid> 193 </ControlTemplate> 194 </UserControl.Resources> 195 196 <Grid x:Name="LayoutRoot" Background="Black" Width="640" Height="360"> 197 198 <MediaElement Grid.Row="0" Grid.Column="0" Width="640" Height="360" 199 CacheMode="BitmapCache" AutoPlay="false" Name="media"> 200 201 </MediaElement> 202 <Button x:Name="bigPlayButton" Template="{StaticResource ButtonTemplate}" 203 Click="BigPlayButton_Click" Grid.Row="0" Visibility="Collapsed"> 204 <Canvas Width="100" Height="100"> 205 <Path Width="100" Height="100" Canvas.Left="0" Canvas.Top="0" Stretch="Fill" 206 Fill="#77000000" Data="F1 M 15,0L 85,0C 93.2843,0 100,6.71573 100,15L 100,85C 100,93.2843 93.2843,100 85,100L 15,100C 6.71573,100 0,93.2843 0,85L 0,15C 0,6.71573 6.71573,0 15,0 Z "/> 207 <Path Width="40.8182" Height="47.1328" Canvas.Left="34.6439" 208 Canvas.Top="27.6003" Stretch="Fill" Fill="#FFFFFFFF" 209 Data="F1 M 75.4621,51.1667L 34.6439,27.6003L 34.6439,74.7331L 75.4621,51.1667 Z "/> 210 </Canvas> 211 </Button> 212 <TextBox Margin="25,25,0,0" Name="textBox1" VerticalScrollBarVisibility="Auto" Height="146" VerticalAlignment="Top" HorizontalAlignment="Left" Width="235" /> 213 <Button Content="" Height="36" HorizontalAlignment="Right" x:Name="FullscreenButton" VerticalAlignment="Bottom" Width="31" Click="FullscreenButton_Click" Opacity="0" Background="#00000000" Cursor="Hand" /> 214 215 <Grid x:Name="transportControls" VerticalAlignment="Bottom" Height="40" Background="#FF000000" 216 Grid.Row="1" > 217 <Grid.ColumnDefinitions> 218 <ColumnDefinition Width="Auto" /> 219 <ColumnDefinition Width="*" /> 220 <ColumnDefinition Width="0" /> 221 <ColumnDefinition Width="Auto" /> 222 <ColumnDefinition Width="Auto" MinWidth="10" /> 223 <ColumnDefinition Width="Auto" MinWidth="10" /> 224 </Grid.ColumnDefinitions> 225 226 <!-- play symbol showing is checked = false, Pause symbol showing is checked = true--> 227 <ToggleButton x:Name="playPauseButton" Template="{StaticResource PlayButtonTemplate}" 228 Click="PlayPauseButton_Click" IsChecked="false" Cursor="Hand"/> 229 230 <Grid x:Name="time" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Center"> 231 <Grid.ColumnDefinitions> 232 <ColumnDefinition Width="40" /> 233 <ColumnDefinition Width="*" /> 234 <ColumnDefinition Width="10" /> 235 <ColumnDefinition Width="40" /> 236 </Grid.ColumnDefinitions> 237 238 <TextBlock x:Name="currentTimeTextBlock" Margin="0,1.5,10,0" Height="12" 239 FontFamily="Verdana" FontSize="10" Text="00:00" TextWrapping="Wrap" 240 Foreground="#FFFFFFFF" FontStyle="Normal" HorizontalAlignment="Right" 241 TextAlignment="Right" Grid.Column="0"/> 242 243 <Slider x:Name="timelineSlider" Margin="0,2,0,-1" 244 Maximum="1" Style="{StaticResource SliderStyle}" Grid.Column="1" 245 ValueChanged="TimelineSlider_ValueChanged" 246 Value="0"/> 247 248 <TextBlock Margin="0,1.5,0,0" Height="12" FontFamily="Verdana" FontSize="10" 249 Text="" TextWrapping="Wrap" Foreground="#FFFFFFFF" 250 FontStyle="Normal" HorizontalAlignment="Center" TextAlignment="Right" 251 Grid.Column="2"/> 252 <TextBlock x:Name="totalTimeTextBlock" Margin="0,1.5,0,0" Height="12" 253 FontFamily="Verdana" FontSize="10" Text="00:00" TextWrapping="Wrap" 254 Foreground="#FFFFFFFF" FontStyle="Normal" HorizontalAlignment="Left" 255 TextAlignment="Right" Grid.Column="3"/> 256 </Grid> 257 258 <ToggleButton IsChecked="false" Grid.Column="3" x:Name="muteButton" 259 Template="{StaticResource MuteButtonTemplate}" Click="MuteButton_Click" 260 VerticalAlignment="Center" Margin="0,0,6,0" Cursor="Hand"/> 261 262 <Slider Grid.Column="4" HorizontalAlignment="Stretch" Margin="3,0,0,0" 263 VerticalAlignment="Center" Maximum="1" x:Name="volumeSlider" 264 Background="#FF777777" Style="{StaticResource SliderStyle}" Width="50" 265 Value="{Binding ElementName=media, Mode=TwoWay, Path=Volume, UpdateSourceTrigger=Default}"/> 266 267 <Button x:Name="fullScreenButton" Grid.Column="5" Margin="8,10,4,10" Click="FullScreenButton_Click" 268 Template="{StaticResource ButtonTemplate}" VerticalAlignment="Center" Cursor="Hand"> 269 <Path Height="14.375" HorizontalAlignment="Stretch" 270 VerticalAlignment="Bottom" RenderTransformOrigin="0.212389379739761,0.208695650100708" 271 Data="M10.181361,8.375 L12.844413,11.008244 L14.125,9.7418737 L14.125,14.375 L9.675765,14.374833 L10.906104,13.158273 L8.125,10.408315 L10.181361,8.375 z M3.9666855,8.375 L6,10.431361 L3.3667567,13.094413 L4.6331258,14.375 L0,14.375 L0.00016707927,9.925765 L1.2167276,11.156104 L3.9666855,8.375 z M9.4918737,0 L14.125,0 L14.124833,4.449235 L12.908273,3.2188957 L10.158315,6 L8.125,3.943639 L10.758244,1.2805867 L9.4918737,0 z M0,0 L4.449235,0.00016686507 L3.2188957,1.2167276 L6,3.9666855 L3.943639,6 L1.280587,3.3667567 L0,4.6331258 L0,0 z" 272 Fill="#FF7F7F7F" Stretch="Fill" Stroke="#FF000000" StrokeThickness="0" /> 273 </Button> 274 </Grid> 275 </Grid> 276</UserControl>