鄒珺

摘? 要：當(dāng)前很多軟件系統(tǒng)的UI界面越來越多地使用了音視頻、圖片等多媒體文件，為了讓用戶方便、有效地管理多媒體文件，多媒體管理工具能對(duì)音視頻、圖片文件進(jìn)行分類管理，能夠查詢文件，瀏覽、刪除文件列表視圖，查看文件詳細(xì)信息，實(shí)現(xiàn)自定義的定制視圖等功能。本文主要描述基于MVVM模式，使用WPF框架對(duì)多媒體管理工具進(jìn)行開發(fā)和設(shè)計(jì)，通過面包屑視圖控件實(shí)現(xiàn)視圖導(dǎo)航，結(jié)合ListBox顯示音視頻、圖片信息，實(shí)現(xiàn)多媒體管理工具的主要功能。結(jié)果表明，該工具強(qiáng)大的視覺設(shè)計(jì)特性實(shí)現(xiàn)了具有現(xiàn)代感的交互體驗(yàn)，滿足了用戶追求現(xiàn)代時(shí)尚的心理需求，也更好地實(shí)現(xiàn)了多媒體文件的有效管理。

關(guān)鍵詞：多媒體管理工具;MVVM;WPF;面包屑

中圖分類號(hào)：TP312? ? ?文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：2096-1472（2021）-09-44-04

Abstract： At present， more and more multimedia files such as audio， video and pictures are used in User Interface （UI） of many software systems. In order to make it convenient and effective for users to manage multimedia files， multimedia management tools can classify audio， video and picture files， query files， browse and delete file list views， view file details， and implement user-defined views. This paper mainly proposes to develop and design MVVM-based （Model-View-ViewModel） multimedia management tools using WPF （Windows Presentation Foundation） framework. Main functions of multimedia management tool are achieved by using breadcrumb view control to realize view navigation and ListBox to display audio， video and picture information. The results show that the powerful visual design features of the tool realize a modern interactive experience， meet the psychological needs of users in pursuit of modern fashion， and better realize effective management of multimedia files.

Keywords： multimedia management tools; MVVM; WPF; breadcrumbs

1? ?引言（Introduction）

WPF（Windows Presentation Foundation）的出現(xiàn)帶來了桌面級(jí)應(yīng)用軟件的技術(shù)革新，傳統(tǒng)的Windows Forms技術(shù)已經(jīng)有些力不從心。微軟漸漸地放棄了Windows Forms平臺(tái)上的進(jìn)一步開發(fā)，將重心轉(zhuǎn)向了WPF上面。WPF為用戶界面、2D/3D圖形文檔和媒體等提供了統(tǒng)一的描述和操作方法，不再像Windows Forms那樣基于GDI+，而是基于DirectX 9/10技術(shù)，使用WPF開發(fā)的用戶界面不僅具有漂亮的外觀，而且還可以為用戶界面應(yīng)用3D效果。現(xiàn)代軟件的UI已經(jīng)不是十年前所能比擬的了，Windows 10的軟件界面已經(jīng)達(dá)到了絢麗的標(biāo)準(zhǔn)。如果要在UI界面上添加3D、音頻或視頻等功能，會(huì)耗費(fèi)技術(shù)人員很多時(shí)間和精力，而且還達(dá)不到預(yù)期的效果，而利用WPF中的資源、樣式、模板、數(shù)據(jù)綁定等技術(shù)，能夠?qū)崿F(xiàn)具有超絢效果的音樂圖片管理工具，通過其強(qiáng)大的視覺設(shè)計(jì)特性來實(shí)現(xiàn)具有現(xiàn)代感的用戶界面[1]。

2? 多媒體管理工具概述（Overview of multimedia management tools）

多媒體管理工具的用戶界面如圖1所示。整個(gè)面板使用Grid控件分成兩行。最頂部的行放置轉(zhuǎn)場(chǎng)用的指示控件，這是一個(gè)Expander控件，可以允許用戶折疊面板，展開后會(huì)顯示系統(tǒng)內(nèi)置的四個(gè)轉(zhuǎn)場(chǎng)效果的選擇框。中間放置了一個(gè)轉(zhuǎn)場(chǎng)控件，底部用一個(gè)自定義的滾動(dòng)條控件來放置按鈕。

首次進(jìn)入該工具時(shí)，將顯示一個(gè)空白的用戶界面，用戶可以單擊標(biāo)題欄的按鈕顯示音樂列表視圖和圖片列表視圖，比如單擊圖片列表視圖按鈕后，將會(huì)在下面的面板上顯示指定文件夾中的圖片列表。用戶可以單擊其中的某幅圖片查看圖片詳細(xì)信息，如圖2所示。

音樂視圖提供了音樂專輯列表顯示，當(dāng)用戶選中某個(gè)專輯圖片時(shí)，會(huì)顯示該專輯的音樂描述信息、音樂家以及專輯的詳細(xì)信息。如圖3所示，當(dāng)選中圖片列表中的圖片時(shí)，會(huì)顯示圖片路徑、大小以及訪問日期等信息。在使用系統(tǒng)時(shí)，會(huì)看到當(dāng)切換視圖時(shí)，會(huì)具有動(dòng)態(tài)的轉(zhuǎn)場(chǎng)效果，同時(shí)在音樂專輯的封面切換到音樂信息的描述時(shí)，轉(zhuǎn)場(chǎng)特效非常動(dòng)感。面包屑控件能實(shí)現(xiàn)動(dòng)感的用戶導(dǎo)航面板[2]。

3? 面包屑視圖控件的實(shí)現(xiàn)（Implementation of breadcrumb view control）

3.1? ?面包屑管理器用戶界面的實(shí)現(xiàn)

面包屑管理器用戶控件，就是在用戶主界面下面動(dòng)感的視圖導(dǎo)航控件，該控件類似Windows 10的面包屑導(dǎo)航效果。當(dāng)開啟了多種類型的視圖控件時(shí)，會(huì)在導(dǎo)航面板上自動(dòng)顯示出視圖類型，每種類型有一個(gè)新的按鈕，并在按鈕上顯示出當(dāng)前視圖的個(gè)數(shù)[3]。當(dāng)單擊某個(gè)按鈕，會(huì)顯示視圖預(yù)覽列表框，單擊某個(gè)小預(yù)覽圖標(biāo)便會(huì)顯示其對(duì)應(yīng)的大預(yù)覽圖標(biāo)，如圖4所示。

面包屑管理服務(wù)定義在一個(gè)單獨(dú)的類庫項(xiàng)目BreakCrumbControl中，在主用戶界面上，面包屑管理器要作為一個(gè)容器，能夠管理添加的視圖控件。這些控件是實(shí)現(xiàn)了IbreadCrumbView接口的用戶控件，面包屑自身又要能夠根據(jù)這些加入的控件類型顯示按鈕讓用戶可以選擇加入的控件列表。在BreadCrumbControl中，實(shí)現(xiàn)了一個(gè)用戶控件BreadCrumbViewManager，這個(gè)控件將作為主窗體的顯示控件，顯示到主窗體Grid控件的ContentPresenter中。

BreadCrumbViewManager需要實(shí)現(xiàn)以下幾個(gè)工作：

（1）能夠被添加到其他的用戶控件或窗體的視覺樹中。

（2）用戶能夠創(chuàng)建自己的實(shí)現(xiàn)了IbreadCrumbView接口的控件，并顯示在特定容器中。

（3）當(dāng)一個(gè)新的視圖控件被添加后，確保加載的視圖控件被成功加入。

（4）確保有一個(gè)存在的控件類型可以使控件能被添加，如果存在一種類型的視圖控件，一個(gè)視圖控件將被包裝為一個(gè)WrappedIBreadCrumbView對(duì)象并被添加到一個(gè)關(guān)聯(lián)了指定類型的ObservableCollection泛型集合中;如果不存在一種類型的視圖控件，那么將新建一個(gè)新的類型加入字典中，并新建一個(gè)ObservableCollection泛型集合來包含這個(gè)WrappedIBreadCrumbView視圖[4]。

（5）管理器中的視圖在進(jìn)行切換時(shí)要具有動(dòng)畫轉(zhuǎn)場(chǎng)特效。

3.2? ?使用轉(zhuǎn)場(chǎng)控件實(shí)現(xiàn)轉(zhuǎn)場(chǎng)效果

通過使用Transitionals.dll來實(shí)現(xiàn)轉(zhuǎn)場(chǎng)特效，首先需要添加對(duì)于該程序集的引用。為了使XAML可以使用定義在其中的控件，需要在控件聲明區(qū)添加對(duì)于該程序集的引用;然后在用戶控件的資源定義區(qū)使用合并資源字典引入定義在Resources/AppStyles.xaml中的資源;最后定義一個(gè)具有三列的Grid[5]。XAML的定義代碼如下：

<！—因?yàn)橐玫睫D(zhuǎn)場(chǎng)特效，因此需要添加對(duì)于轉(zhuǎn)場(chǎng)相關(guān)控件的程序集和命名空間的引用-->

xmlns="http：//schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns：x="http：//schemas.microsoft.com/winfx/2006/xaml"

xmlns：local="clr-namespace：BreadCrumbControl"

xmlns：transitionals="clr-namespace：Transitionals;assembly=Transitionals"

xmlns：transitionalsControls="clr-namespace：

Transitionals.Controls;assembly=Transitionals"

HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

<！--定義控件級(jí)別的資源-->

<！--使用資源字典合并資源-->

<！--指定資源路徑-->

<！--定義三列布局-->

<！--中間列將用來放置用戶控件，需要具有最大顯示比例-->

3.3? ?使用滾動(dòng)列表控件FrictionScrollViewer

在Grid的第三列，使用了FrictionScrollViewer自定義控件，在滾動(dòng)條的內(nèi)部，需要定義一個(gè)區(qū)域來放置按鈕。按鈕的數(shù)量是不固定的，可以通過將FrictionScrollViewer控件的ItemsSource屬性綁定到控件視圖列表來實(shí)現(xiàn)[6]。XAML的定義代碼如下：

<！—按鈕顯示區(qū)域的滾動(dòng)條-->

Style="{StaticResource ScrollViewerStyle}">

<！--將ItemsSource綁定到泛型列表-->

<！--指定容器面板-->

<！--定義虛擬化面板顯示按鈕-->

<！--定義列表項(xiàng)的模板-->

<！--指定按鈕控件的數(shù)據(jù)模板-->

Margin="15，5，15，5" ToolTip="{Binding Value[0].BreadCrumbItem.DisplayName}">

3.4? ?定義面包屑管理器用戶控件

因?yàn)樵赬AML中使用了大量的綁定，因此在類的構(gòu)造函數(shù)中首要的工作是設(shè)置控件的DataContext屬性來指定綁定集合，代碼如下：

public partial class BreadCrumbViewManager ： UserControl

{? //默認(rèn)的轉(zhuǎn)場(chǎng)類型

private TransitionType currentTransitionType= TransitionType.FadeAndGrow;

//轉(zhuǎn)場(chǎng)效果映射集合

private Dictionary

transitionsMap=new Dictionary（）;

//控件視圖集合，實(shí)現(xiàn)觀察者模式

private new ObservableDictionary

>

crumbs=new ObservableDictionary

>（）;

public BreadCrumbViewManager（）

{? ?//指定控件的DataContext屬性

this.DataContext=crumbs;

InitializeComponent（）;

SetupTransitions（）;//初始化轉(zhuǎn)場(chǎng)

}

……//其他代碼省略

}

3.5? ?添加面包屑

在ViewModel中，ShowViewInBreadCrumbControl（）方法是最常用來顯示視圖控件的方法。該方法在內(nèi)部調(diào)用了BreadCrumbViewManager的AddCrumb（）方法[7]。該方法的代碼如下：

public void AddCrumb（IBreadCrumbView newCrumb）

{

if （newCrumb ！=null）//判斷新視圖的值

{? ?//轉(zhuǎn)換為視覺元素

Visual visual=newCrumb as Visual;

if （visual ！=null）

{? ?//指定轉(zhuǎn)場(chǎng)的內(nèi)容為新控件

transitionBox.Content=newCrumb;

//判斷視圖控件的值是否存在

if （！crumbs.ContainsKey（newCrumb.GetType（）））

{? //如果不存在，則實(shí)例化一個(gè)新的ObservableCollection

ObservableCollection localCrumbs=

New ObservableCollection

CrumbView>（）;

//將視圖控件添加到ObservableCollection集合中

localCrumbs.Add（CreateWrapper（new

Crumb））;

//將該集合加到觀察字典中

crumbs.Add（newCrumb.GetType（）， localCrumbs）;

}

else

{? //如果存在則直接加到觀察字典中

crumbs[newCrumb.GetType（）].Add

（CreateWrapper（newCrumb））;

}

}

}

}

3.6? ?移除面包屑

每個(gè)縮略圖右側(cè)都具有兩個(gè)按鈕，這兩個(gè)按鈕用來移除或查看當(dāng)前選中的視圖，移除視圖的代碼定義在RemoveCrumb_Click事件處理代碼中。其實(shí)現(xiàn)代碼如下：

private void RemoveCrumb_Click（object sender， RoutedEventArgs e）

{

try

{? //得到當(dāng)前的要移除的WrappedIBreadCrumbView

實(shí)例

WrappedIBreadCrumbView crumbToRemove=

（WrappedIBreadCrumbView）（（Button）

sender）.Tag;

//得到當(dāng)前IBreadCrumbView對(duì)象實(shí)例，位

于面板上

IBreadCrumbView currentCrumbView=

（IBreadCrumbView）transitionBox.Content;

//得到當(dāng)前要被移除的IBreadCrumbView

實(shí)例

IBreadCrumbView crumbToRemoveView=

（IBreadCrumbView）crumbToRemove.BreadCrumbItem;

//如果要移除的視圖有一些變更

if （crumbToRemoveView.IsDirty）

{? //提示是否要立即保存

if （MessageBox.Show（"要移除的視圖已經(jīng)變化，可能對(duì)設(shè)置發(fā)生了改變 " +"＼r＼n你真的想移除嗎"，"移除確認(rèn)"， MessageBoxButton.YesNo，

MessageBoxImage.Question）==MessageBoxResult.Yes）

{? ?//確定是否要移除當(dāng)前視圖

CheckForCurrentCrumbAndConfirmRemoval（crumbToRemove，currentCrumbView， crumbToRemoveView）;

}

}

else

{? //直接移除

CheckForCurrentCrumbAndConfirmRemoval（crumbToRemove，currentCrumbView， crumbToRemoveView）;

}

}

catch

{

//異常處理代碼

}

}

與刪除視圖相伴的是查看視圖，該方法的實(shí)現(xiàn)較簡(jiǎn)單。從按鈕的Tag屬性中得到WrappedIBreadCrumbView對(duì)象，然后將轉(zhuǎn)場(chǎng)對(duì)象的內(nèi)容設(shè)置為BreadCrumbItem即可。其他的轉(zhuǎn)場(chǎng)效果由transitionBox這個(gè)控件來完成[8]。

4? ?結(jié)論（Conclusion）

本文使用WPF實(shí)現(xiàn)了具有動(dòng)感效果的多媒體管理器，界面部分采用WPF技術(shù)，包括3D旋轉(zhuǎn)效果、動(dòng)感的轉(zhuǎn)場(chǎng)特效，同時(shí)結(jié)合了數(shù)據(jù)模板、樣式和資源，核心部分主要通過面包屑管理控件，將多種視圖控件添加到容器中，達(dá)到美觀的效果。最終，實(shí)現(xiàn)了對(duì)圖片、音頻、視頻等多媒體文件的系統(tǒng)化管理，使用戶有更佳的體驗(yàn)效果。

參考文獻(xiàn)（References）

[1] 李斌.基于WPF的圖片預(yù)覽控件的設(shè)計(jì)與實(shí)現(xiàn)[J].福建電腦，2018，34（5）：120-121.

[2] 侯天峰，張志偉，葛陸蔚.基于WPF的圖片瀏覽器設(shè)計(jì)與實(shí)現(xiàn)[J].微型電腦應(yīng)用，2017，33（4）：53-55.

[3] 劉珊珊，趙慶，曹豹，等.基于WPF的油藏模型三維可視化解決方案[J].西安石油大學(xué)學(xué)報(bào)（自然科學(xué)版），2021，36（1）：73-79.

[4] 尚旭明，張立成.基于WPF的三維仿真系統(tǒng)的研究與應(yīng)用[J].計(jì)算機(jī)技術(shù)與發(fā)展，2016，26（9）：39-42.

[5] 張繼梅.如何使用蒙版的技巧美化多媒體影視作品[J].電腦知識(shí)與技術(shù)，2020，16（2）：221-223.

[6] 陳廣山.基于WPF的UI設(shè)計(jì)模式研究[J].雞西大學(xué)學(xué)報(bào)，2016，16（8）：32-35.

[7] UTAMA A Z， JANG D S. Development of UML tool using WPF framework and forced-directionality graph algorithm[J]. Journal of Korea Multimedia Society， 2019， 22（6）：706-715.

[8] 霍曉鋼.數(shù)字媒體系統(tǒng)開發(fā)中基于WPF的行為的應(yīng)用[J].計(jì)算機(jī)時(shí)代，2020，38（8）：61-64.

作者簡(jiǎn)介：

鄒? ?珺（1981-），女，碩士，講師.研究領(lǐng)域：軟件開發(fā)，系統(tǒng)測(cè)試.