基于WPF實(shí)現(xiàn)視頻封面查看器
如何實(shí)現(xiàn) WPF 視頻封面查看器
框架使用
.NET40
;Visual Studio 2019
;- 實(shí)現(xiàn)視頻封面查看器
NineGridView
基于Grid
實(shí)現(xiàn)三
行三
列,使用兩
行兩
列做主封面展示視頻播放(也可以做rtsp
視頻流播放),還剩下五
個(gè)做候選封面區(qū)展示,當(dāng)點(diǎn)擊封面區(qū)某個(gè)封面時(shí)進(jìn)行替換主封面區(qū)視頻(流)播放。 - 當(dāng)鼠標(biāo)移動(dòng)到候選封面區(qū)時(shí),動(dòng)畫從上一次鼠標(biāo)的位置到當(dāng)前鼠標(biāo)位置做移動(dòng)動(dòng)畫。
示例代碼
1)新建 NineGridView.cs
代碼如下:
using?System; using?System.Collections.Generic; using?System.Linq; using?System.Windows; using?System.Windows.Controls; using?System.Windows.Input; using?System.Windows.Media; using?System.Windows.Media.Animation; namespace?WPFDevelopers.Controls { ????public?class?NineGridView?:?Grid ????{ ????????private?int?_rows?=?3; ????????private?int?_columns?=?3; ????????private?Dictionary<Rect,?int>?_dicRect?=?new?Dictionary<Rect,?int>(); ????????private?Border?_border; ????????private?Storyboard?_storyboard; ????????private?Rect?_lastRect; ????????private?int?_last; ????????public?static?readonly?DependencyProperty?SelectBrushProperty?= ??????????DependencyProperty.Register("SelectBrush",?typeof(Brush),?typeof(NineGridView), ??????????????new?PropertyMetadata(Brushes.Red)); ???????? ????????public?static?readonly?DependencyProperty?BorderThicknessProperty?= ???????DependencyProperty.Register("BorderThickness",?typeof(Thickness),?typeof(NineGridView), ???????????new?PropertyMetadata(new?Thickness(1))); ????????public?NineGridView() ????????{ ????????????Loaded?+=?NineGridView_Loaded; ????????????SizeChanged?+=?NineGridView_SizeChanged; ????????} ????????public?Brush?SelectBrush ????????{ ????????????get?=>?(Brush)GetValue(SelectBrushProperty); ????????????set?=>?SetValue(SelectBrushProperty,?value); ????????} ?????? ????????public?Thickness?BorderThickness ????????{ ????????????get?=>?(Thickness)GetValue(BorderThicknessProperty); ????????????set?=>?SetValue(BorderThicknessProperty,?value); ????????} ????????private?void?NineGridView_SizeChanged(object?sender,?SizeChangedEventArgs?e) ????????{ ????????????if?(_border?==?null?||?_last?==?0)?return; ????????????var?frameworkElement?=?InternalChildren[_last]?as?FrameworkElement; ????????????if?(frameworkElement?==?null)?return; ????????????_border.Width?=?frameworkElement.ActualWidth; ????????????_border.Height?=?frameworkElement.ActualHeight; ????????????var?point?=?frameworkElement.TranslatePoint(new?Point(0,?0),?this); ????????????CreateStoryboard(point); ????????} ????????private?void?NineGridView_Loaded(object?sender,?RoutedEventArgs?e) ????????{ ????????????RowDefinitions.Clear(); ????????????for?(int?i?=?0;?i?<?_rows;?i++) ????????????{ ????????????????var?row1?=?new?RowDefinition(); ????????????????RowDefinitions.Add(row1); ????????????} ????????????ColumnDefinitions.Clear(); ????????????for?(int?i?=?0;?i?<?_columns;?i++) ????????????{ ????????????????var?col1?=?new?ColumnDefinition(); ????????????????ColumnDefinitions.Add(col1); ????????????} ????????????UIElementCollection?children?=?InternalChildren; ????????????int?numCol?=?0,?numRow?=?0; ????????????for?(int?i?=?0,?count?=?children.Count;?i?<?count;?++i) ????????????{ ????????????????if?(i?>?6)?return; ????????????????UIElement?child?=?children[i]; ????????????????if?(child?!=?null) ????????????????{ ????????????????????if?(i?==?0) ????????????????????{ ????????????????????????SetRowSpan(child,?2); ????????????????????????SetColumnSpan(child,?2); ????????????????????} ????????????????????else ????????????????????{ ????????????????????????var?num?=?i?-?1; ????????????????????????var?col?=?GetColumnSpan(children[num]); ????????????????????????col?=?col?==?1???GetColumn(children[num])?:?col; ????????????????????????if?(i?+?1?<=?_columns) ????????????????????????{ ????????????????????????????SetColumn(child,?col); ????????????????????????????SetRow(child,?numRow); ????????????????????????????numRow++; ????????????????????????} ????????????????????????else ????????????????????????{ ????????????????????????????var?row?=?GetRowSpan(children[0]); ????????????????????????????SetColumn(child,?numCol); ????????????????????????????SetRow(child,?row); ????????????????????????????numCol++; ????????????????????????} ????????????????????} ????????????????} ????????????} ????????????if(_border?!=?null) ????????????????Children.Remove(_border); ????????????_border?=?new?Border ????????????{ ????????????????BorderThickness?=?BorderThickness, ????????????????BorderBrush?=?SelectBrush, ????????????????VerticalAlignment?=?VerticalAlignment.Top, ????????????????HorizontalAlignment?=?HorizontalAlignment.Left ????????????}; ????????????_border.Name?=?"PART_Adorner"; ????????????_border.RenderTransform?=?new?TranslateTransform(); ????????????SetRowSpan(_border,?_rows); ????????????SetColumnSpan(_border,?_columns); ????????????_border.Width?=?ActualWidth?/?_columns?-?2; ????????????_border.Height?=?ActualHeight?/?_rows?-?2; ????????????var?_translateTransform?=?(TranslateTransform)_border.RenderTransform; ????????????_translateTransform.X?=?_border.Width?*?2?+?4; ????????????Children.Add(_border); ????????????_last?=?1; ????????} ????????protected?override?void?OnPreviewMouseMove(MouseEventArgs?e) ????????{ ????????????base.OnPreviewMouseMove(e); ????????????var?currentPoint?=?e.GetPosition(this); ????????????if?(_lastRect.Contains(currentPoint)) ????????????????return; ????????????_dicRect.Clear(); ????????????UIElementCollection?children?=?InternalChildren; ????????????for?(int?i?=?0,?count?=?children.Count;?i?<?count;?++i) ????????????{ ????????????????if?(i?>=?6?||?i?==?0)?continue; ????????????????var?child?=?children[i]?as?FrameworkElement; ????????????????if?(child?!=?null) ????????????????{ ????????????????????var?point?=?child.TranslatePoint(new?Point(0,?0),?this); ????????????????????var?rect?=?new?Rect(point.X,?point.Y,?child.ActualWidth,?child.ActualHeight); ????????????????????_dicRect.Add(rect,?i); ????????????????} ????????????} ????????????var?model?=?_dicRect.Keys.FirstOrDefault(x?=>?x.Contains(currentPoint)); ????????????if?(model?==?default)?return; ????????????_dicRect.TryGetValue(model,?out?_last); ????????????if?(_border?==?null)?return; ????????????CreateStoryboard(new?Point(model.X,?model.Y)); ????????????_border.Width?=?model.Width; ????????????_border.Height?=?model.Height; ????????????_lastRect?=?model; ????????} ????????void?CreateStoryboard(Point?point) ????????{ ????????????var?sineEase?=?new?SineEase()?{?EasingMode?=?EasingMode.EaseOut?}; ????????????if?(_storyboard?==?null) ????????????????_storyboard?=?new?Storyboard(); ????????????else ????????????????_storyboard.Children.Clear(); ????????????var?animationX?=?new?DoubleAnimation ????????????{ ????????????????Duration?=?TimeSpan.FromMilliseconds(500), ????????????????To?=?point.X, ????????????????EasingFunction?=?sineEase ????????????}; ????????????Storyboard.SetTargetProperty(animationX,?new?PropertyPath("(Border.RenderTransform).(TranslateTransform.X)")); ????????????_storyboard.Children.Add(animationX); ????????????var?animationY?=?new?DoubleAnimation ????????????{ ????????????????Duration?=?TimeSpan.FromMilliseconds(500), ????????????????To?=?point.Y, ????????????????EasingFunction?=?sineEase ????????????}; ????????????Storyboard.SetTargetProperty(animationY,?new?PropertyPath("(Border.RenderTransform).(TranslateTransform.Y)")); ????????????_storyboard.Children.Add(animationY); ????????????_storyboard.Begin(_border); ????????} ????} }
2)新建 NineGridViewExample.xaml
代碼如下:
<UserControl?x:Class="WPFDevelopers.Samples.ExampleViews.NineGridViewExample" ?????????????xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" ?????????????xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ?????????????xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"? ?????????????xmlns:d="http://schemas.microsoft.com/expression/blend/2008"? ?????????????xmlns:wpfdev="https://github.com/WPFDevelopersOrg/WPFDevelopers" ??????????????xmlns:controls="clr-namespace:WPFDevelopers.Samples.Controls" ?????????????xmlns:local="clr-namespace:WPFDevelopers.Samples.ExampleViews" ?????????????mc:Ignorable="d"? ?????????????d:DesignHeight="450"?d:DesignWidth="800"> ????<controls:CodeViewer> ????????<wpfdev:NineGridView?BorderThickness="1"?SelectBrush="Red"> ????????????<wpfdev:NineGridView.Resources> ????????????????<Style?TargetType="TextBlock"> ????????????????????<Setter?Property="Foreground"?Value="White"/> ????????????????????<Setter?Property="VerticalAlignment"?Value="Center"/> ????????????????????<Setter?Property="HorizontalAlignment"?Value="Center"/> ????????????????</Style> ????????????????<Style?TargetType="Border"> ????????????????????<Setter?Property="Margin"?Value="1"/> ????????????????</Style> ????????????</wpfdev:NineGridView.Resources> ????????????<MediaElement?x:Name="MyMediaElement"?Loaded="MyMediaElement_Loaded" ??????????????????????????MediaEnded="MyMediaElement_MediaEnded"/> ????????????<Border?Background="#282C34"> ????????????????<wpfdev:SmallPanel> ????????????????????<TextBlock?Text="信號(hào)源1"/> ????????????????????<Border?Background="{DynamicResource?PrimaryNormalSolidColorBrush}" ????????????????????????????VerticalAlignment="Top" ????????????????????????????HorizontalAlignment="Right" ????????????????????????????Padding="10,4" ????????????????????????????CornerRadius="3"> ????????????????????????<TextBlock?Text="HD"/> ????????????????????</Border> ????????????????</wpfdev:SmallPanel> ????????????</Border> ????????????<Border?Background="#282C34"> ????????????????<TextBlock?Text="無(wú)信號(hào)"/> ????????????</Border> ????????????<Border?Background="#282C34"> ????????????????<TextBlock?Text="無(wú)信號(hào)"/> ????????????</Border> ????????????<Border?Background="#282C34"> ????????????????<TextBlock?Text="無(wú)信號(hào)"/> ????????????</Border> ????????????<Border?Background="#282C34"> ????????????????<TextBlock?Text="無(wú)信號(hào)"/> ????????????</Border> ????????</wpfdev:NineGridView> ????????<controls:CodeViewer.SourceCodes> ????????????<controls:SourceCodeModel? ????????????????CodeSource="/WPFDevelopers.SamplesCode;component/ExampleViews/NineGridViewExample.xaml"? ????????????????CodeType="Xaml"/> ????????????<controls:SourceCodeModel? ????????????????CodeSource="/WPFDevelopers.SamplesCode;component/ExampleViews/NineGridViewExample.xaml.cs"? ????????????????CodeType="CSharp"/> ????????</controls:CodeViewer.SourceCodes> ????</controls:CodeViewer> </UserControl>
3)新建 NineGridViewExample.xaml.cs
代碼如下:
using?System; using?System.IO; using?System.Windows; using?System.Windows.Controls; namespace?WPFDevelopers.Samples.ExampleViews { ????///?<summary> ????///?NineGridViewExample.xaml?的交互邏輯 ????///?</summary> ????public?partial?class?NineGridViewExample?:?UserControl ????{ ????????public?NineGridViewExample() ????????{ ????????????InitializeComponent(); ????????} ????????private?void?MyMediaElement_Loaded(object?sender,?RoutedEventArgs?e) ????????{ ????????????var?path?=?"E:\\DCLI6K5UIAEmH9R.mp4"; ????????????if?(File.Exists(path)) ????????????????MyMediaElement.Source?=?new?Uri("path"); ????????} ????????private?void?MyMediaElement_MediaEnded(object?sender,?RoutedEventArgs?e) ????????{ ????????????MyMediaElement.Position?=?new?TimeSpan(0); ????????} ???????? ????} }
效果圖
到此這篇關(guān)于基于WPF實(shí)現(xiàn)視頻封面查看器的文章就介紹到這了,更多相關(guān)WPF視頻封面查看器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
淺析C#中的Main(String[] args)參數(shù)輸入問(wèn)題
本篇文章主要是對(duì)C#中的Main(String[] args)參數(shù)輸入問(wèn)題進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01mvc C# JavaScript LigerUI oracle實(shí)現(xiàn)用戶的注冊(cè)、登陸驗(yàn)證、登陸
這篇文章主要介紹了mvc C# JavaScript LigerUI oracle實(shí)現(xiàn)用戶的注冊(cè)、登陸驗(yàn)證、登陸的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-04-04C#使用Objects?Comparer進(jìn)行對(duì)象比較
本文主要介紹了C#使用Objects?Comparer進(jìn)行對(duì)象比較,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07Unity 點(diǎn)擊UI與點(diǎn)擊屏幕沖突的解決方案
這篇文章主要介紹了Unity 點(diǎn)擊UI與點(diǎn)擊屏幕沖突的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2021-04-04