VideoPlayer.xaml 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333
  1. <UserControl
  2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5. xmlns:local="clr-namespace:VideoPlayer"
  6. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  7. d:DesignHeight="300"
  8. d:DesignWidth="300"
  9. ClipToBounds="True"
  10. mc:Ignorable="d"
  11. x:Class="VideoPlayer.VideoPlayer">
  12. <UserControl.Resources>
  13. <Style x:Key="SliderRepeatButton" TargetType="RepeatButton">
  14. <Setter Property="SnapsToDevicePixels" Value="False" />
  15. <Setter Property="OverridesDefaultStyle" Value="true" />
  16. <Setter Property="IsTabStop" Value="false" />
  17. <Setter Property="Focusable" Value="false" />
  18. <Setter Property="Delay" Value="1" />
  19. <Setter Property="Template">
  20. <Setter.Value>
  21. <ControlTemplate TargetType="RepeatButton">
  22. <Border Background="Transparent" />
  23. </ControlTemplate>
  24. </Setter.Value>
  25. </Setter>
  26. </Style>
  27. <Style x:Key="SliderRepeatButton1" TargetType="RepeatButton">
  28. <Setter Property="SnapsToDevicePixels" Value="False" />
  29. <Setter Property="OverridesDefaultStyle" Value="true" />
  30. <Setter Property="Delay" Value="1" />
  31. <Setter Property="Template">
  32. <Setter.Value>
  33. <ControlTemplate TargetType="RepeatButton">
  34. <Border
  35. Height="10"
  36. Margin="2,0,2,0"
  37. Background="White"
  38. BorderThickness="0"
  39. CornerRadius="4"
  40. SnapsToDevicePixels="False" />
  41. </ControlTemplate>
  42. </Setter.Value>
  43. </Setter>
  44. </Style>
  45. <Style x:Key="SliderRepeatButton2" TargetType="RepeatButton">
  46. <Setter Property="SnapsToDevicePixels" Value="False" />
  47. <Setter Property="OverridesDefaultStyle" Value="true" />
  48. <Setter Property="Template">
  49. <Setter.Value>
  50. <ControlTemplate TargetType="RepeatButton">
  51. <Grid>
  52. <Border
  53. Background="White"
  54. BorderThickness="0"
  55. CornerRadius="5"
  56. SnapsToDevicePixels="False" />
  57. </Grid>
  58. </ControlTemplate>
  59. </Setter.Value>
  60. </Setter>
  61. </Style>
  62. <Style x:Key="SliderThumb" TargetType="Thumb">
  63. <Setter Property="SnapsToDevicePixels" Value="False" />
  64. <Setter Property="OverridesDefaultStyle" Value="true" />
  65. <Setter Property="Template">
  66. <Setter.Value>
  67. <ControlTemplate TargetType="Thumb">
  68. <Canvas>
  69. <Rectangle
  70. Canvas.Left="-25"
  71. Canvas.Top="-14"
  72. Width="50"
  73. Height="50"
  74. Fill="Transparent" />
  75. </Canvas>
  76. </ControlTemplate>
  77. </Setter.Value>
  78. </Setter>
  79. </Style>
  80. <Style x:Key="SliderVerticalThumb" TargetType="Thumb">
  81. <Setter Property="SnapsToDevicePixels" Value="False" />
  82. <Setter Property="OverridesDefaultStyle" Value="true" />
  83. <Setter Property="Template">
  84. <Setter.Value>
  85. <ControlTemplate TargetType="Thumb">
  86. <Rectangle
  87. Width="40"
  88. Height="13"
  89. Margin="-3,-5,-3,-5"
  90. Fill="White" />
  91. </ControlTemplate>
  92. </Setter.Value>
  93. </Setter>
  94. </Style>
  95. <ControlTemplate x:Key="Slider" TargetType="Slider">
  96. <Grid Background="Transparent">
  97. <Border
  98. x:Name="TrackBackground"
  99. Height="10"
  100. Margin="2,0,2,0"
  101. VerticalAlignment="Center"
  102. Background="White"
  103. BorderThickness="0"
  104. CornerRadius="4"
  105. Opacity="0.5" />
  106. <Track x:Name="PART_Track">
  107. <Track.DecreaseRepeatButton>
  108. <RepeatButton Command="Slider.DecreaseLarge" Style="{StaticResource SliderRepeatButton1}" />
  109. </Track.DecreaseRepeatButton>
  110. <Track.Thumb>
  111. <Thumb HorizontalAlignment="Center" Style="{StaticResource SliderThumb}" />
  112. </Track.Thumb>
  113. <Track.IncreaseRepeatButton>
  114. <RepeatButton Command="Slider.IncreaseLarge" Style="{StaticResource SliderRepeatButton}" />
  115. </Track.IncreaseRepeatButton>
  116. </Track>
  117. </Grid>
  118. </ControlTemplate>
  119. <ControlTemplate x:Key="Slider2" TargetType="Slider">
  120. <Grid Margin="0,5,0,5">
  121. <Grid.ColumnDefinitions>
  122. <ColumnDefinition Width="1*" />
  123. <ColumnDefinition Width="1*" />
  124. <ColumnDefinition Width="1*" />
  125. </Grid.ColumnDefinitions>
  126. <Border
  127. x:Name="TrackBackground"
  128. Grid.Column="1"
  129. Background="White"
  130. BorderThickness="0"
  131. CornerRadius="5"
  132. Opacity="0.5" />
  133. <Track x:Name="PART_Track" Grid.Column="1">
  134. <Track.DecreaseRepeatButton>
  135. <RepeatButton Command="Slider.DecreaseLarge" Style="{StaticResource SliderRepeatButton2}" />
  136. </Track.DecreaseRepeatButton>
  137. <Track.Thumb>
  138. <Thumb Style="{StaticResource SliderVerticalThumb}" />
  139. </Track.Thumb>
  140. <Track.IncreaseRepeatButton>
  141. <RepeatButton Command="Slider.IncreaseLarge" Style="{StaticResource SliderRepeatButton}" />
  142. </Track.IncreaseRepeatButton>
  143. </Track>
  144. </Grid>
  145. </ControlTemplate>
  146. <Style x:Key="Horizontal_Slider" TargetType="Slider">
  147. <Setter Property="Focusable" Value="False" />
  148. <Setter Property="SnapsToDevicePixels" Value="False" />
  149. <Setter Property="OverridesDefaultStyle" Value="true" />
  150. <Style.Triggers>
  151. <Trigger Property="Orientation" Value="Horizontal">
  152. <Setter Property="MinHeight" Value="50" />
  153. <Setter Property="MinWidth" Value="104" />
  154. <Setter Property="Template" Value="{StaticResource Slider}" />
  155. </Trigger>
  156. </Style.Triggers>
  157. </Style>
  158. <Style x:Key="Vertical_Slider" TargetType="Slider">
  159. <Setter Property="Focusable" Value="False" />
  160. <Setter Property="SnapsToDevicePixels" Value="False" />
  161. <Setter Property="OverridesDefaultStyle" Value="true" />
  162. <Style.Triggers>
  163. <Trigger Property="Orientation" Value="Vertical">
  164. <Setter Property="Template" Value="{StaticResource Slider2}" />
  165. </Trigger>
  166. </Style.Triggers>
  167. </Style>
  168. <Storyboard x:Key="sbShowVolSlider" Storyboard.TargetName="uxVolumeGrid">
  169. <ThicknessAnimation
  170. Storyboard.TargetProperty="Margin"
  171. To="0,0,0,0"
  172. Duration="0:0:0.2" />
  173. </Storyboard>
  174. <Storyboard x:Key="sbHideVolSlider" Storyboard.TargetName="uxVolumeGrid">
  175. <ThicknessAnimation
  176. Storyboard.TargetProperty="Margin"
  177. To="0,165,0,0"
  178. Duration="0:0:0.2" />
  179. </Storyboard>
  180. </UserControl.Resources>
  181. <Grid
  182. Background="Black"
  183. IsManipulationEnabled="True"
  184. PreviewTouchUp="Grid_PreviewTouchUp"
  185. TouchDown="ResetTimer"
  186. TouchMove="ResetTimer"
  187. TouchUp="Global_TouchUp">
  188. <Canvas
  189. x:Name="uxVideoPanel"
  190. Grid.Column="0"
  191. TouchDown="uxVideoPanel_TouchDown" />
  192. <Grid
  193. x:Name="uxControlPanel"
  194. Height="30"
  195. Margin="0,0,0,50"
  196. VerticalAlignment="Bottom"
  197. Visibility="Collapsed">
  198. <Grid.RenderTransform>
  199. <ScaleTransform CenterY="30" ScaleY="1" />
  200. </Grid.RenderTransform>
  201. <Grid.Background>
  202. <SolidColorBrush Opacity="0.7" Color="Black" />
  203. </Grid.Background>
  204. <Grid.ColumnDefinitions>
  205. <ColumnDefinition Width="15" />
  206. <ColumnDefinition Width="30" />
  207. <ColumnDefinition Width="15" />
  208. <ColumnDefinition Width="30" />
  209. <ColumnDefinition Width="15" />
  210. <ColumnDefinition Width="*" />
  211. <ColumnDefinition Width="15" />
  212. <ColumnDefinition Width="30" />
  213. <ColumnDefinition Width="15" />
  214. </Grid.ColumnDefinitions>
  215. <Image
  216. Grid.Column="1"
  217. RenderOptions.BitmapScalingMode="HighQuality"
  218. Source="/VideoPlayer;component/VideoPlayerImage/pause.png"
  219. Stretch="Fill"
  220. TouchDown="pause_TouchDown" />
  221. <Image
  222. Grid.Column="3"
  223. RenderOptions.BitmapScalingMode="HighQuality"
  224. Source="/VideoPlayer;component/VideoPlayerImage/stop.png"
  225. Stretch="Fill"
  226. TouchDown="stop_TouchDown" />
  227. <Grid
  228. Grid.Column="5"
  229. TouchDown="uxProgressSlider_TouchDown"
  230. TouchMove="uxProgressSlider_TouchMove"
  231. TouchUp="uxProgressSlider_TouchUp">
  232. <Slider
  233. x:Name="uxProgressSlider"
  234. VerticalAlignment="Center"
  235. Style="{StaticResource Horizontal_Slider}"
  236. TouchDown="uxProgressSlider_TouchDown"
  237. TouchMove="uxProgressSlider_TouchMove"
  238. ValueChanged="uxProgressSlider_ValueChanged"
  239. Value="5" />
  240. </Grid>
  241. <Grid
  242. x:Name="uxVolumeBase"
  243. Grid.Column="7"
  244. HorizontalAlignment="Center"
  245. VerticalAlignment="Center"
  246. SnapsToDevicePixels="False">
  247. <Image
  248. x:Name="uxSound"
  249. Grid.Column="3"
  250. RenderOptions.BitmapScalingMode="HighQuality"
  251. Source="/VideoPlayer;component/VideoPlayerImage/sound.png"
  252. Stretch="Fill"
  253. TouchDown="uxSound_TouchDown" />
  254. <Image
  255. x:Name="uxNoSound"
  256. Grid.Column="3"
  257. RenderOptions.BitmapScalingMode="HighQuality"
  258. Source="/VideoPlayer;component/VideoPlayerImage/no-sound.png"
  259. Stretch="Fill"
  260. TouchDown="uxSound_TouchDown"
  261. Visibility="Collapsed" />
  262. <Canvas Margin="0,-150,0,0">
  263. <Grid
  264. x:Name="uxVolumeGrid"
  265. Width="{Binding ElementName=uxVolumeBase, Path=ActualWidth}"
  266. Height="150"
  267. HorizontalAlignment="Center"
  268. VerticalAlignment="Top"
  269. TouchDown="uxVolumeGrid_TouchDown"
  270. TouchMove="uxVolumeGrid_TouchMove"
  271. Visibility="Collapsed">
  272. <Slider
  273. x:Name="uxVolumeSlider"
  274. Orientation="Vertical"
  275. Style="{StaticResource Vertical_Slider}"
  276. TouchDown="uxVolumeSlider_TouchDown"
  277. TouchMove="uxVolumeSlider_TouchMove"
  278. ValueChanged="uxVolumeSlider_ValueChanged"
  279. Value="5" />
  280. <Grid.Background>
  281. <SolidColorBrush Opacity="0.7" Color="Black" />
  282. </Grid.Background>
  283. </Grid>
  284. <Canvas.Clip>
  285. <RectangleGeometry Rect="0,0,50,150" />
  286. </Canvas.Clip>
  287. </Canvas>
  288. </Grid>
  289. </Grid>
  290. <Grid
  291. x:Name="uxCoverImageParent"
  292. Grid.Row="0"
  293. Visibility="Visible">
  294. <Image
  295. HorizontalAlignment="Center"
  296. VerticalAlignment="Center"
  297. Source="/VideoPlayer;component/VideoPlayerImage/play.png"
  298. Stretch="UniformToFill" />
  299. </Grid>
  300. <Grid
  301. x:Name="uxPlayButtonParent"
  302. Grid.Row="0"
  303. IsManipulationEnabled="True"
  304. Visibility="Visible">
  305. <Grid.Background>
  306. <SolidColorBrush Opacity="0.3" Color="Black" />
  307. </Grid.Background>
  308. <Image
  309. x:Name="uxPlayButton"
  310. HorizontalAlignment="Center"
  311. VerticalAlignment="Center"
  312. RenderOptions.BitmapScalingMode="HighQuality"
  313. Source="/VideoPlayer;component/VideoPlayerImage/play.png"
  314. Stretch="None"
  315. TouchUp="uxPlayButton_TouchUp">
  316. <Image.RenderTransform>
  317. <ScaleTransform CenterX="49" CenterY="49" />
  318. </Image.RenderTransform>
  319. </Image>
  320. </Grid>
  321. </Grid>
  322. </UserControl>