Criar controlos de transporte personalizados

O MediaPlayerElement tem controlos de transporte XAML personalizáveis para gerir o controlo do conteúdo áudio e vídeo dentro de uma aplicação Windows. Aqui, demonstramos como personalizar o modelo MediaTransportControls. Vamos mostrar-te como utilizar o menu de excesso, adicionar um botão personalizado e modificar o cursor.

APIs importantes: MediaPlayerElement, MediaPlayerElement.AreTransportControlsEnabled, MediaTransportControls

Antes de começar, deves estar familiarizado com as classes MediaPlayerElement e MediaTransportControls. Para mais informações, consulte o guia de controlo MediaPlayerElement.

Quando deve personalizar o modelo?

O MediaPlayerElement tem controlos de transporte incorporados que foram concebidos para funcionar bem sem alterações na maioria das aplicações de reprodução de vídeo e áudio. São fornecidos pela classe MediaTransportControls e incluem botões para reproduzir, parar e navegar nos media, ajustar o volume, alternar o ecrã completo, transmitir para um segundo dispositivo, ativar legendas, mudar de faixa de áudio e ajustar a taxa de reprodução. O MediaTransportControls tem propriedades que permitem controlar se cada botão é mostrado e ativado. Também pode definir a propriedade IsCompact para especificar se os controlos são mostrados numa linha ou duas.

No entanto, podem existir cenários em que seja necessário personalizar ainda mais o aspeto do controlo ou alterar o seu comportamento. Eis alguns exemplos:

• Muda os ícones, o comportamento dos sliders e as cores.
• Mova os botões de comando menos usados para um menu de transbordo.
• Mude a ordem em que os comandos desaparecem quando o controlo é redimensionado.
• Fornece um botão de comando que não esteja no conjunto padrão.

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

Estrutura do modelo

O ControlTemplate faz parte do estilo padrão. Podes copiar este estilo padrão para o teu projeto para o modificar. O ControlTemplate está dividido em secções semelhantes a outros templates de controlo XAML.

• A primeira secção do template contém as definições de Estilo para os vários componentes do MediaTransportControls.
• A segunda secção define os vários estados visuais usados pelos MediaTransportControls.
• A terceira secção contém a Grelha que mantém vários elementos MediaTransportControls juntos e define como os componentes estão dispostos.

Nas secções seguintes, aprende a personalizar vários dos principais elementos dos controlos de transporte:

• Slider: permite ao utilizador navegar pelos seus media e também mostrar o progresso
• Command Bar: contém todos os botões. Para mais informações, consulte a secção Anatomia do tópico de referência MediaTransportControls.

Personalizar os controlos de transporte

Se quiser modificar apenas a aparência dos MediaTransportControls, pode criar uma cópia do estilo e modelo de controlo predefinidos e modificá-lo. No entanto, se também quiser adicionar ou modificar a funcionalidade do controlo, precisa de criar uma nova classe que derive do MediaTransportControls.

Reformatar o controlo

Para personalizar o estilo e modelo padrão do MediaTransportControls

1. Copie o estilo predefinido dos estilos e modelos MediaTransportControls para um Dicionário de Recursos no seu projeto.
2. Dê ao Estilo um valor x:Key para o identificar, assim.

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

3. Adiciona um MediaPlayerElement com MediaTransportControls à tua interface.
4. Defina a propriedade Estilo 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 mais informações sobre modificar estilos e modelos, veja Controlos de Estilo e Modelos de Controlo.

Criar um controlo derivado

Para adicionar ou modificar a funcionalidade dos controlos de transporte, deve criar uma nova classe derivada do MediaTransportControls. Uma classe derivada chamada CustomMediaTransportControls é mostrada na amostra Media Transport Controls e nos restantes exemplos nesta página.

Criar uma nova classe derivada do MediaTransportControls

1. Adicione um novo ficheiro de classe ao seu projeto.
   • No Visual Studio, selecione Adicionar Classe de Projeto > . Abre-se a janela de diálogo Adicionar Novo Item.
   • No diálogo Adicionar Novo Item, introduza um nome para o ficheiro da classe e depois clique em Adicionar. (No exemplo de Controlo de Transporte de Media, a classe é nomeada CustomMediaTransportControls.)
2. Modificar o código da classe para derivar da classe MediaTransportControls.

public sealed class CustomMediaTransportControls : MediaTransportControls
{
}

3. Copie o estilo padrão do MediaTransportControls para um ResourceDictionary no seu projeto. Este é o estilo e o template que modificas. (No exemplo de Controlo de Transporte de Mídia, é criada uma nova pasta chamada "Themes", e um ficheiro ResourceDictionary chamado generic.xaml é adicionado a ela.)
4. Mude o TargetType do estilo para o novo tipo de controlo personalizado. (Na amostra, o TargetType é alterado para local:CustomMediaTransportControls.)

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

5. Define o DefaultStyleKey da tua classe personalizada. Isto indica à sua classe personalizada que utilize um Style com um TargetType de local:CustomMediaTransportControls.

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

6. Adiciona um MediaPlayerElement à tua marcação XAML e adiciona os controles personalizados de transporte. Uma coisa a notar é que as APIs para ocultar, mostrar, desativar e ativar os botões padrão continuam a funcionar 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 pode modificar o estilo e o modelo de controlo para atualizar o aspeto do seu controlo personalizado, e o código de controlo para atualizar o seu comportamento.

Trabalhar com o menu de opções adicionais

Pode mover os botões de comando MediaTransportControls para um menu de overflow, para que comandos menos usados fiquem ocultos até que o utilizador precise deles.

No modelo MediaTransportControls, os botões de comando estão contidos num elemento CommandBar . A barra de comandos tem o conceito de comandos primários e secundários. Os comandos principais são os botões que aparecem no controlo por defeito e estão sempre visíveis (a menos que desatives o botão, escondas o botão ou não haja espaço suficiente). Os comandos secundários são mostrados num menu suspenso que aparece quando utilizador clica no botão de reticências (...). Para mais informações, consulte o artigo sobre barras de aplicações e barras de comandos .

Para mover um elemento dos comandos principais da barra de comandos para o menu de transbordo, precisa de editar o modelo de controlo XAML.

Para mover um comando para o menu de overflow:

1. No modelo de controlo, encontre o elemento CommandBar chamado MediaControlsCommandBar.
2. Adicione uma secção SecondaryCommands ao XAML para a CommandBar. Coloque-o depois da tag de fecho para o 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 preencher o menu com comandos, corta e cola o XAML dos objetos AppBarButton desejados dos PrimaryCommands para os SecondaryCommands. Neste exemplo, movemos o PlaybackRateButton para o menu de overflow.

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

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

Adicionar um botão personalizado

Uma razão para poderes querer personalizar o MediaTransportControls é adicionar um comando personalizado ao controlo. Quer o adiciones como comando primário ou secundário, o procedimento para criar o botão de comando e modificar o seu comportamento é o mesmo. No exemplo de Controlos de Transporte de Media, é adicionado um botão de "avaliação" aos comandos principais.

Para adicionar um botão de comando personalizado

1. Cria um objeto AppBarButton e adiciona-o à Barra de Comandos no modelo de controlo.

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

Deve adicioná-lo à Barra de Comandos no local apropriado. (Para mais informações, consulte a secção Trabalhar com o menu de overflow.) A forma como está posicionada na interface é determinada pela posição do botão na marcação. Por exemplo, se quiseres que este botão apareça como o último elemento nos comandos primários, adiciona-o no final da lista de comandos principais.

Também podes personalizar o ícone do botão. Para mais informações, consulte a referência AppBarButton .

2. Na substituição OnApplyTemplate, obtém o botão do modelo e regista um handler para o seu evento Click. Este código vai na 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 gestor de eventos Click para realizar a ação que ocorre quando o botão é clicado. Aqui está o código completo da 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);
        }
    }
}

Modificação do slider

O controlo de "busca" dos MediaTransportControls é fornecido por um elemento Slider . Uma forma de personalizar é alterar a granularidade do comportamento de procura.

O controlo deslizante padrão de procura está dividido em 100 partes, por isso o comportamento de procura está limitado a esse número de secções. Pode alterar a granularidade da barra de deslize obtendo o Slider da árvore visual XAML no seu manipulador de eventos MediaOpened no MediaPlayerElement.MediaPlayer. Este exemplo mostra como usar o VisualTreeHelper para obter uma referência ao Slider, e depois alterar a frequência padrão de passos do slider de 1% para 0,1% (1000 passos) se o media tiver mais de 120 minutos. O MediaPlayerElement chama-se 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 multimédia