WPF - ListBox com Vídeos

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.

Chegou o curso Curso ASP .NET .MVC 5 Vídeo Aulas onde você vai aprender a criar aplicações web dinâmicas usando a ASP .NET MVC 5.

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 :

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:

Modo independente - neste modo o MediaElement é análogo a uma imagem e a URI de origem pode ser especificada diretamente;
No modo Relógio (Clock) - neste modo o MediaElement pode ser visto como a origem para uma animação e assim ele terá as entradas TimeLine e Clock correspondentes na árvore de tempo;

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.

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

   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 ?

Veja mais sistemas completos para a plataforma .NET no Super DVD .NET , confira...
Curso Básico VB .NET - Vídeo Aulas

Quer aprender C# ??

Chegou o Super DVD C# com exclusivo material de suporte e vídeo aulas com curso básico sobre C#.
Curso C# Basico - Video Aulas

Quer aprender os conceitos da Programação Orientada a objetos ?

Curso Fundamentos da Programação Orientada a Objetos com VB .NET

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Curso - Gerando Relatórios com o ReportViewer no VS 2013 - Vídeo Aulas

Quer aprender a criar aplicações Web Dinâmicas usando a ASP .NET MVC 5 ?

Curso ASP .NET MVC 5 - Vídeo Aulas

Gostou ? Compartilhe no Facebook Compartilhe no Twitter

Referências:

José Carlos Macoratti