基于WPF实现视频封面查看器_开发_开发者

如何实现 wpF 视频封面查看器

框架使用.NET40；
Visual Studio 2019;
实现视频封面查看器NineGridView基于Grid实现三行三列，使用两行两列做主封面展示视频播放（也可以做rtsp视频流播放），还剩下五个做候选封面区展示，当点击封面区某个封面时进行替换主封面区视频（流）播放。
当鼠标移动到候选封面区时，动画从上一次鼠标的位python置到当前鼠标位置做移动动画。

基于WPF实现视频封面查看器

示例代码

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;

publicstaticreadonlyDependencyPropertySelectBrushProperty=
DependencyProperty.Register("SelectBrush",typeof(Brush),typeof(NineGridView),
newPropertyMetadata(Brushes.Red));

publicstaticreadonlyDependencyPropertyBorderThicknessProperty=
DependencyProperty.Register("BorderThickness",typeof(Thickness)android,typeof(NineGridView),
newPropertyMetadata(newThickness(1)));

publicNineGridView()
{
Loaded+=NineGridView_Loaded;
SizeChanged+=NineGridView_SizeChanged;
}

publicBrushSelectBrush
{
get=>(Brush)GetValue(SelectBrushProperty);
set=>SetValue(SelectBrushProperty,value);
}

publicThicknessBorderThickness
{
get=>(Thickness)GetValue(BorderThicknessProperty);
set=>SetValue(BorderThicknessProperty,value);
}

privatevoidNineGridView_SizeChanged(objectsender,SizeChangedEventArgse)
{
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,RoutedEventArgse)
{
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);
}
UIElementCollectionchildren=InternalChildren;

intnumCol=0,numRow=0;
for(inti=0,count=children.Count;i<count;++i)
{
if(i>6)return;
UIElementchild=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(开发者_C开发_border,_rows);
SetColumnSpan(_border,_columns);
_border.Width=ActualWidth/_columns-2;
_border.Height=ActualHeight/_rows-2;
var_translateTransform=(TranslateT编程客栈ransform)_border.RenderTransform;
_translateTransform.X=_border.Width*2+4;
Children.Add(_border);
_last=1;
}

protectedoverridevoidOnPreviewMouseMove(MouseEventArgse)
{
base.OnPreviewMouseMove(e);
varcurrentPoint=e.GetPosition(this);
if(_lastRect.Contains(currentPoint))
return;
_dicRect.Clear();
UIElementCollectionchildren=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(Pointpoint)
{
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="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:NineGridViewBorderThickness="1"SelectBrush="Red">
<wpfdev:NineGridView.Resources>
<StyleTargetType="Textblock">
<SetterProperty="Foreground"Value="Whitejs"/>
<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="{DynamicResourcePrimaryNormalSolidColorBrush}"
VerticalAlignment="Top"
HorizontalAlignment="Right"
Padding="10,4"
CornerRadius="3">
<TextBlockText="HD"/>
</Border>
</wpfdev:SmallPanel>
</Border>
&jslt;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,RoutedEventArgse)
{
varpath="E:\\DCLI6K5UIAEmH9R.mp4";
if(File.Exists(path))
MyMediaElement.Source=newUri("path");
}

privatevoidMyMediaElement_MediaEnded(objectsender,RoutedEventArgse)
{
MyMediaElement.Position=newTimeSpan(0);
}

}
}

效果图

基于WPF实现视频封面查看器