Criar controles de transporte personalizados

MediaPlayerElement tem controles de transporte XAML personalizáveis para gerenciar o controle de conteúdo de áudio e vídeo em um aplicativo do Windows. Aqui, demonstramos como personalizar o modelo MediaTransportControls. Mostraremos como trabalhar com o menu suspenso, adicionar um botão personalizado e modificar o controle deslizante.

APIs importantes: MediaPlayerElement, MediaPlayerElement.AreTransportControlsEnabled, MediaTransportControls

Antes de começar, você deve estar familiarizado com as classes MediaPlayerElement e MediaTransportControls. Para obter mais informações, consulte o guia de controle MediaPlayerElement.

Quando você deve personalizar o modelo?

MediaPlayerElement tem controles de transporte internos projetados para funcionar bem sem modificação na maioria dos aplicativos de reprodução de vídeo e áudio. Eles são fornecidos pela classe MediaTransportControls e incluem botões para reproduzir, parar e navegar pela mídia, ajustar volume, alternar tela inteira, converter em um segundo dispositivo, habilitar legendas, alternar faixas de áudio e ajustar a taxa de reprodução. MediaTransportControls tem propriedades que permitem controlar se cada botão é mostrado e habilitado. Você também pode definir a propriedade IsCompact para especificar se os controles são mostrados em uma ou duas linhas.

No entanto, pode haver cenários em que você precisa personalizar ainda mais a aparência do controle ou alterar seu comportamento. Aqui estão alguns exemplos:

• Altere os ícones, o comportamento do controle deslizante e as cores.
• Mova botões de comando menos usados para um menu suspenso.
• Altere a ordem na qual os comandos são removidos quando o controle é redimensionado.
• Forneça um botão de comando que não esteja no conjunto padrão.

Você pode personalizar a aparência do controle modificando o modelo padrão. Para modificar o comportamento do controle ou adicionar novos comandos, você pode criar um controle personalizado derivado de MediaTransportControls.

Estrutura de modelo

O ControlTemplate faz parte do estilo padrão. Você pode copiar esse estilo padrão em seu projeto para modificá-lo. O ControlTemplate é dividido em seções semelhantes a outros modelos de controle XAML.

• A primeira seção do modelo contém as definições de estilo para os vários componentes do MediaTransportControls.
• A segunda seção define os vários estados visuais usados pelo MediaTransportControls.
• A terceira seção contém a Grade que mantém vários elementos MediaTransportControls juntos e define como os componentes são dispostos.

Nas seções a seguir, você aprenderá a personalizar vários dos principais elementos dos controles de transporte:

• Controle deslizante: permite que um usuário esfregue a mídia e também exiba o progresso
• CommandBar: contém todos os botões. Para obter mais informações, consulte a seção Anatomia do tópico de referência MediaTransportControls.

Personalizar os controles de transporte

Se você quiser modificar apenas a aparência do MediaTransportControls, poderá criar uma cópia do modelo e estilo de controle padrão e modificá-la. No entanto, se você também quiser adicionar ou modificar a funcionalidade do controle, precisará criar uma nova classe derivada de MediaTransportControls.

Reformular o controle

Para personalizar o estilo e o modelo padrão do MediaTransportControls

1. Copie o estilo padrão de estilos e modelos MediaTransportControls para um ResourceDictionary em seu projeto.
2. Dê ao Estilo um valor x:Key para identificá-lo, assim.

<Style TargetType="MediaTransportControls" x:Key="myTransportControlsStyle">
    <!-- Style content ... -->
</Style>

3. Adicione um MediaPlayerElement com MediaTransportControls à sua interface do usuário.
4. Defina a propriedade Style do elemento MediaTransportControls para o seu recurso de estilo personalizado, conforme mostrado aqui.

<MediaPlayerElement AreTransportControlsEnabled="True">
    <MediaPlayerElement.TransportControls>
        <MediaTransportControls Style="{StaticResource myTransportControlsStyle}"/>
    </MediaPlayerElement.TransportControls>
</MediaPlayerElement>

Para obter mais informações sobre como modificar estilos e modelos, consulte Controles de estilo e modelos de controle.

Criar um controle derivado

Para adicionar ou modificar a funcionalidade dos controles de transporte, você deve criar uma nova classe derivada de MediaTransportControls. Uma classe derivada chamada CustomMediaTransportControls é mostrada no exemplo controles de transporte de mídia e os exemplos restantes nesta página.

Para criar uma nova classe derivada de MediaTransportControls

1. Adicione um novo arquivo de classe ao seu projeto.
   • No Visual Studio, selecione Projeto > Adicionar Classe. A caixa de diálogo Adicionar Novo Item é aberta.
   • Na caixa de diálogo Adicionar Novo Item, insira um nome para o arquivo de classe e clique em Adicionar. (No exemplo controles de transporte de mídia, a classe é chamada CustomMediaTransportControls.)
2. Modifique o código de classe para derivar da classe MediaTransportControls.

public sealed class CustomMediaTransportControls : MediaTransportControls
{
}

3. Copie o estilo padrão para MediaTransportControls em um ResourceDictionary em seu projeto. Esse é o estilo e o modelo que você modifica. (No exemplo controles de transporte de mídia, uma nova pasta chamada "Temas" é criada e um arquivo ResourceDictionary chamado generic.xaml é adicionado a ele.)
4. Altere o TargetType do estilo para o novo tipo de controle personalizado. (No exemplo, o TargetType é alterado para local:CustomMediaTransportControls.)

xmlns:local="using:CustomMediaTransportControls">
...
<Style TargetType="local:CustomMediaTransportControls">

5. Defina o DefaultStyleKey de sua classe personalizada. Isso informa a sua classe personalizada a usar um Estilo com um TargetType de local:CustomMediaTransportControls.

public sealed class CustomMediaTransportControls : MediaTransportControls
{
    public CustomMediaTransportControls()
    {
        this.DefaultStyleKey = typeof(CustomMediaTransportControls);
    }
}

6. Adicione um MediaPlayerElement à marcação XAML e adicione os controles de transporte personalizados a ele. Uma coisa a observar é que as APIs para ocultar, mostrar, desabilitar e habilitar os botões padrão ainda funcionam com um modelo personalizado.

<MediaPlayerElement Name="MediaPlayerElement1" AreTransportControlsEnabled="True" Source="video.mp4">
    <MediaPlayerElement.TransportControls>
        <local:CustomMediaTransportControls x:Name="customMTC"
                                            IsFastForwardButtonVisible="True"
                                            IsFastForwardEnabled="True"
                                            IsFastRewindButtonVisible="True"
                                            IsFastRewindEnabled="True"
                                            IsPlaybackRateButtonVisible="True"
                                            IsPlaybackRateEnabled="True"
                                            IsCompact="False">
        </local:CustomMediaTransportControls>
    </MediaPlayerElement.TransportControls>
</MediaPlayerElement>

Agora você pode modificar o estilo de controle e o modelo para atualizar a aparência do controle personalizado e o código de controle para atualizar seu comportamento.

Trabalhando com o menu de transbordamento

Você pode mover os botões de comando do MediaTransportControls para um menu suspenso, de forma que os comandos menos usados permaneçam ocultos até que o usuário precise.

No modelo MediaTransportControls, os botões de comando estão contidos em um elemento CommandBar . A barra de comandos tem o conceito de comandos primários e secundários. Os comandos primários são os botões que aparecem no controle por padrão e estão sempre visíveis (a menos que você desabilite o botão, oculte o botão ou não haja espaço suficiente). Os comandos secundários são mostrados em um menu suspenso exibido quando o usuário clica no botão de reticências (...). Para obter mais informações, consulte o artigo barras de aplicativos e barras de comandos .

Para mover um elemento dos comandos primários da barra de comandos para o menu de transbordo, você precisa editar o modelo de controle XAML.

Para mover um comando para o menu de excesso:

1. No modelo de controle, localize o elemento CommandBar chamado MediaControlsCommandBar.
2. Adicione uma seção SecondaryCommands ao XAML para o CommandBar. Coloque-o após a marca de fechamento para PrimaryCommands.

<CommandBar x:Name="MediaControlsCommandBar" ... >  
  <CommandBar.PrimaryCommands>
...
    <AppBarButton x:Name='PlaybackRateButton'
                    Style='{StaticResource AppBarButtonStyle}'
                    MediaTransportControlsHelper.DropoutOrder='4'
                    Visibility='Collapsed'>
      <AppBarButton.Icon>
        <FontIcon Glyph="&#xEC57;"/>
      </AppBarButton.Icon>
    </AppBarButton>
...
  </CommandBar.PrimaryCommands>
<!-- Add secondary commands (overflow menu) here -->
  <CommandBar.SecondaryCommands>
    ...
  </CommandBar.SecondaryCommands>
</CommandBar>

3. Para popular o menu com comandos, corte e cole o XAML para os objetos AppBarButton desejados do PrimaryCommands para o SecondaryCommands. Neste exemplo, movemos o PlaybackRateButton para o menu de overflow.

4. Adicione um rótulo ao botão e remova as informações de estilo, conforme mostrado aqui. Como o menu de overflow é composto por botões de texto, você deve adicionar uma etiqueta de texto ao botão e também remover o estilo que define a altura e a largura do botão. Caso contrário, não aparecerá corretamente no menu suspenso.

<CommandBar.SecondaryCommands>
    <AppBarButton x:Name='PlaybackRateButton'
                  Label='Playback Rate'>
    </AppBarButton>
</CommandBar.SecondaryCommands>

Adicionando um botão personalizado

Um motivo pelo qual talvez você queira personalizar o MediaTransportControls é adicionar um comando personalizado ao controle. Se você adicioná-lo como um comando primário ou um comando secundário, o procedimento para criar o botão de comando e modificar seu comportamento é o mesmo. No exemplo Controles de Transporte de Mídia, um botão de "classificação" é adicionado aos comandos primários.

Para adicionar um botão de comando personalizado

1. Crie um objeto AppBarButton e adicione-o ao CommandBar no modelo de controle.

<AppBarButton x:Name="LikeButton"
              Icon="Like"
              Style="{StaticResource AppBarButtonStyle}"
              MediaTransportControlsHelper.DropoutOrder="3"
              VerticalAlignment="Center" />

Você deve adicioná-lo ao CommandBar no local apropriado. (Para obter mais informações, consulte a seção Trabalhando com o menu de estouro.) A forma como ele é posicionado na interface do usuário é determinada pelo local em que o botão está nas estruturas de marcação. Por exemplo, se você quiser que esse botão apareça como o último elemento nos comandos primários, adicione-o no final da lista de comandos primários.

Você também pode personalizar o ícone para o botão. Para obter mais informações, consulte a referência AppBarButton .

2. Na sobrescrita OnApplyTemplate, obtenha o botão do modelo e registre um manipulador para seu evento Click. Esse código vai para a CustomMediaTransportControls classe.

public sealed class CustomMediaTransportControls :  MediaTransportControls
{
    // ...

    protected override void OnApplyTemplate()
    {
        // Find the custom button and create an event handler for its Click event.
        var likeButton = GetTemplateChild("LikeButton") as Button;
        likeButton.Click += LikeButton_Click;
        base.OnApplyTemplate();
    }

    //...
}

3. Adicione código ao manipulador de eventos Clique para executar a ação que ocorre quando o botão é clicado. Este é o código completo para a classe.

public sealed class CustomMediaTransportControls : MediaTransportControls
{
    public event EventHandler< EventArgs> Liked;

    public CustomMediaTransportControls()
    {
        this.DefaultStyleKey = typeof(CustomMediaTransportControls);
    }

    protected override void OnApplyTemplate()
    {
        // Find the custom button and create an event handler for its Click event.
        var likeButton = GetTemplateChild("LikeButton") as Button;
        likeButton.Click += LikeButton_Click;
        base.OnApplyTemplate();
    }

    private void LikeButton_Click(object sender, RoutedEventArgs e)
    {
        // Raise an event on the custom control when 'like' is clicked.
        var handler = Liked;
        if (handler != null)
        {
            handler(this, EventArgs.Empty);
        }
    }
}

Modificando o controle deslizante

O controle "seek" do MediaTransportControls é fornecido por um elemento Slider . Uma maneira de personalizá-lo é alterar a granularidade do comportamento de busca.

O controle deslizante de busca padrão é dividido em 100 partes, portanto, o comportamento de busca é limitado a tantas seções. Você pode alterar a granularidade do controle deslizante de procura obtendo o Slider a partir da árvore visual XAML no manipulador de eventos MediaOpened em MediaPlayerElement.MediaPlayer. Este exemplo mostra como usar o VisualTreeHelper para obter uma referência ao Controle Deslizante e, em seguida, alterar a frequência de etapa padrão do controle deslizante de 1% para 0,1% (1000 etapas) se a mídia tiver mais de 120 minutos. O MediaPlayerElement é nomeado MediaPlayerElement1.

protected override void OnNavigatedTo(NavigationEventArgs e)
{
  MediaPlayerElement1.MediaPlayer.MediaOpened += MediaPlayerElement_MediaPlayer_MediaOpened;
  base.OnNavigatedTo(e);
}

private void MediaPlayerElement_MediaPlayer_MediaOpened(object sender, RoutedEventArgs e)
{
  FrameworkElement transportControlsTemplateRoot = (FrameworkElement)VisualTreeHelper.GetChild(MediaPlayerElement1.TransportControls, 0);
  Slider sliderControl = (Slider)transportControlsTemplateRoot.FindName("ProgressSlider");
  if (sliderControl != null && MediaPlayerElement1.NaturalDuration.TimeSpan.TotalMinutes > 120)
  {
    // Default is 1%. Change to 0.1% for more granular seeking.
    sliderControl.StepFrequency = 0.1;
  }
}

Artigos relacionados

• Reprodução de mídia