演练：使用 WPF 设计器生成视频浏览器

项目
09/04/2008

更新：2007 年 11 月

本演练演示如何使用 Visual Studio Windows Presentation Foundation (WPF) 设计器来创建用于浏览视频文件的 WPF 应用程序。

在本演练中，您将执行下列任务：

创建项目。
创建布局。
向布局添加控件。
设置与布局相关的属性。
创建数据源类型。
创建 WPF 控件。
在您的应用程序中使用该控件。
实现应用程序逻辑。
启用数据绑定。
设置应用程序的样式。

下面的插图说明您的应用程序将如何显示。

使用 WPF 设计器生成的视频浏览器

在完成后，您的应用程序将允许您在文件夹中浏览 Windows Media Player (WMV) 文件。每个 .wmv 文件都必须具有一个相应的同名 .jpg 文件。例如，bear.wmv 必须与 bear.jpg 在同一个文件夹中。

说明：
显示的对话框和菜单命令可能会与“帮助”中的描述不同，具体取决于您的当前设置或版本。若要更改设置，请在“工具”菜单上选择“导入和导出设置”。有关更多信息，请参见 Visual Studio 设置。

说明：
下面的代码是使用此源代码/示例的所有者和创建者 Application Developers Training Company 的权限重新生成的。最初的用法显示在由 Ken Getz 撰写的课件“Developing Applications for Visual Studio 2008”（开发用于 Visual Studio 2008 的应用程序）中，版权所有 2007 Application Developers Training Company。有关更多信息，请参见 http://www.appdev.com。

下面的代码是使用此源代码/示例的所有者和创建者 Application Developers Training Company 的权限重新生成的。最初的用法显示在由 Ken Getz 撰写的课件“Developing Applications for Visual Studio 2008”（开发用于 Visual Studio 2008 的应用程序）中，版权所有 2007 Application Developers Training Company。有关更多信息，请参见 http://www.appdev.com。

先决条件

您需要以下组件来完成本演练：

Visual Studio 2008。

创建项目

第一步是为宿主应用程序创建项目。MoviePlayerControl 是一个 UserControl，其中包含一个 MediaElement 和其他用来操作视频播放的控件。

创建项目

创建一个名为 VideoBrowser 的 WPF 应用程序项目。有关更多信息，请参见如何：创建新的 WPF 应用程序项目。

Window1.xaml 在 WPF 设计器中打开。
向解决方案中添加一个新的 WPF 用户控件库项目。将该项目命名为 MoviePlayerControlLibrary。有关更多信息，请参见如何：创建 WPF UserControl 库项目。
在 MoviePlayerControlLibrary 项目中，添加一个名为 MoviePlayerControl 的新 WPF 用户控件。有关更多信息，请参见如何：向 WPF 项目中添加新项。
将 UserControl1 从项目中删除。

创建布局

布局定义控件在应用程序的主窗口中的排列方式。下面的步骤演示如何构造将包含应用程序控件的布局元素。

创建布局

在 WPF 设计器中打开 MediaPlayerControl.xaml。
在用户控件上选择 Grid 根控件。有关更多信息，请参见如何：在设计图面上选择和移动元素。
在“属性”窗口中，将 Grid 根控件的名称设置为 moviePlayerGrid。Name 属性是在“属性”窗口的顶部设置的。
向 moviePlayerGrid 中再添加两行。有关更多信息，请参见如何：向网格中添加行和列。
在“文档大纲”窗口中，在 moviePlayerGrid 中选择第一行，并将该行的 MinHeight 属性设置为 50。
在 moviePlayerGrid 中选择第二行，并将该行的 Height 设置为 20。
在 moviePlayerGrid 中选择第三行，并将该行的 Height 设置为 55。
将 Grid 控件从“工具箱”拖到 moviePlayerGrid 的第三行中。

WPF 设计器会创建一个名为 grid1 的新 Grid 控件。
在“属性”窗口中，将 grid1 的名称设置为 mediaControlsGrid。
将 mediaControlsGrid 的 Margin 属性设置为 0。
在“属性”窗口中，打开 ColumnDefinitions 集合编辑器并添加五列的定义。
将 StackPanel 控件从“工具箱”拖到 mediaControlsGrid 的最后一列中。

WPF 设计器会创建一个名为 stackPanel1 的新 StackPanel 控件。
打开“文档大纲”窗口以检验布局。有关更多信息，请参见浏览 WPF 文档的元素层次结构。

请确保对象层次结构如下所示：

Grid (moviePlayerGrid)

    RowDefinitions

    Grid (mediaControlsGrid)

        ColumnDefinitions

        StackPanel (stackPanel1)

如果您的对象层次结构不遵循此模式，请拖动其中的对象或者修改该 XAML，直到获得上述层次结构。

向布局添加控件

定义了布局后，可用控件来填充布局。只需在“工具箱”中单击所需控件并将其拖到设计图面上。

向布局添加控件

将 MediaElement 控件从“工具箱”拖到 moviePlayerGrid 的第一行中。
在“属性”窗口中，如下所示设置下列属性。

属性

值

Name

moviePlayer

Margin

0

Width

Auto

Height

Auto

HorizontalAlignment

Stretch

VerticalAlignment

Stretch

LoadedBehavior

Manual
将 Button 控件从“工具箱”拖到 mediaControlsGrid 的第一列中。
在“属性”窗口中，如下所示设置下列属性。

属性

值

Name

backButton

Content

后退

Margin

0
将 Button 控件从“工具箱”拖到 mediaControlsGrid 的第二列中。
在“属性”窗口中，如下所示设置下列属性。

属性

值

Name

playButton

Content

播放

Margin

0
将 Button 控件从“工具箱”拖到 mediaControlsGrid 的第三列中。
在“属性”窗口中，如下所示设置下列属性。

属性

值

Name

stopButton

Content

停止

Margin

0
将 Button 控件从“工具箱”拖到 mediaControlsGrid 的第四列中。
在“属性”窗口中，如下所示设置下列属性。

属性

值

Name

forwardButton

Content

前进

Margin

0
将 TextBlock 控件从“工具箱”拖到 mediaControlsGrid 的第五列中。
在“属性”窗口中，如下所示设置下列属性。

属性

值

Text

音量

Width

Auto

Height

Auto

HorizontalAlignment

Center

VerticalAlignment

Stretch
将 Slider 控件从“工具箱”拖到 mediaControlsGrid 的第五列中。
在“属性”窗口中，如下所示设置下列属性。

属性

值

Name

volumeSlider

Width

Auto

Height

Auto

Minimum

0

Maximum

1

Margin

5
将 Slider 控件从“工具箱”拖到 moviePlayerGrid 的第二行中。
在“属性”窗口中，如下所示设置下列属性。

属性

值

Name

positionSlider

Width

Auto

Height

Auto

Minimum

0

Maximum

1

Margin

2

HorizontalAlignment

Stretch

VerticalAlignment

Stretch

属性	值
Name	moviePlayer
Margin	0
Width	Auto
Height	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
LoadedBehavior	Manual

属性	值
Name	backButton
Content	后退
Margin	0

属性	值
Name	playButton
Content	播放
Margin	0

属性	值
Name	stopButton
Content	停止
Margin	0

属性	值
Name	forwardButton
Content	前进
Margin	0

属性	值
Text	音量
Width	Auto
Height	Auto
HorizontalAlignment	Center
VerticalAlignment	Stretch

属性	值
Name	volumeSlider
Width	Auto
Height	Auto
Minimum	0
Maximum	1
Margin	5

属性	值
Name	positionSlider
Width	Auto
Height	Auto
Minimum	0
Maximum	1
Margin	2
HorizontalAlignment	Stretch
VerticalAlignment	Stretch

添加事件处理程序

应用程序通过处理事件来对用户输入做出响应。下面的过程演示如何为 MoviePlayerControl 中的控件所引发的事件添加事件处理程序。有关更多信息，请参见如何：创建简单的事件处理程序。

添加事件处理程序

在 XAML 视图中，将光标放在 <MediaElement> 标记中并键入 MediaOpened=。

Intellisense 提供了一个“<新建事件处理程序>”选项。
选择“<新建事件处理程序>”。

WPF 设计器会在代码文件中创建 moviePlayer_MediaOpened 事件处理程序。
对于 MediaEnded 事件重复步骤 1 和步骤 2。
在设计视图中，双击 positionSlider。

WPF 设计器会在代码文件中创建 positionSlider_ValueChanged 事件处理程序。
在设计视图中，双击 backButton。

WPF 设计器会在代码文件中创建 backButton_Click 事件处理程序。
双击其余的按钮控件以针对每个控件生成 Click 事件处理程序。
双击 positionSlider 以生成 ValueChanged 事件处理程序。

实现 MoviePlayerControl 的逻辑

在名为 MoviePlayerControl.xaml.cs 或 MoviePlayerControl.xaml.vb 的代码文件中实现 MoviePlayerControl 的逻辑。

实现 MoviePlayerControl 的逻辑

在解决方案资源管理器中，双击 MoviePlayerControl.xaml.cs 或 MoviePlayerControl.xaml.vb，以便在代码编辑器中打开该代码文件。

将下面的代码插入 MoviePlayerControl 类定义中的构造函数前面。

' Specifies whether the movie is playing.
Private playing As Boolean

' Used to update the position slider's current value.
Private timer As New System.Windows.Threading.DispatcherTimer()

// Specifies whether the movie is playing.
private bool playing;

// Used to update the position slider's current value.
private System.Windows.Threading.DispatcherTimer timer =
    new System.Windows.Threading.DispatcherTimer();

将下面的代码插入 MoviePlayerControl 类定义中的事件处理程序定义后面。

#Region "Utility Methods"

        Private Sub timer_Tick(ByVal sender As Object, ByVal e As EventArgs)

            ' The DispatcherTimer's Tick event handler runs
            ' in the UI thread, so you can work with the UI 
            ' without worrying about cross-thread issues.
            positionSlider.Value = moviePlayer.Position.TotalMilliseconds

        End Sub

        Private Sub PlayMovie()
            If Not playing Then
                ' The Play method will begin the media if it is not currently active or 
                ' resume media if it is paused. This has no effect if the media is
                ' already running.
                moviePlayer.Play()
                playButton.Content = "Pause"
                playing = True
            Else
                moviePlayer.Pause()
                playButton.Content = "Play"
                playing = False
            End If
        End Sub

        Private Sub StopMovie()

            ' The Stop method stops and resets the media to be played from
            ' the beginning.
            moviePlayer.Stop()
            moviePlayer.Position = TimeSpan.Zero
            playButton.Content = "Play"
            playing = False

        End Sub

#End Region

#region Utility Methods

void timer_Tick(object sender, EventArgs e)
{
    // The DispatcherTimer's Tick event handler runs
    // in the UI thread, so you can work with the UI 
    // without worrying about cross-thread issues.
    positionSlider.Value =
      moviePlayer.Position.TotalMilliseconds;
}

private void PlayMovie()
{
    if (!playing)
    {
        // The Play method will begin the media if it is not currently active or 
        // resume media if it is paused. This has no effect if the media is
        // already running.
        moviePlayer.Play();
        playButton.Content = "Pause";
        playing = true;
    }
    else
    {
        moviePlayer.Pause();
        playButton.Content = "Play";
        playing = false;
    }
}

private void StopMovie()
{
    // The Stop method stops and resets the media to be played from
    // the beginning.
    moviePlayer.Stop();
    moviePlayer.Position = TimeSpan.Zero;
    playButton.Content = "Play";
    playing = false;
}

#endregion

用下面的代码替换自动生成的事件处理程序。

Private Sub moviePlayer_MediaOpened(ByVal sender As Object, ByVal e As RoutedEventArgs)

    ' Put code here that runs when the media
    ' is first opened.
    ' Set the media's starting Volume to the current 
    ' value of the slider control.
    moviePlayer.Volume = System.Convert.ToDouble(volumeSlider.Value)
    positionSlider.Maximum = moviePlayer.NaturalDuration.TimeSpan.TotalMilliseconds

    ' Update the position slider every second.
    timer.Interval = New TimeSpan(0, 0, 1)
    timer.Start()

End Sub

Private Sub moviePlayer_MediaEnded(ByVal sender As Object, ByVal e As RoutedEventArgs)
    ' Media playback is finished. 
    ' Stop the media to seek to media start.
    StopMovie()
    timer.Stop()

End Sub

Private Sub positionSlider_ValueChanged(ByVal sender As Object, ByVal e As RoutedPropertyChangedEventArgs(Of Double))

    ' Create a TimeSpan with milliseconds equal to the slider value.
    Dim ts As New TimeSpan(0, 0, 0, 0, Fix(positionSlider.Value))
    moviePlayer.Position = ts

    ' Jump back 5 seconds:
    moviePlayer.Position = moviePlayer.Position.Subtract(New TimeSpan(0, 0, 0, 0, 5000))

    positionSlider.Value = moviePlayer.Position.TotalMilliseconds
End Sub

Private Sub backButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    ' Jump back 5 seconds:
    moviePlayer.Position = _
      moviePlayer.Position.Subtract(New TimeSpan(0, 0, 0, 0, 5000))

    positionSlider.Value = _
        moviePlayer.Position.TotalMilliseconds
End Sub

Private Sub playButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    PlayMovie()
End Sub

Private Sub stopButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    StopMovie()
End Sub

Private Sub forwardButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    ' Jump ahead 5 seconds:
    moviePlayer.Position = moviePlayer.Position.Add(New TimeSpan(0, 0, 0, 0, 5000))

    positionSlider.Value = moviePlayer.Position.TotalMilliseconds
End Sub

Private Sub volumeSlider_ValueChanged(ByVal sender As Object, ByVal e As RoutedPropertyChangedEventArgs(Of Double))

    moviePlayer.Volume = System.Convert.ToDouble(volumeSlider.Value)
End Sub

private void moviePlayer_MediaOpened(object sender, RoutedEventArgs e)
{
    // Put code here that runs when the media
    // is first opened.

    // Set the media's starting Volume to the current 
    // value of the slider control.
    moviePlayer.Volume = (double)volumeSlider.Value;
    positionSlider.Maximum =
      moviePlayer.NaturalDuration.TimeSpan.TotalMilliseconds;

    // Update the position slider every second.
    timer.Interval = new TimeSpan(0, 0, 1);
    timer.Start();
}

private void moviePlayer_MediaEnded(object sender, RoutedEventArgs e)
{
    // Media playback is finished. 
    // Stop the media to seek to media start.
    StopMovie();
    timer.Stop();
}

private void positionSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    // Create a TimeSpan with milliseconds equal to the slider value.
    TimeSpan ts = new TimeSpan(
      0, 0, 0, 0, (int)positionSlider.Value);
    moviePlayer.Position = ts;
}

private void backButton_Click(object sender, RoutedEventArgs e)
{
    // Jump back 5 seconds:
    moviePlayer.Position =
      moviePlayer.Position.Subtract(new TimeSpan(0, 0, 0, 0, 5000));

    positionSlider.Value =
        moviePlayer.Position.TotalMilliseconds;
}

private void playButton_Click(object sender, RoutedEventArgs e)
{
    PlayMovie();
}

private void stopButton_Click(object sender, RoutedEventArgs e)
{
    StopMovie();
}

private void forwardButton_Click(object sender, RoutedEventArgs e)
{
    // Jump ahead 5 seconds:
    moviePlayer.Position =
      moviePlayer.Position.Add(new TimeSpan(0, 0, 0, 0, 5000));

    positionSlider.Value =
      moviePlayer.Position.TotalMilliseconds;
}

private void volumeSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    moviePlayer.Volume = (double)volumeSlider.Value;
}

用下面的代码替换自动生成的构造函数。

Public Sub New()
    InitializeComponent()

    ' Initialize the timer's Tick event handler:
    AddHandler timer.Tick, AddressOf timer_Tick

End Sub

public MoviePlayerControl()
{
    InitializeComponent();

    // Initialize the timer's Tick event handler:
    timer.Tick += new EventHandler(timer_Tick);
}

插入下面的方法以定义控件的公共接口。

Public Sub PlayMovie(ByVal movie As Uri)
    moviePlayer.Source = movie
    PlayMovie()

End Sub

Public Sub Close()
    StopMovie()
    moviePlayer.Close()

End Sub

public void PlayMovie(Uri movie)
{
    moviePlayer.Source = movie;
    PlayMovie();
}

public void Close()
{
    StopMovie();
    moviePlayer.Close();
}

按 F6 生成控件。

创建数据源类型

可以使用数据绑定来将控件绑定到数据。对于该应用程序，视频浏览器的 ListBox 控件绑定到名为 ThumbnailList 的自定义类。

创建数据源类型

向 VideoBrowser 项目中添加一个名为 ThumbnailList 的新类。

在代码编辑器中打开 ThumbnailList.cs 或 ThumbnailList.vb，并用下面的代码替换自动生成的代码。

Imports System
Imports System.Collections.Generic
Imports System.Text
Imports System.IO
Imports System.Collections.ObjectModel
Imports System.ComponentModel
Imports System.Windows.Media.Imaging
Imports System.Collections.Specialized
Imports System.Windows.Controls

Public Class ThumbnailList
    Inherits ObservableCollection(Of String)

    ' Can't set the path in the constructor, 
    ' because the main form uses static binding to 
    ' bind to an instance of this class, which gets
    ' created before the form (and therefore, before 
    ' you've specified a folder). If you create a new 
    ' instance of this class when you supply the path
    ' name, the static binding is now binding to the original
    ' (empty) collection. Therefore, this code must
    ' allow you to modify the folder for the existing
    ' instance of this class.
    Private _folderName As String '

    Public Property FolderName() As String 
        Get
            Return _folderName
        End Get

        Set
            _folderName = value

            ' Now fill in the collection of 
            ' file names:
            Me.Clear()
            Dim fileName As String
            For Each fileName In  Directory.GetFiles(Me.FolderName, "*.jpg")
                Me.Add(fileName)
            Next fileName
        End Set
    End Property
End Class

using System;
using System.Collections.Generic;
using System.Text;
using System.IO;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Windows.Media.Imaging;
using System.Collections.Specialized;
using System.Windows.Controls;

namespace VideoBrowser
{
    public class ThumbnailList : ObservableCollection<String>
    {
        // Can't set the path in the constructor, 
        // because the main form uses static binding to 
        // bind to an instance of this class, which gets
        // created before the form (and therefore, before 
        // you've specified a folder). If you create a new 
        // instance of this class when you supply the path
        // name, the static binding is now binding to the original
        // (empty) collection. Therefore, this code must
        // allow you to modify the folder for the existing
        // instance of this class.
        String _folderName;

        public string FolderName
        {
            get
            {
                return _folderName;
            }

            set
            {
                _folderName = value;

                // Now fill in the collection of 
                // file names:
                this.Clear();
                foreach (string fileName in
                  Directory.GetFiles(this.FolderName, "*.jpg"))
                {
                    this.Add(fileName);
                }
            }
        }
    }
}

向 VideoBrowser 项目中添加一个名为 FileToURIConverter 的新类。

在代码编辑器中打开 FileToURIConverter.cs 或 FileToURIConverter.vb，并用下面的代码替换自动生成的代码。

Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text
Imports System.Windows.Data
Imports System.Windows.Media.Imaging

Namespace VideoBrowser

    Class FileToURIConverter
        Implements IValueConverter

        Public Function Convert( _
            ByVal value As Object, _
            ByVal targetType As Type, _
            ByVal parameter As Object, _
            ByVal culture As System.Globalization.CultureInfo) As Object _
            Implements IValueConverter.Convert

            ' In design mode, value is not a string, so it is 
            ' important to check input parameters.
            If CType(value, String) IsNot Nothing Then
                ' Convert from the image name to a BitmapFrame
                ' for display in the list.
                Return BitmapFrame.Create(New Uri(value.ToString()))
            Else
                Return Nothing
            End If

        End Function


        Public Function ConvertBack( _
            ByVal value As Object, _
            ByVal targetType As Type, _
            ByVal parameter As Object, _
            ByVal culture As System.Globalization.CultureInfo) As Object _
            Implements IValueConverter.ConvertBack

            Throw New NotImplementedException()

        End Function
    End Class
End Namespace

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Data;
using System.Windows.Media.Imaging;
using System.ComponentModel;

namespace VideoBrowser
{
    class FileToURIConverter : IValueConverter
    {
        public object Convert(
            object value, 
            Type targetType, 
            object parameter, 
            System.Globalization.CultureInfo culture)
        {
            // In design mode, value is not a string, so it is 
            // important to check input parameters.
            if (value is string)
            {
                // Convert from the image name to a BitmapFrame
                // for display in the list.
                return BitmapFrame.Create(new Uri(value.ToString()));
            }
            else
            {
                return null;
            }
        }

        public object ConvertBack(
            object value, 
            Type targetType, 
            object parameter, 
            System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

保存所有的文件。

在您的应用程序中使用该控件

在创建了该控件之后，就可以在您的应用程序中使用它了。

使用 WPF 控件

在解决方案资源管理器中的 VideoBrowser 项目中，添加对 MoviePlayerControlLibrary 项目的引用。有关更多信息，请参见项目引用。
添加对 System.Windows.Forms 程序集的引用。这是 FolderBrowserDialog 所必需的。

打开 Window1.xaml，并在 XAML 视图中用下面的代码替换自动生成的代码。

<Window x:Class="VideoBrowser.Window1"
        Name="window1"
        xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:media = "clr-namespace:MoviePlayerControlLibrary;assembly=MoviePlayerControlLibrary"
        xmlns:vb="clr-namespace:VideoBrowser"
        Title="Video Browser" Height="540" Width="383">
    <Window.Resources>
        <vb:FileToURIConverter x:Key="myConverter" />

        <DataTemplate x:Key="imageTemplate">
            <Border VerticalAlignment="Center" 
              HorizontalAlignment="Center" 
              Padding="4" Margin="2" 
              Background="White">
                <Image Source="{Binding Converter={StaticResource myConverter}}" />
            </Border>
        </DataTemplate>

        <!--<ResourceDictionary >
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources.xaml"/>
            </ResourceDictionary.MergedDictionaries>

            <vb:FileToURIConverter x:Key="myConverter" />

            <DataTemplate x:Key="imageTemplate">
                <Border VerticalAlignment="Center" 
              HorizontalAlignment="Center" 
              Padding="4" Margin="2" 
              Background="White">
                    <Image Source="{Binding Converter={StaticResource myConverter}}" />
                </Border>
            </DataTemplate>
        </ResourceDictionary>-->

    </Window.Resources>

    <Grid Name="grid1">
        <Grid.RowDefinitions>
            <RowDefinition Height="125" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid Margin="0" Name="grid2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="115" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Button x:Name="selectFolderButton" Click="selectFolderButton_Click">Select folder...</Button>
            <ListBox Grid.Column="1" Margin="0,0,0,0" 
               Name="videoListBox" 
               SelectionChanged ="videoListBox_SelectionChanged"
               ItemTemplate="{StaticResource imageTemplate}"
               ItemsSource="{Binding ElementName=window1, Path=Thumbnails}" />
        </Grid>
        <media:MoviePlayerControl x:Name="moviePlayer" Grid.Row="1" />
    </Grid>
</Window>

<Window x:Class="VideoBrowser.Window1"
        Name="window1"
        xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:media = "clr-namespace:MoviePlayerControlLibrary;assembly=MoviePlayerControlLibrary"
        xmlns:vb="clr-namespace:VideoBrowser"
        Title="Video Browser" Height="540" Width="383">
    <Window.Resources>

        <vb:FileToURIConverter x:Key="myConverter" />

        <DataTemplate x:Key="imageTemplate">
            <Border VerticalAlignment="Center" 
              HorizontalAlignment="Center" 
              Padding="4" Margin="2" 
              Background="White">
                <Image Source="{Binding Converter={StaticResource myConverter}}" />
            </Border>
        </DataTemplate>

        <!--<ResourceDictionary >
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources.xaml"/>
            </ResourceDictionary.MergedDictionaries>

            <vb:FileToURIConverter x:Key="myConverter" />

            <DataTemplate x:Key="imageTemplate">
                <Border VerticalAlignment="Center" 
              HorizontalAlignment="Center" 
              Padding="4" Margin="2" 
              Background="White">
                    <Image Source="{Binding Converter={StaticResource myConverter}}" />
                </Border>
            </DataTemplate>
        </ResourceDictionary>-->



    </Window.Resources>



    <Grid Name="grid1">
        <Grid.RowDefinitions>
            <RowDefinition Height="125" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid Margin="0" Name="grid2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="115" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Button x:Name="selectFolderButton" Click="selectFolderButton_Click">Select folder...</Button>
            <ListBox Grid.Column="1" Margin="0,0,0,0" 
               Name="videoListBox" 
               SelectionChanged ="videoListBox_SelectionChanged"
               ItemTemplate="{StaticResource imageTemplate}"
               ItemsSource="{Binding ElementName=window1, Path=Thumbnails}" />
        </Grid>
        <media:MoviePlayerControl x:Name="moviePlayer" Grid.Row="1" />
    </Grid>
</Window>

打开名为 Window1.xaml.cs 或 Window1.xaml.vb 的代码文件，并在代码编辑器中用下面的代码替换自动生成的代码。

Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Documents
Imports System.Windows.Navigation
Imports System.Windows.Shapes
Imports System.Windows.Data
Imports System.Windows.Media
Imports System.Windows.Input

Imports wfs = System.Windows.Forms
Imports Microsoft.Win32

Namespace VideoBrowser

    Class Window1
        Inherits Window

        Public Sub New()
            InitializeComponent()
        End Sub

        ' The list box on the form is 
        ' bound to this variable. 
        Private _thumbnails As New ThumbnailList()

        Public Property Thumbnails() As ThumbnailList
            Get
                Return _thumbnails
            End Get
            Set(ByVal value As ThumbnailList)
                _thumbnails = value
            End Set
        End Property

        Private Sub videoListBox_SelectionChanged( _
            ByVal sender As Object, _
            ByVal e As SelectionChangedEventArgs)

            moviePlayer.Close()

            ' Get the image name:
            Dim imageName As String = videoListBox.SelectedItem.ToString()

            ' Find the associated movie:
            Dim movieName As String = System.IO.Path.ChangeExtension(imageName, "wmv")

            ' Create a new URI for the selected movie, and play it:
            moviePlayer.PlayMovie(New Uri(movieName))

        End Sub


        Private Sub selectFolderButton_Click( _
            ByVal sender As Object, _
            ByVal e As RoutedEventArgs)

            Dim folderBrowser = New wfs.FolderBrowserDialog()
            folderBrowser.RootFolder = Environment.SpecialFolder.MyComputer
            If folderBrowser.ShowDialog() = wfs.DialogResult.OK Then
                Thumbnails.FolderName = folderBrowser.SelectedPath
            End If

        End Sub
    End Class
End Namespace

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Data;
using System.Windows.Media;
using System.Windows.Input;

using wfs = System.Windows.Forms;
using Microsoft.Win32;

namespace VideoBrowser
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }

        // The list box on the form is 
        // bound to this variable. 
        private ThumbnailList _thumbnails =
          new ThumbnailList();

        public ThumbnailList Thumbnails
        {
            get { return _thumbnails; }
            set { _thumbnails = value; }
        }

        private void videoListBox_SelectionChanged(
          object sender, SelectionChangedEventArgs e)
        {
            moviePlayer.Close();

            // Get the image name:
            String imageName =
              videoListBox.SelectedItem.ToString();

            // Find the associated movie:
            string movieName = System.IO.Path.
              ChangeExtension(imageName, "wmv");

            // Create a new URI for the selected movie, and play it:
            moviePlayer.PlayMovie(new Uri(movieName));
        }

        private void selectFolderButton_Click(object sender, RoutedEventArgs e)
        {
            var folderBrowser = new wfs.FolderBrowserDialog();
            folderBrowser.RootFolder = Environment.SpecialFolder.MyComputer;
            if (folderBrowser.ShowDialog() == wfs.DialogResult.OK)
            {
                Thumbnails.FolderName = folderBrowser.SelectedPath;
            }
        }
    }
}

检查点

现在可以生成并运行应用程序。按“选择文件夹...”按钮并定位到包含 .wmv 及其相应 .jpg 文件的文件夹。在选择了该文件夹之后，.jpg 缩略图将显示在列表框中。单击其中的一个缩略图，其相应的 .wmv 文件将开始在 MediaElement 中播放。

设置应用程序的样式

VideoBrowser 应用程序是用默认样式呈现的。可以通过创建并应用样式来更改应用程序的外观和行为。样式通常存储在一个单独的资源文件中。

设置应用程序的样式

在解决方案资源管理器中，向 VideoBrowser 项目中添加一个新的资源字典。有关更多信息，请参见演练：管理 WPF 项目中的资源。

用下面的 XAML 替换自动生成的 XAML。

    <ResourceDictionary xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">

    <!-- Listbox Style -->
    <Style  TargetType="{x:Type ListBox}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBox}" >
                    <Border 
              BorderBrush="Gray" 
              BorderThickness="1" 
              CornerRadius="6" 
              Background="{DynamicResource ListBoxGradient}" >
                        <ScrollViewer 
                VerticalScrollBarVisibility="Disabled" 
                HorizontalScrollBarVisibility="Auto">
                            <StackPanel  
                  IsItemsHost="True" 
                  Orientation="Horizontal" 
                  HorizontalAlignment="Left" />
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- Gradients -->
    <LinearGradientBrush x:Key="ListBoxGradient" StartPoint="0,0" EndPoint="0,1">
        <LinearGradientBrush.GradientStops>
            <GradientStop Color="#90000000" Offset="0" />
            <GradientStop Color="#40000000" Offset="0.005" />
            <GradientStop Color="#10000000" Offset="0.04" />
            <GradientStop Color="#20000000" Offset="0.945" />
            <GradientStop Color="#60FFFFFF" Offset="1" />
        </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="VerticalScrollGradient" StartPoint="0,0" EndPoint="1,0">
        <LinearGradientBrush.GradientStops>
            <GradientStop Color="#FDB6CADF" Offset="0" />
            <GradientStop Color="#FCC3C5FF" Offset="0.1" />
            <GradientStop Color="#FCC4D0EF" Offset="0.3" />
            <GradientStop Color="#FDB7C2DF" Offset="0.6" />
            <GradientStop Color="#FE95B3CF" Offset="0.8" />
            <GradientStop Color="#FE96AACF" Offset="1" />
        </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="WindowGradient" StartPoint="0,0.3" EndPoint="1,0">
        <LinearGradientBrush.GradientStops>
            <GradientStop Color="#B2B6CAFF" Offset="0" />
            <GradientStop Color="#BFC3D5FF" Offset="0.1" />
            <GradientStop Color="#E0E4F0FF" Offset="0.3" />
            <GradientStop Color="#E6EAF5FF" Offset="0.5" />
            <GradientStop Color="#CFD7E2FF" Offset="0.6" />
            <GradientStop Color="#BFC5D3FF" Offset="0.8" />
            <GradientStop Color="#C4CBD8FF" Offset="1" />
        </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>

    <!-- PHOTOLIST STORYBOARDS -->

    <Style TargetType="{x:Type ListBoxItem}">
        <Setter Property="MaxHeight" Value="100" />
        <Setter Property="MinHeight" Value="100" />
        <Setter Property="Opacity" Value=".75" />
        <Style.Triggers>
            <EventTrigger RoutedEvent="Mouse.MouseEnter">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation 
                  Duration="0:0:0.2" 
                  Storyboard.TargetProperty="MaxHeight" 
                  To="110" />
                            <DoubleAnimation 
                  Duration="0:0:0.2" 
                  Storyboard.TargetProperty="Opacity"
                  To="1.0" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>

            <EventTrigger RoutedEvent="Mouse.MouseLeave">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation 
                  Duration="0:0:1" 
                  Storyboard.TargetProperty="MaxHeight" />
                            <DoubleAnimation 
                  Duration="0:0:0.2" 
                  Storyboard.TargetProperty="Opacity" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Style.Triggers>
    </Style>

    <!-- SCROLLBAR TEMPLATES -->

    <Style x:Key="Scrollbar_LineButton" TargetType="{x:Type RepeatButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Border 
              BorderBrush="Transparent" 
              BorderThickness="1" 
              CornerRadius="6" 
              Background="{DynamicResource ButtonGradient}">
                        <ContentPresenter x:Name="ContentSite" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="MinHeight" Value="12" />
        <Setter Property="MinWidth" Value="12" />
        <Setter Property="Foreground" Value="Gray" />
        <Setter Property="FontSize" Value="6pt" />
        <Setter Property="FontWeight" Value="Bold" />
        <Setter Property="FontFamily" Value="Lucida Sans" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="HorizontalAlignment" Value="Center" />
    </Style>

    <Style x:Key="ScrollBar_TrackRepeater"  TargetType="{x:Type RepeatButton}">
        <Setter Property="IsTabStop" Value="false" />
        <Setter Property="Focusable" Value="false" />
        <Setter Property="Command" Value="ScrollBar.PageUpCommand" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Rectangle Fill="Transparent" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ScrollBar_UpTrack" BasedOn="{StaticResource ScrollBar_TrackRepeater}" TargetType="{x:Type RepeatButton}">
        <Setter Property="Command" Value="ScrollBar.PageUpCommand" />
    </Style>

    <Style x:Key="ScrollBar_DownTrack" BasedOn="{StaticResource ScrollBar_TrackRepeater}" TargetType="{x:Type RepeatButton}">
        <Setter Property="Command" Value="ScrollBar.PageDownCommand" />
    </Style>

    <Style x:Key="ScrollBar_LeftTrack" BasedOn="{StaticResource ScrollBar_TrackRepeater}" TargetType="{x:Type RepeatButton}">
        <Setter Property="Command" Value="ScrollBar.PageLeftCommand" />
    </Style>

    <Style x:Key="ScrollBar_RightTrack" BasedOn="{StaticResource ScrollBar_TrackRepeater}" TargetType="{x:Type RepeatButton}">
        <Setter Property="Command" Value="ScrollBar.PageRightCommand" />
    </Style>

    <Style x:Key="ScrollBar_VerticalThumb" TargetType="{x:Type Thumb}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Border CornerRadius="6" 
              BorderBrush="Transparent"     
              BorderThickness="1" 
              Background="{DynamicResource VerticalScrollGradient}" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="MinHeight" Value="10" />
        <Setter Property="MinWidth" Value="10" />
    </Style>

    <Style x:Key="ScrollBar_HorizontalThumb" TargetType="{x:Type Thumb}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Border CornerRadius="6" 
              BorderBrush="Transparent"     
              BorderThickness="1" 
              Background="{DynamicResource ButtonGradient}" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="MinHeight" Value="10" />
        <Setter Property="MinWidth" Value="10" />
    </Style>

    <Style TargetType="{x:Type ScrollBar}">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="MinWidth" Value="10" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollBar}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="10"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="10" />
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="10" />
                        </Grid.RowDefinitions>
                        <Border Grid.Row="1" BorderThickness="0" Background="Transparent" CornerRadius="4"/>
                        <RepeatButton Grid.Row="0" Style="{DynamicResource Scrollbar_LineButton}" Command="ScrollBar.LineUpCommand" Content=" ^" />
                        <Track Grid.Row="1" Name="PART_Track"  IsDirectionReversed="True">
                            <Track.IncreaseRepeatButton>
                                <RepeatButton Style="{DynamicResource ScrollBar_DownTrack}"/>
                            </Track.IncreaseRepeatButton>
                            <Track.DecreaseRepeatButton>
                                <RepeatButton Style="{DynamicResource ScrollBar_UpTrack}"/>
                            </Track.DecreaseRepeatButton>
                            <Track.Thumb>
                                <Thumb Style="{DynamicResource ScrollBar_VerticalThumb}"/>
                            </Track.Thumb>
                        </Track>
                        <RepeatButton Grid.Row="2" Style="{DynamicResource Scrollbar_LineButton}" Command="ScrollBar.LineDownCommand" Content=" v" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Horizontal" >
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="MinHeight" Value="10" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ScrollBar}">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="12"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="12" />
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="12" />
                                </Grid.ColumnDefinitions>
                                <Border Grid.Column="1" BorderThickness="0" Background="Transparent" CornerRadius="4"/>
                                <RepeatButton Grid.Column="0" Style="{DynamicResource Scrollbar_LineButton}" Command="ScrollBar.LineLeftCommand" Content=" &lt;" />
                                <Track Grid.Column="1" Name="PART_Track">
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton Style="{DynamicResource ScrollBar_RightTrack}"/>
                                    </Track.IncreaseRepeatButton>
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton Style="{DynamicResource ScrollBar_LeftTrack}"/>
                                    </Track.DecreaseRepeatButton>
                                    <Track.Thumb>
                                        <Thumb Style="{DynamicResource ScrollBar_HorizontalThumb}"/>
                                    </Track.Thumb>
                                </Track>
                                <RepeatButton Grid.Column="2" Style="{DynamicResource Scrollbar_LineButton}" Command="ScrollBar.LineRightCommand" Content=" &gt;" />

                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

    <Style TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Viewbox x:Name="view" ClipToBounds="False" Stretch="Fill" Width="{TemplateBinding Property=Width}" Height="{TemplateBinding Property=Height}">
                        <Canvas Width="100" Height ="50" Margin="2">
                            <Rectangle x:Name="up" Canvas.Top="0"  RadiusX="25" RadiusY="25" Width="100" Height="50" Stroke="Black" StrokeThickness="1">
                                <Rectangle.Fill>
                                    <LinearGradientBrush>
                                        <LinearGradientBrush.GradientStops>
                                            <GradientStop Offset="0" Color="#F53" />
                                            <GradientStop Offset="1" Color="#FAA" />
                                        </LinearGradientBrush.GradientStops>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <Rectangle x:Name="down" Visibility="Collapsed" Canvas.Top="0"  RadiusX="25" RadiusY="25" Width="100" Height="50" Stroke="Black" StrokeThickness="1">
                                <Rectangle.Fill>
                                    <LinearGradientBrush>
                                        <LinearGradientBrush.GradientStops>
                                            <GradientStop Offset="0" Color="#D88" />
                                            <GradientStop Offset="1" Color="#D31" />
                                        </LinearGradientBrush.GradientStops>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <Rectangle x:Name="highlight" Canvas.Left="10" Canvas.Top="5" RadiusX="10" RadiusY="10" Width="80" Height="20" StrokeThickness="0">
                                <Rectangle.Fill>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <LinearGradientBrush.GradientStops>
                                            <GradientStop Offset="0" Color="#FFFF" />
                                            <GradientStop Offset="1" Color="#0FFF" />
                                        </LinearGradientBrush.GradientStops>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <Grid Width="100" Height="50">
                                <ContentPresenter
                    VerticalAlignment="{TemplateBinding Property=VerticalContentAlignment}"
                    HorizontalAlignment="{TemplateBinding Property=HorizontalContentAlignment}"
                    Content="{TemplateBinding Property=ContentControl.Content}"/>
                            </Grid>
                        </Canvas>
                    </Viewbox>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Button.IsMouseOver" Value="true">
                            <Setter Property = "Foreground" Value="White"/>
                        </Trigger>
                        <Trigger Property="Button.IsPressed" Value="true">
                            <Setter TargetName="up" Property="Visibility" Value="Collapsed"/>
                            <Setter TargetName="down" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="highlight" Property="Visibility" Value="Collapsed"/>
                            <Setter Property = "Foreground" Value="Black"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

    <ResourceDictionary xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">

    <!-- Listbox Style -->
    <Style  TargetType="{x:Type ListBox}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBox}" >
                    <Border 
              BorderBrush="Gray" 
              BorderThickness="1" 
              CornerRadius="6" 
              Background="{DynamicResource ListBoxGradient}" >
                        <ScrollViewer 
                VerticalScrollBarVisibility="Disabled" 
                HorizontalScrollBarVisibility="Auto">
                            <StackPanel  
                  IsItemsHost="True" 
                  Orientation="Horizontal" 
                  HorizontalAlignment="Left" />
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- Gradients -->
    <LinearGradientBrush x:Key="ListBoxGradient" StartPoint="0,0" EndPoint="0,1">
        <LinearGradientBrush.GradientStops>
            <GradientStop Color="#90000000" Offset="0" />
            <GradientStop Color="#40000000" Offset="0.005" />
            <GradientStop Color="#10000000" Offset="0.04" />
            <GradientStop Color="#20000000" Offset="0.945" />
            <GradientStop Color="#60FFFFFF" Offset="1" />
        </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="VerticalScrollGradient" StartPoint="0,0" EndPoint="1,0">
        <LinearGradientBrush.GradientStops>
            <GradientStop Color="#FDB6CADF" Offset="0" />
            <GradientStop Color="#FCC3C5FF" Offset="0.1" />
            <GradientStop Color="#FCC4D0EF" Offset="0.3" />
            <GradientStop Color="#FDB7C2DF" Offset="0.6" />
            <GradientStop Color="#FE95B3CF" Offset="0.8" />
            <GradientStop Color="#FE96AACF" Offset="1" />
        </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="WindowGradient" StartPoint="0,0.3" EndPoint="1,0">
        <LinearGradientBrush.GradientStops>
            <GradientStop Color="#B2B6CAFF" Offset="0" />
            <GradientStop Color="#BFC3D5FF" Offset="0.1" />
            <GradientStop Color="#E0E4F0FF" Offset="0.3" />
            <GradientStop Color="#E6EAF5FF" Offset="0.5" />
            <GradientStop Color="#CFD7E2FF" Offset="0.6" />
            <GradientStop Color="#BFC5D3FF" Offset="0.8" />
            <GradientStop Color="#C4CBD8FF" Offset="1" />
        </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>

    <!-- PHOTOLIST STORYBOARDS -->

    <Style TargetType="{x:Type ListBoxItem}">
        <Setter Property="MaxHeight" Value="100" />
        <Setter Property="MinHeight" Value="100" />
        <Setter Property="Opacity" Value=".75" />
        <Style.Triggers>
            <EventTrigger RoutedEvent="Mouse.MouseEnter">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation 
                  Duration="0:0:0.2" 
                  Storyboard.TargetProperty="MaxHeight" 
                  To="110" />
                            <DoubleAnimation 
                  Duration="0:0:0.2" 
                  Storyboard.TargetProperty="Opacity"
                  To="1.0" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>

            <EventTrigger RoutedEvent="Mouse.MouseLeave">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation 
                  Duration="0:0:1" 
                  Storyboard.TargetProperty="MaxHeight" />
                            <DoubleAnimation 
                  Duration="0:0:0.2" 
                  Storyboard.TargetProperty="Opacity" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Style.Triggers>
    </Style>

    <!-- SCROLLBAR TEMPLATES -->

    <Style x:Key="Scrollbar_LineButton" TargetType="{x:Type RepeatButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Border 
              BorderBrush="Transparent" 
              BorderThickness="1" 
              CornerRadius="6" 
              Background="{DynamicResource ButtonGradient}">
                        <ContentPresenter x:Name="ContentSite" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="MinHeight" Value="12" />
        <Setter Property="MinWidth" Value="12" />
        <Setter Property="Foreground" Value="Gray" />
        <Setter Property="FontSize" Value="6pt" />
        <Setter Property="FontWeight" Value="Bold" />
        <Setter Property="FontFamily" Value="Lucida Sans" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="HorizontalAlignment" Value="Center" />
    </Style>

    <Style x:Key="ScrollBar_TrackRepeater"  TargetType="{x:Type RepeatButton}">
        <Setter Property="IsTabStop" Value="false" />
        <Setter Property="Focusable" Value="false" />
        <Setter Property="Command" Value="ScrollBar.PageUpCommand" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Rectangle Fill="Transparent" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ScrollBar_UpTrack" BasedOn="{StaticResource ScrollBar_TrackRepeater}" TargetType="{x:Type RepeatButton}">
        <Setter Property="Command" Value="ScrollBar.PageUpCommand" />
    </Style>

    <Style x:Key="ScrollBar_DownTrack" BasedOn="{StaticResource ScrollBar_TrackRepeater}" TargetType="{x:Type RepeatButton}">
        <Setter Property="Command" Value="ScrollBar.PageDownCommand" />
    </Style>

    <Style x:Key="ScrollBar_LeftTrack" BasedOn="{StaticResource ScrollBar_TrackRepeater}" TargetType="{x:Type RepeatButton}">
        <Setter Property="Command" Value="ScrollBar.PageLeftCommand" />
    </Style>

    <Style x:Key="ScrollBar_RightTrack" BasedOn="{StaticResource ScrollBar_TrackRepeater}" TargetType="{x:Type RepeatButton}">
        <Setter Property="Command" Value="ScrollBar.PageRightCommand" />
    </Style>

    <Style x:Key="ScrollBar_VerticalThumb" TargetType="{x:Type Thumb}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Border CornerRadius="6" 
              BorderBrush="Transparent"     
              BorderThickness="1" 
              Background="{DynamicResource VerticalScrollGradient}" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="MinHeight" Value="10" />
        <Setter Property="MinWidth" Value="10" />
    </Style>

    <Style x:Key="ScrollBar_HorizontalThumb" TargetType="{x:Type Thumb}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Border CornerRadius="6" 
              BorderBrush="Transparent"     
              BorderThickness="1" 
              Background="{DynamicResource ButtonGradient}" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="MinHeight" Value="10" />
        <Setter Property="MinWidth" Value="10" />
    </Style>

    <Style TargetType="{x:Type ScrollBar}">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="MinWidth" Value="10" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollBar}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="10"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="10" />
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="10" />
                        </Grid.RowDefinitions>
                        <Border Grid.Row="1" BorderThickness="0" Background="Transparent" CornerRadius="4"/>
                        <RepeatButton Grid.Row="0" Style="{DynamicResource Scrollbar_LineButton}" Command="ScrollBar.LineUpCommand" Content=" ^" />
                        <Track Grid.Row="1" Name="PART_Track"  IsDirectionReversed="True">
                            <Track.IncreaseRepeatButton>
                                <RepeatButton Style="{DynamicResource ScrollBar_DownTrack}"/>
                            </Track.IncreaseRepeatButton>
                            <Track.DecreaseRepeatButton>
                                <RepeatButton Style="{DynamicResource ScrollBar_UpTrack}"/>
                            </Track.DecreaseRepeatButton>
                            <Track.Thumb>
                                <Thumb Style="{DynamicResource ScrollBar_VerticalThumb}"/>
                            </Track.Thumb>
                        </Track>
                        <RepeatButton Grid.Row="2" Style="{DynamicResource Scrollbar_LineButton}" Command="ScrollBar.LineDownCommand" Content=" v" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Horizontal" >
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="MinHeight" Value="10" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ScrollBar}">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="12"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="12" />
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="12" />
                                </Grid.ColumnDefinitions>
                                <Border Grid.Column="1" BorderThickness="0" Background="Transparent" CornerRadius="4"/>
                                <RepeatButton Grid.Column="0" Style="{DynamicResource Scrollbar_LineButton}" Command="ScrollBar.LineLeftCommand" Content=" &lt;" />
                                <Track Grid.Column="1" Name="PART_Track">
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton Style="{DynamicResource ScrollBar_RightTrack}"/>
                                    </Track.IncreaseRepeatButton>
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton Style="{DynamicResource ScrollBar_LeftTrack}"/>
                                    </Track.DecreaseRepeatButton>
                                    <Track.Thumb>
                                        <Thumb Style="{DynamicResource ScrollBar_HorizontalThumb}"/>
                                    </Track.Thumb>
                                </Track>
                                <RepeatButton Grid.Column="2" Style="{DynamicResource Scrollbar_LineButton}" Command="ScrollBar.LineRightCommand" Content=" &gt;" />

                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

    <Style TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Viewbox x:Name="view" ClipToBounds="False" Stretch="Fill" Width="{TemplateBinding Property=Width}" Height="{TemplateBinding Property=Height}">
                        <Canvas Width="100" Height ="50" Margin="2">
                            <Rectangle x:Name="up" Canvas.Top="0"  RadiusX="25" RadiusY="25" Width="100" Height="50" Stroke="Black" StrokeThickness="1">
                                <Rectangle.Fill>
                                    <LinearGradientBrush>
                                        <LinearGradientBrush.GradientStops>
                                            <GradientStop Offset="0" Color="#F53" />
                                            <GradientStop Offset="1" Color="#FAA" />
                                        </LinearGradientBrush.GradientStops>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <Rectangle x:Name="down" Visibility="Collapsed" Canvas.Top="0"  RadiusX="25" RadiusY="25" Width="100" Height="50" Stroke="Black" StrokeThickness="1">
                                <Rectangle.Fill>
                                    <LinearGradientBrush>
                                        <LinearGradientBrush.GradientStops>
                                            <GradientStop Offset="0" Color="#D88" />
                                            <GradientStop Offset="1" Color="#D31" />
                                        </LinearGradientBrush.GradientStops>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <Rectangle x:Name="highlight" Canvas.Left="10" Canvas.Top="5" RadiusX="10" RadiusY="10" Width="80" Height="20" StrokeThickness="0">
                                <Rectangle.Fill>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <LinearGradientBrush.GradientStops>
                                            <GradientStop Offset="0" Color="#FFFF" />
                                            <GradientStop Offset="1" Color="#0FFF" />
                                        </LinearGradientBrush.GradientStops>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <Grid Width="100" Height="50">
                                <ContentPresenter
                    VerticalAlignment="{TemplateBinding Property=VerticalContentAlignment}"
                    HorizontalAlignment="{TemplateBinding Property=HorizontalContentAlignment}"
                    Content="{TemplateBinding Property=ContentControl.Content}"/>
                            </Grid>
                        </Canvas>
                    </Viewbox>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Button.IsMouseOver" Value="true">
                            <Setter Property = "Foreground" Value="White"/>
                        </Trigger>
                        <Trigger Property="Button.IsPressed" Value="true">
                            <Setter TargetName="up" Property="Visibility" Value="Collapsed"/>
                            <Setter TargetName="down" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="highlight" Property="Visibility" Value="Collapsed"/>
                            <Setter Property = "Foreground" Value="Black"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

打开 Window1.xaml，并注释掉下面的 XAML，该 XAML 位于 Window1 元素的开始标记后面。

<vb:FileToURIConverter x:Key="myConverter" />

<DataTemplate x:Key="imageTemplate">
    <Border VerticalAlignment="Center" 
      HorizontalAlignment="Center" 
      Padding="4" Margin="2" 
      Background="White">
        <Image Source="{Binding Converter={StaticResource myConverter}}" />
    </Border>
</DataTemplate>

<vb:FileToURIConverter x:Key="myConverter" />

<DataTemplate x:Key="imageTemplate">
    <Border VerticalAlignment="Center" 
      HorizontalAlignment="Center" 
      Padding="4" Margin="2" 
      Background="White">
        <Image Source="{Binding Converter={StaticResource myConverter}}" />
    </Border>
</DataTemplate>

取消对以下 XAML 的注释。

<!--<ResourceDictionary >
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="Resources.xaml"/>
    </ResourceDictionary.MergedDictionaries>

    <vb:FileToURIConverter x:Key="myConverter" />

    <DataTemplate x:Key="imageTemplate">
        <Border VerticalAlignment="Center" 
      HorizontalAlignment="Center" 
      Padding="4" Margin="2" 
      Background="White">
            <Image Source="{Binding Converter={StaticResource myConverter}}" />
        </Border>
    </DataTemplate>
</ResourceDictionary>-->

<!--<ResourceDictionary >
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="Resources.xaml"/>
    </ResourceDictionary.MergedDictionaries>

    <vb:FileToURIConverter x:Key="myConverter" />

    <DataTemplate x:Key="imageTemplate">
        <Border VerticalAlignment="Center" 
      HorizontalAlignment="Center" 
      Padding="4" Margin="2" 
      Background="White">
            <Image Source="{Binding Converter={StaticResource myConverter}}" />
        </Border>
    </DataTemplate>
</ResourceDictionary>-->

在设计视图中单击，以便将该 XAML 加载到设计图面上。

新样式将应用于设计图面上的控件。
按 F5 生成并运行应用程序。

请参见

其他资源

迁移和互操作性

使用 WPF 设计器中的控件