多媒體管理工具的設計與實現

鄒珺

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

關鍵詞：多媒體管理工具;MVVM;WPF;面包屑

中圖分類號：TP312? ? ?文獻標識碼：A

文章編號：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）的出現帶來了桌面級應用軟件的技術革新，傳統的Windows Forms技術已經有些力不從心。微軟漸漸地放棄了Windows Forms平臺上的進一步開發，將重心轉向了WPF上面。WPF為用戶界面、2D/3D圖形文檔和媒體等提供了統一的描述和操作方法，不再像Windows Forms那樣基于GDI+，而是基于DirectX 9/10技術，使用WPF開發的用戶界面不僅具有漂亮的外觀，而且還可以為用戶界面應用3D效果?，F代軟件的UI已經不是十年前所能比擬的了，Windows 10的軟件界面已經達到了絢麗的標準。如果要在UI界面上添加3D、音頻或視頻等功能，會耗費技術人員很多時間和精力，而且還達不到預期的效果，而利用WPF中的資源、樣式、模板、數據綁定等技術，能夠實現具有超絢效果的音樂圖片管理工具，通過其強大的視覺設計特性來實現具有現代感的用戶界面[1]。

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

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

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

音樂視圖提供了音樂專輯列表顯示，當用戶選中某個專輯圖片時，會顯示該專輯的音樂描述信息、音樂家以及專輯的詳細信息。如圖3所示，當選中圖片列表中的圖片時，會顯示圖片路徑、大小以及訪問日期等信息。在使用系統時，會看到當切換視圖時，會具有動態的轉場效果，同時在音樂專輯的封面切換到音樂信息的描述時，轉場特效非常動感。面包屑控件能實現動感的用戶導航面板[2]。

3? 面包屑視圖控件的實現（Implementation of breadcrumb view control）

3.1? ?面包屑管理器用戶界面的實現

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

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

BreadCrumbViewManager需要實現以下幾個工作：

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

（2）用戶能夠創建自己的實現了IbreadCrumbView接口的控件，并顯示在特定容器中。

（3）當一個新的視圖控件被添加后，確保加載的視圖控件被成功加入。

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

（5）管理器中的視圖在進行切換時要具有動畫轉場特效。

3.2? ?使用轉場控件實現轉場效果

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

<！—因為要用到轉場特效，因此需要添加對于轉場相關控件的程序集和命名空間的引用-->

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">

<！--定義控件級別的資源-->

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

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

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

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

3.3? ?使用滾動列表控件FrictionScrollViewer

在Grid的第三列，使用了FrictionScrollViewer自定義控件，在滾動條的內部，需要定義一個區域來放置按鈕。按鈕的數量是不固定的，可以通過將FrictionScrollViewer控件的ItemsSource屬性綁定到控件視圖列表來實現[6]。XAML的定義代碼如下：

<！—按鈕顯示區域的滾動條-->

Style="{StaticResource ScrollViewerStyle}">

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

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

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

<！--定義列表項的模板-->

<！--指定按鈕控件的數據模板-->

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

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

因為在XAML中使用了大量的綁定，因此在類的構造函數中首要的工作是設置控件的DataContext屬性來指定綁定集合，代碼如下：

public partial class BreadCrumbViewManager ： UserControl

{? //默認的轉場類型

private TransitionType currentTransitionType= TransitionType.FadeAndGrow;

//轉場效果映射集合

private Dictionary

transitionsMap=new Dictionary（）;

//控件視圖集合，實現觀察者模式

private new ObservableDictionary

>

crumbs=new ObservableDictionary

>（）;

public BreadCrumbViewManager（）

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

this.DataContext=crumbs;

InitializeComponent（）;

SetupTransitions（）;//初始化轉場

}

……//其他代碼省略

}

3.5? ?添加面包屑

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

public void AddCrumb（IBreadCrumbView newCrumb）

{

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

{? ?//轉換為視覺元素

Visual visual=newCrumb as Visual;

if （visual ！=null）

{? ?//指定轉場的內容為新控件

transitionBox.Content=newCrumb;

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

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

{? //如果不存在，則實例化一個新的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? ?移除面包屑

每個縮略圖右側都具有兩個按鈕，這兩個按鈕用來移除或查看當前選中的視圖，移除視圖的代碼定義在RemoveCrumb_Click事件處理代碼中。其實現代碼如下：

private void RemoveCrumb_Click（object sender， RoutedEventArgs e）

{

try

{? //得到當前的要移除的WrappedIBreadCrumbView

實例

WrappedIBreadCrumbView crumbToRemove=

（WrappedIBreadCrumbView）（（Button）

sender）.Tag;

//得到當前IBreadCrumbView對象實例，位

于面板上

IBreadCrumbView currentCrumbView=

（IBreadCrumbView）transitionBox.Content;

//得到當前要被移除的IBreadCrumbView

實例

IBreadCrumbView crumbToRemoveView=

（IBreadCrumbView）crumbToRemove.BreadCrumbItem;

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

if （crumbToRemoveView.IsDirty）

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

if （MessageBox.Show（"要移除的視圖已經變化，可能對設置發生了改變 " +"＼r＼n你真的想移除嗎"，"移除確認"， MessageBoxButton.YesNo，

MessageBoxImage.Question）==MessageBoxResult.Yes）

{? ?//確定是否要移除當前視圖

CheckForCurrentCrumbAndConfirmRemoval（crumbToRemove，currentCrumbView， crumbToRemoveView）;

}

}

else

{? //直接移除

CheckForCurrentCrumbAndConfirmRemoval（crumbToRemove，currentCrumbView， crumbToRemoveView）;

}

}

catch

{

//異常處理代碼

}

}

與刪除視圖相伴的是查看視圖，該方法的實現較簡單。從按鈕的Tag屬性中得到WrappedIBreadCrumbView對象，然后將轉場對象的內容設置為BreadCrumbItem即可。其他的轉場效果由transitionBox這個控件來完成[8]。

4? ?結論（Conclusion）

本文使用WPF實現了具有動感效果的多媒體管理器，界面部分采用WPF技術，包括3D旋轉效果、動感的轉場特效，同時結合了數據模板、樣式和資源，核心部分主要通過面包屑管理控件，將多種視圖控件添加到容器中，達到美觀的效果。最終，實現了對圖片、音頻、視頻等多媒體文件的系統化管理，使用戶有更佳的體驗效果。

參考文獻（References）

[1] 李斌.基于WPF的圖片預覽控件的設計與實現[J].福建電腦，2018，34（5）：120-121.

[2] 侯天峰，張志偉，葛陸蔚.基于WPF的圖片瀏覽器設計與實現[J].微型電腦應用，2017，33（4）：53-55.

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

[4] 尚旭明，張立成.基于WPF的三維仿真系統的研究與應用[J].計算機技術與發展，2016，26（9）：39-42.

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

[6] 陳廣山.基于WPF的UI設計模式研究[J].雞西大學學報，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] 霍曉鋼.數字媒體系統開發中基于WPF的行為的應用[J].計算機時代，2020，38（8）：61-64.

作者簡介：

鄒? ?珺（1981-），女，碩士，講師.研究領域：軟件開發，系統測試.