WPF - Usando ListBox com Vídeos (MediaElement)
Neste
artigo vou mostrar como podemos usar os recursos do controle ListBox
para exibir itens com conteúdo de vídeos usando o controle MediaElement.
|
Eu já tratei dos componentes ListBox e MediaElement em meus artigos (veja as referências) e hoje vou mostrar como podemos incluir elementos com vídeos usando o componente MediaElement em um controle ListBox da WPF.
O controle ListBox da WPF é diferente do controle ListBox Windows Forms e possui muitas habilidades que podem ser estendidas.
A tag <ListBox></ListBox> representa um controle ListBox no XAML e possui diversas propriedades que podemos configurar :
<ListBox Margin="10,10,0,13" Name="listBox1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="194" Height="200" />
Um controle ListBox possui uma coleção de de ListBoxItem que representam os itens selecionáveis em um controle ListBox.
A classe MediaElement representa um controle que contém áudio e/ou vídeo e pode ser usado em dois modos distintos, dependendo de como o controle esta direcionado:
Vamos juntar os dois componentes e inserir elementos MediaElement em um ListBox usando o ListBoxItem de forma que teremos uma lista de vídeos exibidas no ListBox que quando selecionados pelo usuário irá exibir o vídeo correspondente.
Recursos usados:
Visual Studio 2013 Express for Windows Desktop
Criando o projeto WPF no Visual Studio 2013 Express
Abra o Visual Studio 2013 Express for windows desktop e crie um novo projeto selecionando o template Visual Basic -> Wpf Application;
Informe o nome Wpf_ListBox_Videos e clique no botão OK;
Nota: Você pode criar um projeto usando a linguagem C#
A seguir no arquivo MainWindow.xaml defina as propriedades da janela (Window) Height igual a 650 e Width igual a 1000.
<
Window x:Class="MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"A seguir a partir da ToolBox inclua os componentes ListBox e MediaElement na janela no interior do controle Grid.
<Grid> <ListBox HorizontalAlignment="Left" VerticalAlignment="Top" Margin="27,41.5,0,0" Name="lbVideos" BorderThickness="2" FontFamily="Verdana" FontSize="12" FontWeight="Bold" Width="250" Height="233"> </ListBox> <MediaElement Margin="336,43,53,217" Name="mediaElement1" /> </Grid> |
Vamos aplicar um estilo criando um recurso no arquivo Application.xaml conforme o código abaixo destacado em azul:
<Application x:Class="Application" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="MainWindow.xaml"> <Application.Resources> <LinearGradientBrush x:Key="brushGrid" StartPoint="0.1, 0.6" EndPoint="0.8, 1"> <GradientStop Color="AliceBlue" Offset="0.4"/> <GradientStop Color="Azure" Offset="1"/> </LinearGradientBrush> <LinearGradientBrush x:Key="brushListBox" StartPoint="0.1, 0.6" EndPoint="0.8, 1"> <GradientStop Color="Honeydew" Offset="0.4"/> <GradientStop Color= "Goldenrod" Offset="1"/> </LinearGradientBrush> </Application.Resources> </Application> |
A seguir vamos aplicar o estilo no Grid e no ListBox do arquivo MainWindow.xaml:
<Grid
Background="{StaticResource
brushGrid}"> <ListBox Background="{StaticResource brushListBox}" .... |
Agora vamos exibir no controle ListBox um vídeo e o seu nome para cada item do controle.
Para fazer isso vamos colocar um controle StackPanel em cada item do ListBox o qual será usado para conter o vídeo e o Texto.
Para exibir o vídeo vamos usar o componente MediaElement e para exibir o texto um controle TextBlock. Tudo isso no interior do ListBoxItem.
... <ListBoxItem Name="lbivid1" BorderThickness="2" Selected="lbivid_Selected" > <StackPanel Orientation="Horizontal"> </StackPanel> </ListBoxItem> ... |
Note que definimos o evento Selected no ListBoxItem. Esse evento será tratado quando o usuário clicar em um item para selecionar o vídeo.
No interior do StackPanel iremos incluir o MediaElement e o TextBlock:
... <ListBoxItem Name="lbivid1" BorderThickness="2" Selected="lbivid_Selected" > <StackPanel Orientation="Horizontal"> <MediaElement Name="vid1" Source="C:\dados\Video1.wmv" Volume="0" Height="50"></MediaElement> <TextBlock Text="Earth" HorizontalAlignment="Center" Foreground="Maroon" FontFamily="Monotype Corsiva" FontSize="20" VerticalAlignment="Center" > </TextBlock> </StackPanel> </ListBoxItem> ... |
Observe definimos a propriedade Volume igual a zero e o tamanho Height igual a 50, assim exibimos uma miniatura sem som no controle ListBox.
Você pode inserir tantos itens para tantos vídeos que desejar exibir no controle ListBox.
A seguir inclua um controle Label abaixo do controle ListBox e defina sua propriedade Content com o texto : Clique no Vídeo para Assistir
Abaixo vemos o leiaute do arquivo MainWindow.xaml :
Código XAML gerado:
<Window x:Class="MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Vídeos com ListBox" Height="650" Width="1000"> <Grid Background="{StaticResource brushGrid}"> <ListBox Background="{StaticResource brushListBox}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="27,42,0,0" Name="lbVideos" BorderThickness="2" FontFamily="Verdana" FontSize="12" FontWeight="Bold" Width="250" Height="270"> <ListBoxItem Name="lbivid1" BorderThickness="2" Selected="lbivid_Selected" > <StackPanel Orientation="Horizontal"> <MediaElement Name="vid1" Source="C:\Dados\Videos\Video1.wmv" Volume="0" Height="50" ></MediaElement> <TextBlock Text="Aula Visual Basic" HorizontalAlignment="Center" Foreground="Maroon" FontFamily="Monotype Corsiva" FontSize="20" VerticalAlignment="Center" > </TextBlock> </StackPanel> </ListBoxItem> <ListBoxItem Name="lbivid2" BorderThickness="2" Selected="lbivid_Selected" > <StackPanel Orientation="Horizontal"> <MediaElement Name="vid2" Source="C:\Dados\Videos\Video1.wmv" Volume="0" Height="50" ></MediaElement> <TextBlock Text="Aula Visual Basic" HorizontalAlignment="Center" Foreground="Maroon" FontFamily="Monotype Corsiva" FontSize="20" VerticalAlignment="Center" > </TextBlock> </StackPanel> </ListBoxItem> <ListBoxItem Name="lbivid3" BorderThickness="2" Selected="lbivid_Selected" > <StackPanel Orientation="Horizontal"> <MediaElement Name="vid3" Source="C:\Dados\Videos\Video1.wmv" Volume="0" Height="50" ></MediaElement> <TextBlock Text="Aula Visual Basic" HorizontalAlignment="Center" Foreground="Maroon" FontFamily="Monotype Corsiva" FontSize="20" VerticalAlignment="Center" > </TextBlock> </StackPanel> </ListBoxItem> <ListBoxItem Name="lbivid4" BorderThickness="2" Selected="lbivid_Selected" > <StackPanel Orientation="Horizontal"> <MediaElement Name="vid4" Source="C:\Dados\Videos\Video1.wmv" Volume="0" Height="50" ></MediaElement> <TextBlock Text="Aula Visual Basic" HorizontalAlignment="Center" Foreground="Maroon" FontFamily="Monotype Corsiva" FontSize="20" VerticalAlignment="Center" > </TextBlock> </StackPanel> </ListBoxItem> </ListBox> <MediaElement Margin="308,42,38,25" Name="mediaElement1" /> <Label Content="Clique no Vídeo para Assistir" HorizontalAlignment="Left" Margin="30,312,0,0" VerticalAlignment="Top" Height="25" Width="247" FontWeight="Bold" FontSize="14"/> </Grid> </Window> |
Para concluir vamos definir o código do evento Selected do ListBoxItem no arquivo MainWindow.xaml.vb de forma que quando o usuário clicar em um item o respectivo vídeo associado seja executado.
VB .NET | C# |
Private Sub
lbivid_Selected(sender As Object, e As RoutedEventArgs) Dim lbi As New ListBoxItem() lbi = DirectCast(sender, ListBoxItem) Select Case lbi.Name Case "lbivid1" mediaElement1.Source = vid1.Source Exit Select Case "lbivid2" mediaElement1.Source = vid2.Source Exit Select Case "lbivid3" mediaElement1.Source = vid3.Source Exit Select Case "lbivid4" mediaElement1.Source = vid4.Source Exit Select End Select End Sub |
private void lbivid_Selected(object sender, RoutedEventArgs e) { ListBoxItem lbi = new ListBoxItem(); lbi = (ListBoxItem)sender; switch(lbi.Name) { case "lbivid1": mediaElement1.Source = vid1.Source; break; case "lbivid2": mediaElement1.Source = vid2.Source; break; case "lbivid3": mediaElement1.Source = vid3.Source; break; case "lbivid4": mediaElement1.Source = vid4.Source; break; } } |
Executando o projeto iremos obter o seguinte resultado:
Após executar e selecionar um item do ListBox o vídeo será exibido ao lado no controle MediaElement.
Pegue o projeto completo aqui: Wpf_ListBox_Videos.zip
E esta é a mensagem
que dele ouvimos, e vos anunciamos: que Deus é luz, e não há nele trevas
nenhumas.
Se dissermos que temos comunhão com ele, e andarmos em trevas, mentimos, e não
praticamos a verdade
1 João 1:5,6
Veja os
Destaques e novidades do SUPER DVD Visual Basic
(sempre atualizado) : clique e confira !
Quer migrar para o VB .NET ?
Quer aprender C# ??
Quer aprender os conceitos da Programação Orientada a objetos ? Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ? Quer aprender a criar aplicações Web Dinâmicas usando a ASP .NET MVC 5 ? |
Gostou ? Compartilhe no Facebook Compartilhe no Twitter
Referências: