チュートリアル : WPF デザイナーでのビデオブラウザーの作成

[アーティクル]
05/27/2012

[このドキュメントはプレビューのみを目的としており、以降のリリースで変更される可能性があります。プレースホルダーとして空白のトピックが含まれています。]

このチュートリアルでは、WPF Designer for Visual Studio を使用して、ビデオファイルを閲覧するための 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』(Copyright 2007 Application Developers Training Company) に収められています。詳細については、http://www.appdev.com を参照してください。

必須コンポーネント

このチュートリアルを実行するには、次のコンポーネントが必要です。

Visual Studio 2012 RC.

プロジェクトの作成

最初に、ホストアプリケーションのプロジェクトを作成します。 MoviePlayerControl は、ビデオの再生を操作するための MediaElement やその他のコントロールが含まれている UserControl です。

プロジェクトを作成するには

VideoBrowser という名前の WPF アプリケーションプロジェクトを作成します。詳細については、「方法 : 新しい WPF アプリケーションプロジェクトを作成する」を参照してください。

WPF Designerで MainWindow.xaml が開きます。
新しい WPF ユーザーコントロールライブラリプロジェクトをソリューションに追加します。プロジェクトに "MoviePlayerControlLibrary" という名前を付けます。詳細については、「方法 : WPF UserControl ライブラリプロジェクトを作成する」を参照してください。
MoviePlayerControlLibrary プロジェクトに MoviePlayerControl という名前の新しい WPF ユーザーコントロールを追加します。詳細については、「方法 : 新しい項目を WPF プロジェクトに追加する」を参照してください。
プロジェクトから UserControl1 を削除します。

レイアウトの作成

レイアウトは、アプリケーションのメインウィンドウでのコントロールの配置を定義します。ここでは、アプリケーションのコントロールが含まれるレイアウト要素を作成する方法を示します。

レイアウトを作成するには

WPF Designerで MediaPlayerControl.xaml を開きます。
ユーザーコントロール上のルート Grid コントロールを選択します。詳細については、「方法 : デザイン画面上で要素を選択して移動する」を参照してください。
[プロパティ] ウィンドウで、ルート Grid コントロールの名前を moviePlayerGrid に設定します。 Name プロパティが [プロパティ] ウィンドウの最上部で設定されます。
moviePlayerGrid に 2 つの行を追加します。詳細については、「方法 : グリッドに行と列を追加する」を参照してください。
[ドキュメントアウトライン] ウィンドウで moviePlayerGrid の最初の行を選択し、その MinHeight プロパティを 50 に設定します。
moviePlayerGrid の 2 番目の行を選択し、その Height を 20 に設定します。
moviePlayerGrid の 3 番目の行を選択し、その Height を 55 に設定します。
ツールボックスから、Grid コントロールを moviePlayerGrid の 3 番目の行にドラッグします。

WPF Designer で、grid1 という名前の新しい Grid コントロールが作成されます。
[プロパティ] ウィンドウで、grid1 の名前を mediaControlsGrid に設定します。
mediaControlsGrid の Margin プロパティを 0 に設定します。
[プロパティ] ウィンドウで、ColumnDefinitions コレクションエディターを開き、5 列の定義を追加します。
ツールボックスから、StackPanel コントロールを mediaControlsGrid の最後の列にドラッグします。

WPF Designer で、stackPanel1 という名前の新しい StackPanel コントロールが作成されます。
[ドキュメントアウトライン] ウィンドウを開いて、レイアウトを確認します。詳細については、「WPF ドキュメントの要素階層内の移動」を参照してください。

オブジェクト階層が次のように表示されることを確認します。

Grid (moviePlayerGrid)

    **    RowDefinitions**

    **    Grid (mediaControlsGrid)**

        **        ColumnDefinitions**

        **        StackPanel (stackPanel1)**

オブジェクト階層がこのパターンと一致しない場合は、オブジェクトをドラッグするか XAML を変更してこの階層に合わせてください。

レイアウトへのコントロールの追加

レイアウトを定義したら、ここにコントロールを配置できます。ツールボックスで、配置するコントロールをクリックし、デザイン画面にドラッグします。

レイアウトにコントロールを追加するには

ツールボックスから、MediaElement コントロールを moviePlayerGrid の最初の行にドラッグします。
以下に示すように、[プロパティ] ウィンドウで、次のプロパティを設定します。

プロパティ

値

名前

moviePlayer

Margin

0

幅

Auto

高さ

Auto

HorizontalAlignment

Stretch

VerticalAlignment

Stretch

LoadedBehavior

手動
ツールボックスから、Button コントロールを mediaControlsGrid の最初の列にドラッグします。
以下に示すように、[プロパティ] ウィンドウで、次のプロパティを設定します。

プロパティ

値

名前

backButton

Content

[戻る]

Margin

0
ツールボックスから、Button コントロールを mediaControlsGrid の 2 番目の列にドラッグします。
以下に示すように、[プロパティ] ウィンドウで、次のプロパティを設定します。

プロパティ

値

名前

playButton

Content

Play

Margin

0
ツールボックスから、Button コントロールを mediaControlsGrid の 3 番目の列にドラッグします。
以下に示すように、[プロパティ] ウィンドウで、次のプロパティを設定します。

プロパティ

値

名前

stopButton

Content

[停止]

Margin

0
ツールボックスから、Button コントロールを mediaControlsGrid の 4 番目の列にドラッグします。
以下に示すように、[プロパティ] ウィンドウで、次のプロパティを設定します。

プロパティ

値

名前

forwardButton

Content

Fwd

Margin

0
ツールボックスから、TextBlock コントロールを mediaControlsGrid の 5 番目の列にドラッグします。
以下に示すように、[プロパティ] ウィンドウで、次のプロパティを設定します。

プロパティ

値

テキスト

Volume

幅

Auto

高さ

Auto

HorizontalAlignment

Center

VerticalAlignment

Stretch
ツールボックスから、Slider コントロールを mediaControlsGrid の 5 番目の列にドラッグします。
以下に示すように、[プロパティ] ウィンドウで、次のプロパティを設定します。

プロパティ

値

名前

volumeSlider

幅

Auto

高さ

Auto

最小要件

0

Maximum

1

Margin

5
ツールボックスから、Slider コントロールを moviePlayerGrid の 2 番目の行にドラッグします。
以下に示すように、[プロパティ] ウィンドウで、次のプロパティを設定します。

プロパティ

値

名前

positionSlider

幅

Auto

高さ

Auto

最小要件

0

Maximum

1

Margin

2

HorizontalAlignment

Stretch

VerticalAlignment

Stretch

プロパティ	値
名前	moviePlayer
Margin	0
幅	Auto
高さ	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
LoadedBehavior	手動

プロパティ	値
名前	backButton
Content	[戻る]
Margin	0

プロパティ	値
名前	playButton
Content	Play
Margin	0

プロパティ	値
名前	stopButton
Content	[停止]
Margin	0

プロパティ	値
名前	forwardButton
Content	Fwd
Margin	0

プロパティ	値
テキスト	Volume
幅	Auto
高さ	Auto
HorizontalAlignment	Center
VerticalAlignment	Stretch

プロパティ	値
名前	volumeSlider
幅	Auto
高さ	Auto
最小要件	0
Maximum	1
Margin	5

プロパティ	値
名前	positionSlider
幅	Auto
高さ	Auto
最小要件	0
Maximum	1
Margin	2
HorizontalAlignment	Stretch
VerticalAlignment	Stretch

イベントハンドラーの追加

アプリケーションでは、イベントを処理することによりユーザーからの入力に応答します。 MoviePlayerControl 内のコントロールで発生するイベントのイベントハンドラーを追加する手順を次に示します。詳細については、「方法 : 単純なイベントハンドラーを作成する」を参照してください。

イベントハンドラーを追加するには

XAML ビューで、<MediaElement> タグ内にカーソルを移動し、「MediaOpened=」と入力します。

Intellisense によって [<新しいイベントハンドラー>] オプションが表示されます。
[<新しいイベントハンドラー>] を選択します。

WPF Designer では、moviePlayer_MediaOpened イベントハンドラーがコードファイルに作成されます。
MediaEnded イベントについて手順 1. と手順 2. を繰り返します。
デザインビューで、positionSlider をダブルクリックします。

WPF Designer では、positionSlider_ValueChanged イベントハンドラーがコードファイルに作成されます。
デザインビューで、backButton をダブルクリックします。

WPF Designer では、backButton_Click イベントハンドラーがコードファイルに作成されます。
残りのボタンコントロールをダブルクリックして、コントローラーごとに Click イベントハンドラーを生成します。
positionSlider をダブルクリックして、ValueChanged イベントハンドラーを生成します。

MoviePlayerControl のロジックの実装

MoviePlayerControl のロジックをコードファイルに実装します。コードファイルの名前は、MoviePlayerControl.xaml.cs または MoviePlayerControl.xaml.vb です。

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 という名前のカスタムクラスにバインドされています。

データソース型を作成するには

ThumbnailList という名前の新しいクラスを VideoBrowser プロジェクトに追加します。

コードエディターで 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);
                }
            }
        }
    }
}

FileToURIConverter という名前の新しいクラスを VideoBrowser プロジェクトに追加します。

コードエディターで 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 に必要です。

MainWindow.xaml を XAML ビューで開き、自動的に生成されているコードを次のコードに置き換えます。

<Window x:Class="VideoBrowser.MainWindow"
        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>

コードエディターで MainWindow.xaml.cs または MainWindow.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 MainWindow
        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 MainWindow : Window
    {
        public MainWindow()
        {
            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 のサムネイルがリストボックスに表示されます。サムネイルの 1 つをクリックすると、それに対応する .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>

MainWindow.xaml を開き、MainWindow 要素の開始タグの後にある次の XAML をコメントにします。

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

デザインビューをクリックして、XAML をデザイン画面に読み込みます。

新しいスタイルが、デザイン画面上のコントロールに適用されます。
F5 キーを押してアプリケーションをビルドし、実行します。

参照

その他の技術情報

移行と相互運用性

WPF デザイナーでのコントロールの操作

次の方法で共有

チュートリアル : WPF デザイナーでのビデオブラウザーの作成

必須コンポーネント

プロジェクトの作成

プロジェクトを作成するには

レイアウトの作成

レイアウトを作成するには

レイアウトへのコントロールの追加

レイアウトにコントロールを追加するには

イベントハンドラーの追加

イベントハンドラーを追加するには

MoviePlayerControl のロジックの実装

MoviePlayerControl のロジックを実装するには

データソース型の作成

データソース型を作成するには

アプリケーションでのコントロールの使用

WPF コントロールを使用するには

チェックポイント

アプリケーションのスタイルの設定

アプリケーションのスタイルを設定するには

参照

その他の技術情報

その他のリソース

次の方法で共有

チュートリアル : WPF デザイナーでのビデオ ブラウザーの作成

必須コンポーネント

プロジェクトの作成

プロジェクトを作成するには

レイアウトの作成

レイアウトを作成するには

レイアウトへのコントロールの追加

レイアウトにコントロールを追加するには

イベント ハンドラーの追加

イベント ハンドラーを追加するには

MoviePlayerControl のロジックの実装

MoviePlayerControl のロジックを実装するには

データ ソース型の作成

データ ソース型を作成するには

アプリケーションでのコントロールの使用

WPF コントロールを使用するには

チェックポイント

アプリケーションのスタイルの設定

アプリケーションのスタイルを設定するには

参照

その他の技術情報

その他のリソース

チュートリアル : WPF デザイナーでのビデオブラウザーの作成

イベントハンドラーの追加

イベントハンドラーを追加するには

データソース型の作成

データソース型を作成するには