如何实现 WPF 视频封面查看器
如何实现 WPF 视频封面查看器
控件名：NineGridView
作 者：WPFDevelopersOrg - 驚鏵
原文链接[1] ：
控件名：NineGridView
作 者：WPFDevelopersOrg - 驚鏵
原文链接[1] ：
框架使用 .NET40 ；
Visual Studio 2019 ;
实现视频封面查看器 NineGridView 基于 Grid 实现 三 行 三 列，使用 两 行 两 列做主封面展示视频播放（也可以做 rtsp 视频流播放），还剩下 五 个做候选封面区展示，当点击封面区某个封面时进行替换主封面区视频（流）播放如何查看美股。
当鼠标移动到候选封面区时，动画从上一次鼠标的位置到当前鼠标位置做移动动画如何查看美股。
框架使用 .NET40 ；
Visual Studio 2019 ;
实现视频封面查看器 NineGridView 基于 Grid 实现 三 行 三 列，使用 两 行 两 列做主封面展示视频播放（也可以做 rtsp 视频流播放），还剩下 五 个做候选封面区展示，当点击封面区某个封面时进行替换主封面区视频（流）播放如何查看美股。
当鼠标移动到候选封面区时，动画从上一次鼠标的位置到当前鼠标位置做移动动画如何查看美股。
展开全文
1）新建 NineGridView.cs 代码如下：
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Windows;
usingSystem.Windows.Controls;
usingSystem.Windows.Input;
usingSystem.Windows.Media;
usingSystem.Windows.Media.Animation;
namespaceWPFDevelopers.Controls
publicclassNineGridView: Grid
privateint_rows = 3;
privateint_columns = 3;
privateDictionary<Rect, int> _dicRect = newDictionary<Rect, int>;
privateBorder _border;
privateStoryboard _storyboard;
privateRect _lastRect;
privateint_last;
publicstaticreadonlyDependencyProperty SelectBrushProperty =
DependencyProperty.Register( "SelectBrush", typeof(Brush), typeof(NineGridView),
newPropertyMetadata(Brushes.Red));
publicstaticreadonlyDependencyProperty BorderThicknessProperty =
DependencyProperty.Register( "BorderThickness", typeof(Thickness), typeof(NineGridView),
newPropertyMetadata( newThickness( 1)));
publicNineGridView( )
Loaded += NineGridView_Loaded;
SizeChanged += NineGridView_SizeChanged;
publicBrush SelectBrush
get=> (Brush)GetValue(SelectBrushProperty);
set=> SetValue(SelectBrushProperty, value);
publicThickness BorderThickness
get=> (Thickness)GetValue(BorderThicknessProperty);
set=> SetValue(BorderThicknessProperty, value);
privatevoidNineGridView_SizeChanged( objectsender, SizeChangedEventArgs e )
if(_border == null|| _last == 0) return;
varframeworkElement = InternalChildren[_last] asFrameworkElement;
if(frameworkElement == null) return;
_border.Width = frameworkElement.ActualWidth;
_border.Height = frameworkElement.ActualHeight;
varpoint = frameworkElement.TranslatePoint( newPoint( 0, 0), this);
CreateStoryboard(point);
privatevoidNineGridView_Loaded( objectsender, RoutedEventArgs e )
RowDefinitions.Clear;
for( inti = 0; i < _rows; i++)
varrow1 = newRowDefinition;
RowDefinitions.Add(row1);
ColumnDefinitions.Clear;
for( inti = 0; i < _columns; i++)
varcol1 = newColumnDefinition;
ColumnDefinitions.Add(col1);
UIElementCollection children = InternalChildren;
intnumCol = 0, numRow = 0;
for( inti = 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
varnum = i - 1;
varcol = GetColumnSpan(children[num]);
col = col == 1? GetColumn(children[num]) : col;
if(i + 1<= _columns)
SetColumn(child, col);
SetRow(child, numRow);
numRow++;
else
varrow = GetRowSpan(children[ 0]);
SetColumn(child, numCol);
SetRow(child, row);
numCol++;
if(_border != null)
Children.Remove(_border);
_border = newBorder
BorderThickness = BorderThickness,
BorderBrush = SelectBrush,
VerticalAlignment = VerticalAlignment.Top,
HorizontalAlignment = HorizontalAlignment.Left
_border.Name = "PART_Adorner";
_border.RenderTransform = newTranslateTransform;
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;
protectedoverridevoidOnPreviewMouseMove( MouseEventArgs e)
base.OnPreviewMouseMove(e);
varcurrentPoint = e.GetPosition( this);
if(_lastRect.Contains(currentPoint))
return;
_dicRect.Clear;
UIElementCollection children = InternalChildren;
for( inti = 0, count = children.Count; i < count; ++i)
if(i >= 6|| i == 0) continue;
varchild = children[i] asFrameworkElement;
if(child != null)
varpoint = child.TranslatePoint( newPoint( 0, 0), this);
varrect = newRect(point.X, point.Y, child.ActualWidth, child.ActualHeight);
_dicRect.Add(rect, i);
varmodel = _dicRect.Keys.FirstOrDefault(x => x.Contains(currentPoint));
if(model == default) return;
_dicRect.TryGetValue(model, out_last);
if(_border == null) return;
CreateStoryboard( newPoint(model.X, model.Y));
_border.Width = model.Width;
_border.Height = model.Height;
_lastRect = model;
voidCreateStoryboard( Point point)
varsineEase = newSineEase { EasingMode = EasingMode.EaseOut };
if(_storyboard == null)
_storyboard = newStoryboard;
else
_storyboard.Children.Clear;
varanimationX = newDoubleAnimation
Duration = TimeSpan.FromMilliseconds( 500),
To = point.X,
EasingFunction = sineEase
Storyboard.SetTargetProperty(animationX, newPropertyPath( "(Border.RenderTransform).(TranslateTransform.X)"));
_storyboard.Children.Add(animationX);
varanimationY = newDoubleAnimation
Duration = TimeSpan.FromMilliseconds( 500),
To = point.Y,
EasingFunction = sineEase
Storyboard.SetTargetProperty(animationY, newPropertyPath( "(Border.RenderTransform).(TranslateTransform.Y)"));
_storyboard.Children.Add(animationY);
_storyboard.Begin(_border);
2）新建 NineGridViewExample.xaml 代码如下：
< UserControlx:Class= "WPFDevelopers.Samples.ExampleViews.NineGridViewExample"
xmlns= ""
xmlns:x= ""
xmlns:mc= ""
xmlns:d= ""
xmlns:wpfdev= ""
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:NineGridViewBorderThickness= "1"SelectBrush= "Red">
< wpfdev:NineGridView.Resources>
< StyleTargetType= "TextBlock">
< SetterProperty= "Foreground"Value= "White"/>
< SetterProperty= "VerticalAlignment"Value= "Center"/>
< SetterProperty= "HorizontalAlignment"Value= "Center"/>
</ Style>
< StyleTargetType= "Border">
< SetterProperty= "Margin"Value= "1"/>
</ Style>
</ wpfdev:NineGridView.Resources>
< MediaElementx:Name= "MyMediaElement"Loaded= "MyMediaElement_Loaded"
MediaEnded= "MyMediaElement_MediaEnded"/>
< BorderBackground= "#282C34">
< wpfdev:SmallPanel>
< TextBlockText= "信号源1"/>
< BorderBackground= "{DynamicResource PrimaryNormalSolidColorBrush}"
VerticalAlignment= "Top"
HorizontalAlignment= "Right"
Padding= "10,4"
CornerRadius= "3">
< TextBlockText= "HD"/>
</ Border>
</ wpfdev:SmallPanel>
</ Border>
< BorderBackground= "#282C34">
< TextBlockText= "无信号"/>
</ Border>
< BorderBackground= "#282C34">
< TextBlockText= "无信号"/>
</ Border>
< BorderBackground= "#282C34">
< TextBlockText= "无信号"/>
</ Border>
< BorderBackground= "#282C34">
< TextBlockText= "无信号"/>
</ 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 代码如下：
usingSystem;
usingSystem.IO;
usingSystem.Windows;
usingSystem.Windows.Controls;
namespaceWPFDevelopers.Samples.ExampleViews
///<summary>
///NineGridViewExample.xaml 的交互逻辑
///</summary>
publicpartialclassNineGridViewExample: UserControl
publicNineGridViewExample( )
InitializeComponent;
privatevoidMyMediaElement_Loaded( objectsender, RoutedEventArgs e )
varpath = "E:\\DCLI6K5UIAEmH9R.mp4";
if(File.Exists(path))
MyMediaElement.Source = newUri( "path");
privatevoidMyMediaElement_MediaEnded( objectsender, RoutedEventArgs e )
MyMediaElement.Position = newTimeSpan( 0);
参考资料
[1]
原文链接:
评论