基於<MediaElement>的WPF視頻播放器（帶部分特效）【2】

来源:http://www.cnblogs.com/lovecsharp094/archive/2016/07/01/5634540.html
-Advertisement-
Play Games

一、前言 上回說到需要做放視頻的使用嚮導，這兩天公司里的老司機一直幫我答疑解惑，讓這個任務變得挺順的，真心感謝他們！ 這次與【1】中的不同之處在於： （1）播放和暫停按鈕集成在<MediaElement>的點擊事件之中，點一下是播放，再點一下是暫停 （2）加入了微軟官方改寫的粒子特效 （3）加上了自 ...


一、前言

      上回說到需要做放視頻的使用嚮導，這兩天公司里的老司機一直幫我答疑解惑，讓這個任務變得挺順的，真心感謝他們！

       這次與【1】中的不同之處在於：

       （1）播放和暫停按鈕集成在<MediaElement>的點擊事件之中，點一下是播放，再點一下是暫停

       （2）加入了微軟官方改寫的粒子特效

       （3）加上了自己琢磨的按鈕旋轉效果，以及按鈕淡出popup效果

       （4）進度條改善美觀

 

二、代碼

      前臺：

  1 <Window
  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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6         xmlns:local="clr-namespace:WPF_Nav"
  7         xmlns:dxlc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol" xmlns:dxwui="http://schemas.devexpress.com/winfx/2008/xaml/windowsui" x:Class="WPF_Nav.MainWindow"
  8         mc:Ignorable="d"
  9         Title="MainWindow" Height="600" Width="800" WindowStyle="None" ResizeMode="NoResize" WindowStartupLocation ="CenterScreen" Loaded="Window_Loaded">
 10 
 11     <Window.Resources>
 12         <LinearGradientBrush x:Key="SliderBackground"  StartPoint="0,0" EndPoint="0,1">
 13             <GradientStop Offset="0.5" Color="#00b3fe"/>
 14         </LinearGradientBrush>
 15         <LinearGradientBrush x:Key="SliderThumb"  StartPoint="0,0" EndPoint="0,1">
 16             <GradientStop Offset="0" Color="#FFD9D3E8"/>
 17         </LinearGradientBrush>
 18 
 19         <Style x:Key="Slider_RepeatButton" TargetType="RepeatButton">
 20             <Setter Property="Focusable" Value="false" />
 21             <Setter Property="Height" Value="5"/>
 22             <Setter Property="BorderBrush" Value="Transparent"/>
 23             <Setter Property="Template">
 24                 <Setter.Value>
 25                     <ControlTemplate TargetType="RepeatButton">
 26                         <Border Background="{StaticResource SliderBackground}" />
 27                     </ControlTemplate>
 28                 </Setter.Value>
 29             </Setter>
 30         </Style>
 31 
 32         <Style x:Key="Slider_RepeatButton1" TargetType="RepeatButton">
 33             <Setter Property="Focusable" Value="false" />
 34             <Setter Property="Height" Value="5"/>
 35             <Setter Property="BorderBrush" Value="Transparent"/>
 36             <Setter Property="Template">
 37                 <Setter.Value>
 38                     <ControlTemplate TargetType="RepeatButton">
 39                         <Border Background="Silver" />
 40                     </ControlTemplate>
 41                 </Setter.Value>
 42             </Setter>
 43         </Style>
 44 
 45         <Style x:Key="Slider_Thumb" TargetType="Thumb">
 46             <Setter Property="Focusable" Value="false" />
 47             <Setter Property="Template">
 48                 <Setter.Value>
 49                     <ControlTemplate TargetType="Thumb">
 50                         <Ellipse Name="e" Width="15" Height="15" Fill="White" Stroke="Gray"/>
 51                     </ControlTemplate>
 52                 </Setter.Value>
 53             </Setter>
 54         </Style>
 55 
 56         <Style  TargetType="Slider">
 57             <Setter Property="Focusable" Value="false" />
 58             <Setter Property="Template">
 59                 <Setter.Value>
 60                     <ControlTemplate TargetType="Slider">
 61                         <Grid>
 62                             <Border BorderBrush="Red" BorderThickness="0" CornerRadius="0,0,0,0">
 63                                 <Track  Name="PART_Track">
 64                                     <Track.DecreaseRepeatButton>
 65                                         <RepeatButton Style="{StaticResource Slider_RepeatButton}" Command="Slider.DecreaseLarge"/>
 66                                     </Track.DecreaseRepeatButton>
 67                                     <Track.IncreaseRepeatButton>
 68                                         <RepeatButton Style="{StaticResource Slider_RepeatButton1}" Command="Slider.IncreaseLarge"/>
 69                                     </Track.IncreaseRepeatButton>
 70                                     <Track.Thumb>
 71                                         <Thumb Style="{StaticResource Slider_Thumb}"/>
 72                                     </Track.Thumb>
 73                                 </Track>
 74                             </Border>
 75                         </Grid>
 76                     </ControlTemplate>
 77                 </Setter.Value>
 78             </Setter>
 79         </Style>
 80 
 81 
 82         <Style x:Key="Button_Close" TargetType="Button">
 83             <Setter Property="Template">
 84                 <Setter.Value>
 85                     <ControlTemplate>
 86                         <Image x:Name="IMG" Source="E:\Test\WPFTest\Sources\Close.jpg"></Image>
 87                     </ControlTemplate>
 88                 </Setter.Value>
 89             </Setter>
 90         </Style>
 91 
 92         <Style x:Key="Button_Forbidden" TargetType="Button">
 93             <Setter Property="Template">
 94                 <Setter.Value>
 95                     <ControlTemplate>
 96                         <Image x:Name="IMG" Source="E:\Test\WPFTest\Sources\Forbidden.jpg"></Image>
 97                     </ControlTemplate>
 98                 </Setter.Value>
 99             </Setter>
100         </Style>
101 
102 
103         <Style x:Key="Button_Left" TargetType="Button">
104             <Setter Property="Template">
105                 <Setter.Value>
106                     <ControlTemplate>
107                         <Image x:Name="IMG" Source="E:\Test\WPFTest\Sources\Left.png" Stretch="Fill"></Image>
108                     </ControlTemplate>
109                 </Setter.Value>
110             </Setter>
111         </Style>
112 
113 
114         <Style x:Key="Button_Right" TargetType="Button">
115             <Setter Property="Template">
116                 <Setter.Value>
117                     <ControlTemplate>
118                         <Image x:Name="IMG" Source="E:\Test\WPFTest\Sources\Right.png" Stretch="Fill"></Image>
119                     </ControlTemplate>
120                 </Setter.Value>
121             </Setter>
122         </Style>
123 
124     </Window.Resources>
125 
126     <Grid Name="Main_Grid">
127         <Grid.RowDefinitions>
128             <RowDefinition Height="50"></RowDefinition>
129             <RowDefinition Height="500"></RowDefinition>
130             <RowDefinition Height="50"></RowDefinition>
131         </Grid.RowDefinitions>
132 
133         <Border Name="title_Border" BorderBrush="#FBD3D0CD" BorderThickness="3" Grid.Row="0">
134             <Grid Name="Title">
135                 <Grid.ColumnDefinitions>
136                     <ColumnDefinition Width="200"></ColumnDefinition>
137                     <ColumnDefinition Width="400"></ColumnDefinition>
138                     <ColumnDefinition Width="120"></ColumnDefinition>
139                     <ColumnDefinition Width="80"></ColumnDefinition>
140                 </Grid.ColumnDefinitions>
141 
142                 <Grid Grid.Column="1">
143                     <Canvas x:Name="ParticleHost" Width="400" >
144                         <TextBlock Name="txtB_Step" Grid.Column="1"  Width="200" Height="30" TextAlignment="Center" FontSize="20" FontFamily="Microsoft YaHei" Text="asss" Margin="100,7,0,0"/>
145                     </Canvas>
146                 </Grid>
147                 
148                 <Grid Name="grid_Cofig" Grid.Column="3">
149                 <Button Name="btn_Forbidden"  Width="30" Click="Config_Click" Margin="2,10,48,12" HorizontalAlignment="Center"  Focusable="False" Style="{StaticResource Button_Forbidden}" RenderTransformOrigin="0.5,0.5" ToolTipService.ToolTip="播放設置"  ToolTipService.InitialShowDelay="1" ToolTipService.Placement="Bottom">
150                     <Button.RenderTransform>
151                         <RotateTransform x:Name="trans_forbidden" Angle="0"/>
152                     </Button.RenderTransform>
153                     <Button.Triggers>
154                         <EventTrigger RoutedEvent="Button.MouseEnter">
155                             <BeginStoryboard >
156                                 <Storyboard>
157                                     <DoubleAnimation From="0" To="90"  Duration="0:0:0.4"
158                                              Storyboard.TargetName="trans_forbidden"
159                                              Storyboard.TargetProperty="Angle"/>
160                                 </Storyboard>
161                             </BeginStoryboard>
162                         </EventTrigger>
163                     </Button.Triggers>
164                 </Button>
165                 </Grid>
166 
167                 <Popup x:Name="Pop" PopupAnimation="Slide" Placement="Bottom"  Width="93" Height="58" PlacementTarget="{Binding ElementName=grid_Cofig}" AllowsTransparency="True" StaysOpen="False" IsOpen="False" >
168                     <Border Background="White"  BorderBrush="#FFC4C9CD" BorderThickness="2" Width="93">
169                         <StackPanel Margin="1">
170                             <StackPanel Name="sp_play" Orientation="Horizontal" Width="83" Height="22" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="2" MouseEnter="sp_play_enter" MouseLeave="sp_play_leave" >
171                                 <CheckBox x:Name="ch_play" VerticalAlignment="Center" Margin="3,4" />
172                                 <TextBlock x:Name="txb_play" Text="不再播放" Margin="5,0" VerticalAlignment="Center"/>
173                             </StackPanel>
174                             <StackPanel Name="sp_doc" Width="83" Height="22" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="2" MouseEnter="sp_doc_enter" MouseLeave="sp_doc_leave">
175                                 <TextBlock Name="txb_Doc" Text="官方幫助文檔" Margin="4,0,5,0" VerticalAlignment="Center">
176                                 </TextBlock>
177                             </StackPanel>
178                         </StackPanel>
179                     </Border>
180                 </Popup>
181 
182                 <Button Name="btn_Close" Grid.Column="3" Width="30" Click="Close_Click" Margin="37,10,13,12" HorizontalAlignment="Center"  Focusable="False" Style="{StaticResource Button_Close}" RenderTransformOrigin="0.5,0.5" ToolTipService.ToolTip="關閉視頻"  ToolTipService.InitialShowDelay="1" ToolTipService.Placement="Bottom">
183                     <Button.RenderTransform>
184                         <RotateTransform x:Name="trans" Angle="0"/>
185                     </Button.RenderTransform>
186                     <Button.Triggers>
187                         <EventTrigger RoutedEvent="Button.MouseEnter">
188                             <BeginStoryboard >
189                                 <Storyboard>
190                                     <DoubleAnimation From="0" To="90"  Duration="0:0:0.4"
191                                              Storyboard.TargetName="trans"
192                                              Storyboard.TargetProperty="Angle"/>
193                                 </Storyboard>
194                             </BeginStoryboard>
195                         </EventTrigger>
196                     </Button.Triggers>
197                 </Button>
198 
199             </Grid>
200         </Border>
201 
202 
203         <Grid Name="Movie" Grid.Row="1">
204             <MediaElement Stretch="Fill" LoadedBehavior="Manual" Name="QS_Movie" MediaOpened="Element_MediaOpened" Loaded="QS_Movie_Loaded" MouseLeftButtonDown="QS_Movie_MouseLeftButtonDown" />
205             <Button Name="btn_pre" Width="30" Height="40" HorizontalAlignment="Left" VerticalAlignment="Center" Click="Left_Click"  Focusable="False"  Style="{StaticResource Button_Left}"/>
206             <Button Name="btn_next" Width="30" Height="40" HorizontalAlignment="Right" VerticalAlignment="Center" Click="Right_Click" Focusable="False" Style="{StaticResource Button_Right}"/>
207         </Grid>
208 
209 
210         <Border Name="Progress_Border" BorderBrush="#FBD3D0CD" BorderThickness="3" Grid.Row="2">
211             <Grid Name="Control_Progress" >
212                 <Slider Grid.Column="0" Width="700" Name="timelineSlider" VerticalAlignment="Center"  PreviewMouseLeftButtonDown="timelineMDown"  PreviewMouseLeftButtonUp="timelineMUp" BorderThickness="0,6,0,0" />
213             </Grid>
214         </Border>
215 
216     </Grid>
217 </Window>

 

       後臺：

 1 using System.Windows.Media;
 2 using System.Windows.Media.Effects;
 3 using System.Windows.Shapes;
 4 
 5 namespace WPF_Nav
 6 {
 7     public class Particle
 8     {
 9         public Point3D Position { get; set; }
10         public Point3D Velocity { get; set; }
11         public double Size { get; set; }
12         public Ellipse Ellipse { get; set; }
13         public BlurEffect Blur { get; set; }
14         public Brush Brush { get; set; }
15     }
16 }

 

 1 namespace WPF_Nav
 2 {
 3     public class Point3D
 4     {
 5         public double X { get; set; }
 6         public double Y { get; set; }
 7         public double Z { get; set; }
 8 
 9         public Point3D(double X, double Y, double Z)
10         {
11             this.X = X;
12             this.Y = Y;
13             this.Z = Z;
14         }
15     }
16 }

     主體：

  1 using System;
  2 using System.Collections.Generic;
  3 using System.Linq;
  4 using System.Text;
  5 using System.Threading.Tasks;
  6 using System.Windows;
  7 using System.Windows.Controls;
  8 using System.Windows.Controls.Primitives;
  9 using System.Windows.Data;
 10 using System.Windows.Documents;
 11 using System.Windows.Input;
 12 using System.Windows.Media;
 13 using System.Windows.Media.Imaging;
 14 using System.Windows.Navigation;
 15 using System.Windows.Shapes;
 16 using System.Windows.Threading;
 17 using System.Windows.Media.Effects;
 18 
 19 namespace WPF_Nav
 20 {
 21     /// <summary>
 22     /// MainWindow.xaml 的交互邏輯
 23     /// </summary>
 24     public partial class MainWindow : Window
 25     {
 26         DispatcherTimer dispatcherTimer = new System.Windows.Threading.DispatcherTimer(); // 定義一個DT
 27         bool play_flag = true;  //判斷播放狀態
 28         int play_now = 0;       //判斷當前視頻索引
 29         int play_target;
 30         List<string> Play_Video = new List<string>();
 31         List<string> Title_Video = new List<string>();
 32 
 33 
 34 
 35         public MainWindow()
 36         {
 37             InitializeComponent();
 38             Play_Video = LoadMovies();
 39             Title_Video = LoadTitles();
 40         }
 41 
 42         private List<string> LoadTitles()
 43         {
 44             List<string> list_title = new List<string>();
 45             list_title.Add("Step1");
 46             list_title.Add("Step2");
 47             list_title.Add("Step3");
 48             return list_title;
 49         }
 50         private List<string> LoadMovies()
 51         {
 52             List<string> Movie_Uri = new List<string>();
 53             Movie_Uri.Add(@"E:\Test\WPFTest\Sources\preview.mp4");
 54             Movie_Uri.Add(@"E:\Test\WPFTest\Sources\preview1.mp4");
 55             Movie_Uri.Add(@"E:\Test\WPFTest\Sources\preview2.mp4");
 56             return Movie_Uri;
 57         }
 58 
 59         private void Play_Click(object sender, RoutedEventArgs e)
 60         {         
 61             QS_Movie.Play();          
 62         }
 63 
 64         private void Pause_Click(object
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 【手記】為windows2008建個睡眠快捷方式
    一直喜歡用【休眠】，但如果離開的時長有點尷尬，既不想開著機無謂耗電，又不想動用休眠傷硬碟，【睡眠】就成了一種合適的選擇。在XP/WIN7等桌面系統下，是可以很方便的進行睡眠/休眠操作的，開始菜單里點就是。但在伺服器系統下，比如win2k8r2，就不是那麼方便了，在開始菜單中找不到現成選項，我能想到的 ...
  • CentOS7 firewall的使用
    # 查看區域 firewall-cmd --get-zones # 查看預設區域 firewall-cmd --get-default-zone # 給區域添加永久性服務 firewall-cmd --add-service=http --zone=public --permanent # 刪除區域 ...
  • 打開Application Data
    1.建尾碼名為reg的新文件，複製以下代碼後點擊運行。 Windows Registry Editor Version 5.00[HKEY_CLASSES_ROOT\*\shell\runas]@="管理員取得所有權""NoWorkingDirectory"=""[HKEY_CLASSES_ROOT ...
  • 在WPF中 使用StreamGeometry提高性能。
    現在正在使用WPF開發一個股票K線圖圖表，性能考慮是最大的一方面。 每根柱子寬5像素，柱子和柱子之間的間隔3像素。 一個1920*1080解析度的屏幕，勢必要繪製超過200個柱子。如果選擇的繪製方案不先進，對圖表的繪製是有很大的性能影響的。 任何圖形都由直線和曲線構成的。在WPF中，最底層的圖形的繪 ...
  • C#圖片採集軟體 自動翻頁 自動分類（收集美圖必備工具）
    網站管理員希望將別人的整站數據下載到自己的網站里或者將別人網站的一些內容保存到自己的伺服器上。從內容中抽取相關的欄位，發佈到自己的網站系統中。有時需要將網頁相關的文件也保存到本地，如圖片、附件等。 圖片採集軟體能採集任何網站的各種格式圖片,實現把所有文章、新聞、帖子等中間的圖片全部有有序列的分類後保 ...
  • CYQ.Data 從入門到放棄ORM系列：開篇：自動化框架編程思維
    隨著CYQ.Data 開始回歸免費使用之後，發現用戶的情緒越來越激動，為了保持這持續的激動性，讓我有了開源的念頭。同時，由於框架經過這5-6年來的不斷演進，以前發的早期教程已經太落後了，包括使用方式，及相關介紹，都容易引人誤解。為此，我打算重新寫個系列來介紹最新的版本，讓大伙從傳統的ORM編程過渡到... ...
  • asp.net core 在Ubuntu 運行
    環境: Ubuntu 16.04 dotnet-dev-1.0.0-preview2-003121 Visual Studio 2015 update 3 Ubuntu 安裝.net core 參考:https://www.microsoft.com/net/core#ubuntu 1.添加源 2. ...
  • .NET Core Windows環境安裝與體驗
    1、安裝.NET Core SDK 在windows下開發.NET Core最好使用Visual Studio工具。下載地址與安裝： VS2015最新版本：Visual Studio 2015 Update 3* VS環境下的.Net Core：.NET Core 1.0 for Visual St... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類