Tutorial: Crear un explorador de vídeo mediante WPF Designer
En este tutorial se muestra cómo utilizar WPF Designer for Visual Studio para crear una aplicación WPF para examinar archivos de vídeo.
En este tutorial realizará las siguientes tareas:
Crear el proyecto.
Crear el diseño.
Agregar controles al diseño.
Establecer las propiedades relacionadas con el diseño.
Elegir un tipo de origen de datos.
Crear el control de WPF.
Utilizar el control en la aplicación.
Implementar la lógica de la aplicación.
Habilitar el enlace de datos.
Aplicar estilo a la aplicación.
En la ilustración siguiente se muestra la apariencia que tendrá la aplicación.
.png "Explorador de vídeo generado con WPF Designer")
Cuando haya terminado, tendrá una aplicación que le permitirá examinar una carpeta de archivos del Reproductor de Windows Media (WMV). Cada archivo .wmv debe tener un archivo .jpg correspondiente con el mismo nombre. Por ejemplo, el archivo oso.wmv debe tener un archivo oso.jpg en la misma carpeta.
Nota
Los cuadros de diálogo y comandos de menú que se ven pueden diferir de los descritos en la Ayuda, en función de los valores de configuración o de edición activos. Para cambiar la configuración, elija la opción Importar y exportar configuraciones del menú Herramientas. Para obtener más información, vea Trabajar con valores de configuración.
Nota
A continuación, se reproduce con permiso de Application Developers Training Company, propietaria y creadora de este código fuente/ejemplo. El uso original se muestra en el curso "Developing Applications for Visual Studio 2008" de Ken Getz, Copyright 2007 Application Developers Training Company. Para obtener más información, consulte http://www.appdev.com.
Requisitos previos
Necesita los componentes siguientes para completar este tutorial:
- Visual Studio 2010.
Creación del proyecto
El primer paso es crear el proyecto para la aplicación host. MoviePlayerControl es un objeto UserControl que contiene MediaElement y otros controles para manipular la reproducción de vídeo.
Para crear el proyecto
Cree un proyecto de aplicación WPF denominado VideoBrowser. Para obtener más información, vea Cómo: Crear un nuevo proyecto de aplicación de WPF.
MainWindow.xaml se abrirá en WPF Designer.
Agregue un proyecto de biblioteca de controles de usuario de WPF a la solución. Asigne al proyecto el nombre MoviePlayerControlLibrary. Para obtener más información, vea Cómo: Crear un proyecto de biblioteca de controles de usuario de WPF.
En el proyecto MoviePlayerControlLibrary , agregue un nuevo proyecto de biblioteca de controles de usuario de WPF denominado MoviePlayerControl. Para obtener más información, vea Cómo: Agregar nuevos elementos a un proyecto de WPF.
Elimine del proyecto UserControl1.
Crear el diseño
El diseño define cómo se organizan los controles en la ventana principal de la aplicación. En los pasos siguientes se muestra cómo construir los elementos de diseño que contendrán los controles de la aplicación.
Para crear el diseño
Abra MediaPlayerControl.xaml en WPF Designer.
Seleccione el control Grid raíz en el control de usuario. Para obtener más información, vea Cómo: Seleccionar y mover elementos en la superficie de diseño.
En la ventana Propiedades, establezca el nombre del control raíz Grid en moviePlayerGrid. La propiedad Name se establece en la parte superior de la ventana Propiedades.
Agregue dos filas más a moviePlayerGrid. Para obtener más información, vea Cómo: Agregar filas y columnas a una cuadrícula.
En la ventana Esquema del documento, seleccione la primera fila de moviePlayerGrid y establezca su propiedad MinHeight en 50.
Seleccione la segunda fila de moviePlayerGrid y establezca su propiedad Height en 20.
Seleccione la tercera fila de moviePlayerGrid y establezca su propiedad Height en 55.
En el Cuadro de herramientas, arrastre un control Grid a la tercera fila de moviePlayerGrid.
WPF Designer crea un nuevo control Grid denominado grid1.
En la ventana Propiedades, establezca el nombre de grid1 en mediaControlsGrid.
Establezca la propiedad Margin de mediaControlsGrid en 0.
En la ventana Propiedades, abra el editor de la colección ColumnDefinitions y agregue cinco definiciones de columna.
Desde el Cuadro de herramientas, arrastre un control StackPanel hasta la última columna de mediaControlsGrid.
WPF Designer crea un nuevo control StackPanel denominado stackPanel1.
Abra la ventana Esquema del documento para comprobar el diseño. Para obtener más información, vea Navegar en la jerarquía de elementos de un documento de WPF.
Asegúrese de que la jerarquía de objetos es la siguiente:
Grid (moviePlayerGrid)
RowDefinitions
Grid (mediaControlsGrid)
ColumnDefinitions
StackPanel (stackPanel1)
Si la jerarquía de objetos no sigue este modelo, arrastre los objetos o modifique el XAML hasta que obtenga esta jerarquía.
Agregar controles al diseño
Una vez definido el diseño, puede rellenarlo con controles. Basta con hacer clic en el control deseado en el Cuadro de herramientas y arrastrarlo hasta la superficie de diseño.
Para agregar controles al diseño
En el Cuadro de herramientas, arrastre un control MediaElement a la primera fila de moviePlayerGrid.
En la ventana Propiedades, establezca las siguientes propiedades tal y como se indica.
Propiedad
Valor
Name
moviePlayer
Margin
0
Width
Auto
Height
Auto
HorizontalAlignment
Stretch
VerticalAlignment
Stretch
LoadedBehavior
Manual
Desde el Cuadro de herramientas, arrastre un control Button hasta la primera columna de mediaControlsGrid.
En la ventana Propiedades, establezca las siguientes propiedades tal y como se indica.
Propiedad
Valor
Name
backButton
Content
Atrás
Margin
0
Desde el Cuadro de herramientas, arrastre un control Button hasta la segunda columna de mediaControlsGrid.
En la ventana Propiedades, establezca las siguientes propiedades tal y como se indica.
Propiedad
Valor
Name
playButton
Content
Play
Margin
0
Desde el Cuadro de herramientas, arrastre un control Button hasta la tercera columna de mediaControlsGrid.
En la ventana Propiedades, establezca las siguientes propiedades tal y como se indica.
Propiedad
Valor
Name
stopButton
Content
Stop
Margin
0
Desde el Cuadro de herramientas, arrastre un control Button hasta la cuarta columna de mediaControlsGrid.
En la ventana Propiedades, establezca las siguientes propiedades tal y como se indica.
Propiedad
Valor
Name
forwardButton
Content
Fwd
Margin
0
En el Cuadro de herramientas, arrastre un control TextBlock hasta la quinta columna de mediaControlsGrid.
En la ventana Propiedades, establezca las siguientes propiedades tal y como se indica.
Propiedad
Valor
Text
Volume
Width
Auto
Height
Auto
HorizontalAlignment
Center
VerticalAlignment
Stretch
En el Cuadro de herramientas, arrastre un control Slider hasta la quinta columna de mediaControlsGrid.
En la ventana Propiedades, establezca las siguientes propiedades tal y como se indica.
Propiedad
Valor
Name
volumeSlider
Width
Auto
Height
Auto
Minimum
0
Maximum
1
Margin
5
En el Cuadro de herramientas, arrastre un control Slider a la segunda fila de moviePlayerGrid.
En la ventana Propiedades, establezca las siguientes propiedades tal y como se indica.
Propiedad
Valor
Name
positionSlider
Width
Auto
Height
Auto
Minimum
0
Maximum
1
Margin
2
HorizontalAlignment
Stretch
VerticalAlignment
Stretch
Agregar controladores de eventos.
La aplicación responde a los datos proporcionados por el usuario mediante el control de los eventos. En el siguiente procedimiento se muestra cómo agregar controladores de eventos para eventos que generan los controles en MoviePlayerControl. Para obtener más información, vea Cómo: Crear controladores de eventos simples.
Para agregar controladores de eventos
En la vista XAML, coloque el cursor dentro de la etiqueta <MediaElement> y escriba MediaOpened=.
Intellisense presenta la opción <Nuevo controlador de eventos>.
Seleccione <Nuevo controlador de eventos>.
WPF Designer crea el controlador de eventos moviePlayer_MediaOpened en el archivo de código.
Repita los pasos 1 y 2 para el evento MediaEnded.
En la Vista de diseño, haga doble clic en positionSlider.
WPF Designer crea el controlador de eventos positionSlider_ValueChanged en el archivo de código.
En la Vista de diseño, haga doble clic en backButton.
WPF Designer crea el controlador de eventos backButton_Click en el archivo de código.
Haga doble clic en el resto de los controles de botón para generar los controladores de eventos Click para cada uno.
Haga doble clic en positionSlider para generar el controlador de eventos ValueChanged.
Implementar la lógica para MoviePlayerControl
Implemente la lógica para MoviePlayerControl en los archivos de código denominados MoviePlayerControl.xaml.cs o MoviePlayerControl.xaml.vb.
Para implementar la lógica para MoviePlayerControl
En el Explorador de soluciones, haga doble clic en MoviePlayerControl.xaml.cs o en MoviePlayerControl.xaml.vb para abrir el archivo de código en el editor de código.
Inserte el código siguiente en la definición de la clase MoviePlayerControl, delante del 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();Inserte el código siguiente en la definición de clase MoviePlayerControl, detrás de las definiciones de controladores de eventos.
#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; } #endregionReemplace los controladores de eventos generados automáticamente por el código siguiente.
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 Subprivate 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; }Reemplace el constructor generado automáticamente por el código siguiente.
Public Sub New() InitializeComponent() ' Initialize the timer's Tick event handler: AddHandler timer.Tick, AddressOf timer_Tick End Subpublic MoviePlayerControl() { InitializeComponent(); // Initialize the timer's Tick event handler: timer.Tick += new EventHandler(timer_Tick); }Inserte los siguientes métodos para definir la interfaz pública del control.
Public Sub PlayMovie(ByVal movie As Uri) moviePlayer.Source = movie PlayMovie() End Sub Public Sub Close() StopMovie() moviePlayer.Close() End Subpublic void PlayMovie(Uri movie) { moviePlayer.Source = movie; PlayMovie(); } public void Close() { StopMovie(); moviePlayer.Close(); }Presione F6 generar el control.
Crear un tipo de origen de datos
Los controles se conectan a los datos mediante el enlace de datos. Para esta aplicación, el control ListBox del explorador del vídeo se enlaza a una clase personalizada denominada ThumbnailList.
Para crear un tipo de origen de datos
Agregue al proyecto VideoBrowser una clase nueva denominada ThumbnailList.
Abra ThumbnailList.cs o ThumbnailList.vb en el editor de código y reemplace el código generado automáticamente por el código siguiente.
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 Classusing 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); } } } } }Agregue al proyecto VideoBrowser una nueva clase denominada FileToURIConverter.
Abra FileToURIConverter.cs o FileToURIConverter.vb en el editor de código y reemplace el código generado automáticamente por el código siguiente.
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 Namespaceusing 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(); } } }Guarde todos los archivos.
Utilizar el control en la aplicación
Después de haber creado el control, puede utilizarlo en la aplicación.
Para utilizar el control de WPF
En el proyecto VideoBrowser del Explorador de soluciones, agregue una referencia al proyecto MoviePlayerControlLibrary. Para obtener más información, vea Referencias del proyecto.
Agregue una referencia al ensamblado System.Windows.Forms. Se requiere para FolderBrowserDialog.
Abra MainWindow.xaml y, en la vista XAML, reemplace el código generado automáticamente por el código siguiente.
<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>Abra el archivo de código denominado MainWindow.xaml.cs o MainWindow.xaml.vb y, en el editor de código, reemplace el código generado automáticamente por el código siguiente.
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 Namespaceusing 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; } } } }
Punto de control
Ahora ya puede generar y ejecutar la aplicación. Presione el botón Seleccionar carpeta y navegue hasta una carpeta que contenga los archivos .wmv y los archivos .jpg correspondientes. Cuando haya seleccionado la carpeta, en el cuadro de lista se mostrarán las vistas en miniatura de los archivos .jpg. Haga clic en una de las miniaturas y el archivo .wmv correspondiente empezará a sonar en MediaElement.
Aplicar estilos a la aplicación
La aplicación VideoBrowser se representa con el estilo predeterminado. Puede cambiar el aspecto de la aplicación y su comportamiento creando y aplicando estilos. Los estilos suelen almacenarse en un archivo de recursos independiente.
Para aplicar estilo a la aplicación
En Explorador de soluciones, agregue un nuevo diccionario de recursos al proyecto VideoBrowser. Para obtener más información, vea Tutorial: Administrar recursos en proyectos de WPF.
Reemplace el XAML generado automáticamente por el siguiente 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=" <" /> <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=" >" /> </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=" <" /> <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=" >" /> </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>Abra MainWindow.xaml y marque como comentario el siguiente XAML después de la etiqueta de apertura del elemento MainWindow.
<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>Quite los comentarios del siguiente 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>-->Haga clic en la Vista de diseño para cargar el XAML en la superficie de diseño.
Los nuevos estilos se aplicarán a los controles en la superficie de diseño.
Presione F5 para compilar y ejecutar la aplicación.