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>