Export (0) Print
Expand All

Walkthrough: Building a Video Browser by Using the WPF Designer

This walkthrough shows you how to use the Windows Presentation Foundation (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.

NoteNote:

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 Visual Studio Settings.

NoteNote:

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.

You need the following components to complete this walkthrough:

  • Visual Studio 2008.

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.

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

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.

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

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.

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 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
    
    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 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 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 void PlayMovie(Uri movie)
    {
        moviePlayer.Source = movie;
        PlayMovie();
    }
    
    public void Close()
    {
        StopMovie();
        moviePlayer.Close();
    }
    
  7. Press F6 to build the control.

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.

    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.

    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.

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 Window1.xaml, and in the XAML view and replace the automatically generated code with the following code.

    <Window x:Class="VideoBrowser.Window1"
            Name="window1"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:media = "clr-namespace:MoviePlayerControlLibrary;assembly=MoviePlayerControlLibrary"
            xmlns:vb="clr-namespace:VideoBrowser"
            Title="Video Browser" Height="540" Width="383">
        <Window.Resources>
            <vb:FileToURIConverter x:Key="myConverter" />
    
            <DataTemplate x:Key="imageTemplate">
                <Border VerticalAlignment="Center" 
                  HorizontalAlignment="Center" 
                  Padding="4" Margin="2" 
                  Background="White">
                    <Image Source="{Binding Converter={StaticResource myConverter}}" />
                </Border>
            </DataTemplate>
    
            <!--<ResourceDictionary >
                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="Resources.xaml"/>
                </ResourceDictionary.MergedDictionaries>
    
                <vb:FileToURIConverter x:Key="myConverter" />
    
                <DataTemplate x:Key="imageTemplate">
                    <Border VerticalAlignment="Center" 
                  HorizontalAlignment="Center" 
                  Padding="4" Margin="2" 
                  Background="White">
                        <Image Source="{Binding Converter={StaticResource myConverter}}" />
                    </Border>
                </DataTemplate>
            </ResourceDictionary>-->
    
        </Window.Resources>
    
        <Grid Name="grid1">
            <Grid.RowDefinitions>
                <RowDefinition Height="125" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid Margin="0" Name="grid2">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="115" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Button x:Name="selectFolderButton" Click="selectFolderButton_Click">Select folder...</Button>
                <ListBox Grid.Column="1" Margin="0,0,0,0" 
                   Name="videoListBox" 
                   SelectionChanged ="videoListBox_SelectionChanged"
                   ItemTemplate="{StaticResource imageTemplate}"
                   ItemsSource="{Binding ElementName=window1, Path=Thumbnails}" />
            </Grid>
            <media:MoviePlayerControl x:Name="moviePlayer" Grid.Row="1" />
        </Grid>
    </Window>
    
    <Window x:Class="VideoBrowser.Window1"
            Name="window1"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://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 Window1.xaml.cs or Window1.xaml.vb, and in the Code Editor replace the automatically generated code with the following code.

    using System;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Navigation;
    using System.Windows.Shapes;
    using System.Windows.Data;
    using System.Windows.Media;
    using System.Windows.Input;
    
    using wfs = System.Windows.Forms;
    using Microsoft.Win32;
    
    namespace VideoBrowser
    {
        /// <summary> 
        /// Interaction logic for Window1.xaml 
        /// </summary> 
        public partial class Window1 : Window
        {
            public Window1()
            {
                InitializeComponent();
            }
    
            // The list box on the form is  
            // bound to this variable.  
            private ThumbnailList _thumbnails =
              new ThumbnailList();
    
            public ThumbnailList Thumbnails
            {
                get { return _thumbnails; }
                set { _thumbnails = value; }
            }
    
            private void videoListBox_SelectionChanged(
              object sender, SelectionChangedEventArgs e)
            {
                moviePlayer.Close();
    
                // Get the image name:
                String imageName =
                  videoListBox.SelectedItem.ToString();
    
                // Find the associated movie: 
                string movieName = System.IO.Path.
                  ChangeExtension(imageName, "wmv");
    
                // Create a new URI for the selected movie, and play it:
                moviePlayer.PlayMovie(new Uri(movieName));
            }
    
            private void selectFolderButton_Click(object sender, RoutedEventArgs e)
            {
                var folderBrowser = new wfs.FolderBrowserDialog();
                folderBrowser.RootFolder = Environment.SpecialFolder.MyComputer;
                if (folderBrowser.ShowDialog() == wfs.DialogResult.OK)
                {
                    Thumbnails.FolderName = folderBrowser.SelectedPath;
                }
            }
        }
    }
    

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.

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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://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 Window1.xaml, and comment out the following XAML after the Window1 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>
    
    <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>-->
    
    <!--<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.

Community Additions

ADD
Show:
© 2014 Microsoft