Walkthrough: Building a Video Browser by Using the WPF Designer

This walkthrough shows you how to use the WPF Designer for Visual Studio to create a WPF application for browsing video files.

In this walkthrough, you perform the following tasks:

  • Create the project.

  • Create the layout.

  • Add controls to the layout.

  • Set layout-related properties.

  • Create a data source type.

  • Create the WPF control.

  • Use the control in your application.

  • Implement the application logic.

  • Enable data binding.

  • Style the application.

The following illustration shows how your application will appear.

Video Browser built with the WPF Designer

When you are finished, you will have an application which lets you browse a folder for Windows Media Player (WMV) files. Each .wmv file must have a corresponding .jpg file with the same name. For example, bear.wmv must have bear.jpg in the same folder.

Note

The dialog boxes and menu commands you see might differ from those described in Help depending on your active settings or edition. To change your settings, choose Import and Export Settings on the Tools menu. For more information, see Working with Settings.

Note

The following is reproduced with permission of Application Developers Training Company, owner and creator of this source code/example. The original use is shown in the courseware "Developing Applications for Visual Studio 2008" by Ken Getz, Copyright 2007 Application Developers Training Company. For more information, see http://www.appdev.com.

Prerequisites

You need the following components to complete this walkthrough:

  • Visual Studio 2010.

Creating the Project

The first step is to create the project for the host application. The MoviePlayerControl is a UserControl which contains a MediaElement and other controls for manipulating video playback.

To create the project

  1. Create a WPF Application project named VideoBrowser. For more information, see How to: Create a New WPF Application Project.

    MainWindow.xaml opens in the WPF Designer.

  2. Add a new WPF User Control Library project to the solution. Name the project MoviePlayerControlLibrary. For more information, see How to: Create a WPF UserControl Library Project.

  3. In the MoviePlayerControlLibrary project, add a new WPF user control named MoviePlayerControl. For more information, see How to: Add New Items to a WPF Project.

  4. Delete UserControl1 from the project.

Creating the Layout

The layout defines how controls are arranged in your application's main window. The following steps show how to construct layout elements which will contain the application's controls.

To create the layout

  1. Open MediaPlayerControl.xaml in the WPF Designer.

  2. Select the root Grid control on the user control. For more information, see How to: Select and Move Elements on the Design Surface.

  3. In the Properties window, set the name of the root Grid control to moviePlayerGrid. The Name property is set at the top of the Properties window.

  4. Add a two more rows to moviePlayerGrid. For more information, see How to: Add Rows and Columns to a Grid.

  5. In the Document Outline window, select the first row in moviePlayerGrid and set its MinHeight property to 50.

  6. Select the second row in moviePlayerGrid and set its Height to 20.

  7. Select the third row in moviePlayerGrid and set its Height to 55.

  8. From the Toolbox, drag a Grid control into the third row of moviePlayerGrid.

    The WPF Designer creates a new Grid control named grid1.

  9. In the Properties window, set the name of grid1 to mediaControlsGrid.

  10. Set the Margin property of mediaControlsGrid to 0.

  11. In the Properties window, open the ColumnDefinitions collection editor and add five column definitions.

  12. From the Toolbox, drag a StackPanel control into the last column of mediaControlsGrid.

    The WPF Designer creates a new StackPanel control named stackPanel1.

  13. Open the Document Outline window to verify the layout. For more information, see Navigating the Element Hierarchy of a WPF Document.

    Ensure that the object hierarchy appears as follows:

    Grid (moviePlayerGrid)

        RowDefinitions

        Grid (mediaControlsGrid)

            ColumnDefinitions

            StackPanel (stackPanel1)

    If your object hierarchy does not follow this pattern, drag the objects or modify the XAML until you get this hierarchy.

Adding Controls to the Layout

With the layout defined, you can populate it with controls. Just click on the control you want in the Toolbox and drag it onto the design surface.

To add controls to the layout

  1. From the Toolbox, drag a MediaElement control into the first row of moviePlayerGrid.

  2. In the Properties window, set the following properties as shown.

    Property

    Value

    Name

    moviePlayer

    Margin

    0

    Width

    Auto

    Height

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    LoadedBehavior

    Manual

  3. From the Toolbox, drag a Button control into the first column of mediaControlsGrid.

  4. In the Properties window, set the following properties as shown.

    Property

    Value

    Name

    backButton

    Content

    Back

    Margin

    0

  5. From the Toolbox, drag a Button control into the second column of mediaControlsGrid.

  6. In the Properties window, set the following properties as shown.

    Property

    Value

    Name

    playButton

    Content

    Play

    Margin

    0

  7. From the Toolbox, drag a Button control into the third column of mediaControlsGrid.

  8. In the Properties window, set the following properties as shown.

    Property

    Value

    Name

    stopButton

    Content

    Stop

    Margin

    0

  9. From the Toolbox, drag a Button control into the fourth column of mediaControlsGrid.

  10. In the Properties window, set the following properties as shown.

    Property

    Value

    Name

    forwardButton

    Content

    Fwd

    Margin

    0

  11. From the Toolbox, drag a TextBlock control into the fifth column of mediaControlsGrid.

  12. In the Properties window, set the following properties as shown.

    Property

    Value

    Text

    Volume

    Width

    Auto

    Height

    Auto

    HorizontalAlignment

    Center

    VerticalAlignment

    Stretch

  13. From the Toolbox, drag a Slider control into the fifth column of mediaControlsGrid.

  14. In the Properties window, set the following properties as shown.

    Property

    Value

    Name

    volumeSlider

    Width

    Auto

    Height

    Auto

    Minimum

    0

    Maximum

    1

    Margin

    5

  15. From the Toolbox, drag a Slider control into the second row of moviePlayerGrid.

  16. In the Properties window, set the following properties as shown.

    Property

    Value

    Name

    positionSlider

    Width

    Auto

    Height

    Auto

    Minimum

    0

    Maximum

    1

    Margin

    2

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

Adding Event Handlers

Your application responds to user input by handling events. The following procedure shows how to add event handlers for events that are raised by controls in the MoviePlayerControl. For more information, see How to: Create a Simple Event Handler.

To add event handlers

  1. In XAML view, place the cursor within the <MediaElement> tag and type MediaOpened=.

    Intellisense presents the <New Event Handler> option.

  2. Select <New Event Handler>.

    The WPF Designer creates the moviePlayer_MediaOpened event handler in the code file. 

  3. Repeat steps 1 and 2 for the MediaEnded event.

  4. In Design view, double-click on positionSlider.

    The WPF Designer creates the positionSlider_ValueChanged event handler in the code file.

  5. In Design view, double-click on backButton.

    The WPF Designer creates the backButton_Click event handler in the code file.

  6. Double click on the remaining button controls to generate Click event handlers for each.

  7. Double click on positionSlider to generate the ValueChanged event handler.

Implementing Logic for the MoviePlayerControl

Implement the logic for MoviePlayerControl in the code file, which is named MoviePlayerControl.xaml.cs or MoviePlayerControl.xaml.vb.

To implement logic for MoviePlayerControl

  1. In Solution Explorer, double-click MoviePlayerControl.xaml.cs or MoviePlayerControl.xaml.vb to open the code file in the Code Editor.

  2. Insert the following code into the MoviePlayerControl class definition, before the constructor.

    ' 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();
    
  3. Insert the following code into the MoviePlayerControl class definition, after the event handler definitions.

    #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
    
    
  4. Replace the automatically generated event handlers with the following code.

            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;
    }
    
  5. Replace the automatically generated constructor with the following code.

    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);
    }
    
  6. Insert the following methods to define the control's public interface.

    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();
    }
    
  7. Press F6 to build the control.

Creating a Data Source Type

You connect your controls to data by using data binding. For this application, the video browser's ListBox control is bound to a custom class named ThumbnailList.

To create a data source type

  1. Add a new class named ThumbnailList to the VideoBrowser project.

  2. Open ThumbnailList.cs or ThumbnailList.vb in the Code Editor, and replace the automatically generated code with the following code.

    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);
                    }
                }
            }
        }
    }
    
  3. Add a new class named FileToURIConverter to the VideoBrowser project.

  4. Open FileToURIConverter.cs or FileToURIConverter.vb in the Code Editor, and replace the automatically generated code with the following code.

    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();
            }
        }
    }
    
  5. Save all files.

Using the Control in Your Application

After you have created the control, you can use it in your application.

To use the WPF control

  1. In the VideoBrowser project of Solution Explorer, add a reference to the MoviePlayerControlLibrary project. For more information, see Project References.

  2. Add a reference to the System.Windows.Forms assembly. This is required for the FolderBrowserDialog.

  3. Open MainWindow.xaml, and in the XAML view and replace the automatically generated code with the following code.

    <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>
    
  4. Open the code file named MainWindow.xaml.cs or MainWindow.xaml.vb, and in the Code Editor replace the automatically generated code with the following code.

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

Checkpoint

You can now build and run the application. Press the Select Folder... button and navigate to a folder that contains .wmv and corresponding .jpg files. When you have selected the folder, the .jpg thumbnails display in the list box. Click one of the thumbnails, and the corresponding .wmv file begins playing in the MediaElement.

Styling the Application

The VideoBrowser application is rendered with the default styling. You can change the appearance and behavior of your application by creating and applying styles. Styles are often stored in a separate resource file.

To style the application

  1. In Solution Explorer, add a new resource dictionary to the VideoBrowser project. For more information, see Walkthrough: Managing Resources in Your WPF Project.

  2. Replace the automatically generated XAML with the following 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>
    
  3. Open MainWindow.xaml, and comment out the following XAML after the MainWindow element's opening tag.

    <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>
    
  4. Uncomment the following 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>-->
    
  5. Click in Design view to load the XAML to the design surface.

    The new styles are applied to the controls on the design surface.

  6. Press F5 to build and run the application.

See Also

Other Resources

Migration and Interoperability

Working with Controls in the WPF Designer