Creare controlli di trasporto video personalizzati

MediaPlayerElement include controlli di trasporto XAML personalizzabili per gestire il controllo del contenuto audio e video all'interno di un'app di Windows. Qui viene illustrato come personalizzare il modello MediaTransportControls. Verrà illustrato come usare il menu di overflow, aggiungere un pulsante personalizzato e modificare il dispositivo di scorrimento.

API importanti: MediaPlayerElement, MediaPlayerElement.AreTransportControlsEnabled, MediaTransportControls

Prima di iniziare, dovresti avere familiarità con le classi MediaPlayerElement e MediaTransportControls. Per altre info, vedi la guida al controllo MediaPlayerElement.

Quando è necessario personalizzare il modello?

MediaPlayerElement include controlli di trasporto predefiniti progettati per funzionare correttamente senza modifiche nella maggior parte delle app di riproduzione video e audio. Vengono forniti dalla classe MediaTransportControls e includono pulsanti per riprodurre, arrestare e esplorare i supporti, regolare il volume, attivare o disattivare lo schermo intero, eseguire il cast in un secondo dispositivo, abilitare didascalia, cambiare tracce audio e regolare la frequenza di riproduzione. MediaTransportControls ha proprietà che consentono di controllare se ogni pulsante viene visualizzato e abilitato. È anche possibile impostare la proprietà IsCompact per specificare se i controlli vengono visualizzati in una o due righe.

Tuttavia, potrebbero esserci scenari in cui è necessario personalizzare ulteriormente l'aspetto del controllo o modificarne il comportamento. Di seguito sono riportati alcuni esempi.

• Modificare le icone, il comportamento del dispositivo di scorrimento e i colori.
• Spostare i pulsanti di comando meno usati in un menu di overflow.
• Modificare l'ordine di rilascio dei comandi quando il controllo viene ridimensionato.
• Specificare un pulsante di comando non incluso nel set predefinito.

È possibile personalizzare l'aspetto del controllo modificando il modello predefinito. Per modificare il comportamento del controllo o aggiungere nuovi comandi, è possibile creare un controllo personalizzato derivato da MediaTransportControls.

Struttura del modello

ControlTemplate fa parte dello stile predefinito. È possibile copiare questo stile predefinito nel progetto per modificarlo. ControlTemplate è suddiviso in sezioni simili ad altri modelli di controllo XAML.

• La prima sezione del modello contiene le definizioni di stile per i vari componenti di MediaTransportControls.
• La seconda sezione definisce i vari stati di visualizzazione usati da MediaTransportControls.
• La terza sezione contiene grid che contiene i vari elementi MediaTransportControls insieme e definisce la disposizione dei componenti.

Nelle sezioni seguenti viene illustrato come personalizzare diversi elementi principali dei controlli di trasporto:

• Slider: consente all'utente di eseguire lo scrubbing dei file multimediali e visualizza anche lo stato di avanzamento.
• CommandBar: contiene tutti i pulsanti. Per altre info, vedi la sezione Anatomia dell'argomento di riferimento MediaTransportControls.

Personalizzare i controlli di trasporto

Se si desidera modificare solo l'aspetto di MediaTransportControls, è possibile creare una copia dello stile e del modello di controllo predefiniti e modificarlo. Tuttavia, se si desidera aggiungere o modificare anche la funzionalità del controllo, è necessario creare una nuova classe che deriva da MediaTransportControls.

Rielaborare il controllo

Per personalizzare il modello e lo stile predefinito di MediaTransportControls

1. Copiare lo stile predefinito dagli stili e dai modelli MediaTransportControls in un oggetto ResourceDictionary nel progetto.
2. Assegnare allo stile un valore x:Key per identificarlo, in questo modo.

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

3. Aggiungere un oggetto MediaPlayerElement con MediaTransportControls all'interfaccia utente.
4. Impostare la proprietà Style dell'elemento MediaTransportControls sulla risorsa Style personalizzata, come illustrato di seguito.

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

Per altre info sulla modifica di stili e modelli, vedere controlli di stile e modelli di controllo.

Creare un controllo derivato

Per aggiungere o modificare la funzionalità dei controlli di trasporto, è necessario creare una nuova classe derivata da MediaTransportControls. Una classe derivata denominata CustomMediaTransportControls viene visualizzata nell'esempio Controlli trasporto multimediale e negli esempi rimanenti in questa pagina.

Per creare una nuova classe derivata da MediaTransportControls

1. Aggiungere un nuovo file di classe al progetto.
   • In Visual Studio selezionare Aggiungi classe progetto > . Viene aperta la finestra di dialogo Aggiungi nuovo elemento.
   • Nella finestra di dialogo Aggiungi nuovo elemento immettere un nome per il file di classe e quindi fare clic su Aggiungi. Nell'esempio Di controlli di trasporto multimediale la classe è denominata CustomMediaTransportControls.
2. Modificare il codice della classe per derivare dalla classe MediaTransportControls.

public sealed class CustomMediaTransportControls : MediaTransportControls
{
}

3. Copiare lo stile predefinito per MediaTransportControls in un ResourceDictionary nel progetto. Questo è lo stile e il modello modificati. Nell'esempio Di controlli di trasporto multimediale viene creata una nuova cartella denominata "Temi" e viene aggiunto un file ResourceDictionary denominato generic.xaml.
4. Modificare TargetType dello stile impostando il nuovo tipo di controllo personalizzato. Nell'esempio targetType viene modificato in local:CustomMediaTransportControls.

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

5. Vedere DefaultStyleKey della classe personalizzata. Ciò indica alla classe personalizzata di usare uno stile con targetType di local:CustomMediaTransportControls.

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

6. Aggiungere un oggetto MediaPlayerElement al markup XAML e aggiungervi i controlli di trasporto personalizzati. Una cosa da notare è che le API per nascondere, mostrare, disabilitare e abilitare i pulsanti predefiniti funzionano ancora con un modello personalizzato.

<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>

È ora possibile modificare lo stile e il modello del controllo per aggiornare l'aspetto del controllo personalizzato e il codice di controllo per aggiornarne il comportamento.

Uso del menu di overflow

È possibile spostare i pulsanti di comando MediaTransportControls in un menu di overflow, in modo che i comandi meno usati vengano nascosti fino a quando l'utente non ne ha bisogno.

Nel modello MediaTransportControls i pulsanti di comando sono contenuti in un elemento CommandBar . La barra dei comandi ha il concetto di comandi primari e secondari. I comandi principali sono i pulsanti visualizzati nel controllo per impostazione predefinita e sono sempre visibili (a meno che non si disabilita il pulsante, nascondere il pulsante o non vi sia spazio sufficiente). I comandi secondari vengono visualizzati in un menu di overflow visualizzato quando un utente fa clic sul pulsante con i puntini di sospensione (...) . Per altre info, vedere l'articolo Barre dell'app e barre dei comandi.

Per spostare un elemento dai comandi primari della barra dei comandi al menu di overflow, è necessario modificare il modello di controllo XAML.

Per spostare un comando nel menu extra

1. Nel modello di controllo trovare l'elemento CommandBar denominato MediaControlsCommandBar.
2. Aggiungere una sezione SecondaryCommands al codice XAML per CommandBar. Inserirlo dopo il tag di chiusura per 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. Per popolare il menu con i comandi, tagliare e incollare il codice XAML per gli oggetti AppBarButton desiderati da PrimaryCommands a SecondaryCommands. In questo esempio l'oggetto PlaybackRateButton viene spostato nel menu di overflow.

4. Aggiungere un'etichetta al pulsante e rimuovere le informazioni sullo stile, come illustrato di seguito. Poiché il menu di overflow è costituito da pulsanti di testo, è necessario aggiungere un'etichetta di testo al pulsante e rimuovere anche lo stile che imposta l'altezza e la larghezza del pulsante. In caso contrario, non verrà visualizzato correttamente nel menu di overflow.

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

Aggiunta di un pulsante personalizzato

Un motivo per cui potresti voler personalizzare MediaTransportControls consiste nell'aggiungere un comando personalizzato al controllo. Indipendentemente dal fatto che venga aggiunto come comando primario o come comando secondario, la procedura per la creazione del pulsante di comando e la modifica del relativo comportamento è la stessa. Nell'esempio Controlli trasporto multimediale viene aggiunto un pulsante "rating" ai comandi primari.

Per aggiungere un pulsante di comando personalizzato

1. Creare un oggetto AppBarButton e aggiungerlo a CommandBar nel modello di controllo.

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

Devi aggiungerlo a CommandBar nella posizione appropriata. Per altre informazioni, vedere la sezione Utilizzo del menu di overflow. Il modo in cui viene posizionato nell'interfaccia utente è determinato dalla posizione del pulsante nel markup. Se vuoi che il pulsante venga visualizzato come ultimo elemento nei comandi principali, ad esempio, aggiungilo alla fine dell'elenco dei comandi principali.

Puoi anche personalizzare l'icona del pulsante. Per altre informazioni, vedi le informazioni di riferimento su AppBarButton.

2. Nella sovrascrittura OnApplyTemplate ottenere il pulsante dal modello e registrare un gestore per l'evento Click. Questo codice viene inserito nella 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. Aggiungere il codice al gestore eventi Click per eseguire l'azione che si verifica quando si fa clic sul pulsante. Ecco il codice per la classe completa.

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 del dispositivo di scorrimento

Il controllo "seek" di MediaTransportControls viene fornito da un elemento Slider. Un modo per personalizzarlo consiste nel modificare la granularità del comportamento di ricerca.

Il dispositivo di scorrimento di ricerca predefinito è suddiviso in 100 parti, quindi il comportamento di ricerca è limitato a tale numero di sezioni. Puoi modificare la granularità del dispositivo di scorrimento di ricerca ottenendo Slider dalla struttura ad albero visuale XAML nel gestore eventi MediaOpened in MediaPlayerElement.MediaPlayer. Questo esempio mostra come usare VisualTreeHelper per ottenere un riferimento a Slider, quindi modificare la frequenza di passaggio predefinita del dispositivo di scorrimento da 1% a 0,1% (1000 passaggi) se il supporto è più lungo di 120 minuti. MediaPlayerElement è denominato 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;
  }
}

Articoli correlati

• Riproduzione di contenuti multimediali