Freigeben über

Benutzerdefinierte Transportsteuerungen erstellen

  • Artikel

MediaPlayerElement verfügt über anpassbare XAML-Transportsteuerelemente, um die Steuerung von Audio-und Videoinhalten innerhalb einer Windows-App zu verwalten. Hier wird veranschaulicht, wie Sie die MediaTransportControls-Vorlage anpassen. Wir zeigen Ihnen, wie Sie mit dem Überlaufmenü arbeiten, eine benutzerdefinierte Schaltfläche hinzufügen und den Schieberegler ändern.

Wichtige APIs: MediaPlayerElement, MediaPlayerElement.AreTransportControlsEnabled, MediaTransportControls

Bevor Sie beginnen, sollten Sie mit den Klassen "MediaPlayerElement" und "MediaTransportControls" vertraut sein. Weitere Informationen finden Sie im MediaPlayerElement-Steuerelementhandbuch.

Tipp

Die Beispiele in diesem Thema basieren auf dem Beispiel für Medientransportsteuerelemente. Sie können das Beispiel herunterladen, um den abgeschlossenen Code anzuzeigen und auszuführen.

Hinweis

MediaPlayerElement ist nur in Windows 10, Version 1607 und höher, verfügbar. Für das Entwickeln von Apps für niedrigere Windows 10-Versionen muss stattdessen MediaElement verwendet werden. Alle Beispiele auf dieser Seite funktionieren auch mit MediaElement .

Wann sollten Sie die Vorlage anpassen?

MediaPlayerElement verfügt über integrierte Transportsteuerelemente, die in den meisten Apps für die Video- und Audiowiedergabe problemlos funktionieren. Sie werden von der MediaTransportControls-Klasse bereitgestellt und enthalten Schaltflächen zum Wiedergeben, Beenden und Navigieren von Medien, Anpassen der Lautstärke, Umschalten im Vollbildmodus, Umwandeln auf ein zweites Gerät, Aktivieren von Untertiteln, Umschalten von Audiospuren und Anpassen der Wiedergaberate. MediaTransportControls verfügt über Eigenschaften, mit denen Sie steuern können, ob jede Schaltfläche angezeigt und aktiviert ist. Sie können auch die IsCompact-Eigenschaft festlegen, um anzugeben, ob die Steuerelemente in einer zeile oder zwei angezeigt werden.

Es kann jedoch Szenarien geben, in denen Sie das Erscheinungsbild des Steuerelements weiter anpassen oder das Verhalten ändern müssen. Im Folgenden finden Sie einige Beispiele:

  • Ändern Sie die Symbole, das Schiebereglerverhalten und die Farben.
  • Verschieben sie weniger häufig verwendete Befehlsschaltflächen in ein Überlaufmenü.
  • Ändern Sie die Reihenfolge, in der Befehle absteigen, wenn die Größe des Steuerelements geändert wird.
  • Stellen Sie eine Befehlsschaltfläche bereit, die nicht im Standardsatz enthalten ist.

Hinweis

Die schaltflächen, die auf dem Bildschirm angezeigt werden, werden von den integrierten Transportsteuerelementen in einer vordefinierten Reihenfolge entfernt, wenn nicht genügend Platz auf dem Bildschirm vorhanden ist. Um diese Reihenfolge zu ändern oder Befehle einzufügen, die nicht in ein Überlaufmenü passen, müssen Sie die Steuerelemente anpassen.

Sie können die Darstellung des Steuerelements anpassen, indem Sie die Standardvorlage ändern. Um das Verhalten des Steuerelements zu ändern oder neue Befehle hinzuzufügen, können Sie ein benutzerdefiniertes Steuerelement erstellen, das von MediaTransportControls abgeleitet ist.

Tipp

Anpassbare Steuerelementvorlagen sind ein leistungsfähiges Feature der XAML-Plattform, aber es gibt auch Konsequenzen, die Sie berücksichtigen sollten. Wenn Sie eine Vorlage anpassen, wird sie zu einem statischen Teil Ihrer App und erhält daher keine Plattformupdates, die von Microsoft an die Vorlage vorgenommen werden. Wenn Vorlagenaktualisierungen von Microsoft vorgenommen werden, sollten Sie die neue Vorlage übernehmen und sie erneut ändern, um die Vorteile der aktualisierten Vorlage zu erhalten.

Vorlagenstruktur

Die ControlTemplate ist Teil der Standardformatvorlage. Sie können diese Standardformatvorlage in Ihr Projekt kopieren, um sie zu ändern. Die ControlTemplate ist in Abschnitte unterteilt, die anderen XAML-Steuerelementvorlagen ähneln.

  • Der erste Abschnitt der Vorlage enthält die Formatvorlagendefinitionen für die verschiedenen Komponenten von MediaTransportControls.
  • Im zweiten Abschnitt werden die verschiedenen visuellen Zustände definiert, die von MediaTransportControls verwendet werden.
  • Der dritte Abschnitt enthält das Raster , das verschiedene MediaTransportControls-Elemente zusammen enthält und definiert, wie die Komponenten angeordnet sind.

Hinweis

Weitere Informationen zum Ändern von Vorlagen finden Sie unter Steuerelementvorlagen. Sie können einen Text-Editor oder ähnliche Editoren in Ihrer IDE verwenden, um die XAML-Dateien in (Programmdateien)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\(SDK-Version)\Generic zu öffnen. Der Standardstil und die Standardvorlage für jedes Steuerelement werden in der Datei "generic.xaml " definiert. Sie finden die MediaTransportControls-Vorlage in generic.xaml, indem Sie nach "MediaTransportControls" suchen.

In den folgenden Abschnitten erfahren Sie, wie Sie mehrere der Hauptelemente der Transportsteuerelemente anpassen:

  • Slider: Ermöglicht Benutzern das Scrubbing durch ihre Medien und zeigt darüber hinaus den Fortschritt an.
  • CommandBar: Enthält alle Schaltflächen. Weitere Informationen finden Sie im Abschnitt "Anatomie" des MediaTransportControls-Referenzthemas.

Anpassen der Transportsteuerelemente

Wenn Sie nur die Darstellung von MediaTransportControls ändern möchten, können Sie eine Kopie des Standardsteuerelementstils und der Standardvorlage erstellen und dies ändern. Wenn Sie jedoch auch die Funktionalität des Steuerelements hinzufügen oder ändern möchten, müssen Sie eine neue Klasse erstellen, die von MediaTransportControls abgeleitet wird.

Erneute Vorlage des Steuerelements

So passen Sie Standardstil und Standardvorlage von MediaTransportControls an

  1. Kopieren Sie den Standardstil aus MediaTransportControls-Formatvorlagen und -vorlagen in ein ResourceDictionary in Ihrem Projekt.
  2. Weisen Sie der Formatvorlage einen x:Key-Wert zu, um ihn wie folgt zu identifizieren.
<Style TargetType="MediaTransportControls" x:Key="myTransportControlsStyle">
    <!-- Style content ... -->
</Style>
  1. Fügen Sie ihrer Benutzeroberfläche ein MediaPlayerElement mit MediaTransportControls hinzu.
  2. Legen Sie die Style-Eigenschaft des MediaTransportControls-Elements auf Ihre benutzerdefinierte Style-Ressource fest, wie hier gezeigt.
<MediaPlayerElement AreTransportControlsEnabled="True">
    <MediaPlayerElement.TransportControls>
        <MediaTransportControls Style="{StaticResource myTransportControlsStyle}"/>
    </MediaPlayerElement.TransportControls>
</MediaPlayerElement>

Weitere Informationen zum Ändern von Formatvorlagen und Vorlagen finden Sie unter Formatieren von Steuerelementen und Steuerelementvorlagen.

Erstellen eines abgeleiteten Steuerelements

Um die Funktionalität der Transportsteuerelemente hinzuzufügen oder zu ändern, müssen Sie eine neue Klasse erstellen, die von MediaTransportControls abgeleitet ist. Eine abgeleitete Klasse, die aufgerufen CustomMediaTransportControls wird, wird im Beispiel für Medientransportsteuerelemente und die verbleibenden Beispiele auf dieser Seite gezeigt.

So erstellen Sie eine neue Klasse, die von MediaTransportControls abgeleitet ist

  1. Fügen Sie Ihrem Projekt eine neue Klassendatei hinzu.
    • Wählen Sie in Visual Studio "Project > Add Class" aus. Das Dialogfeld Neues Element hinzufügen wird geöffnet.
    • Geben Sie im Dialogfeld "Neues Element hinzufügen" einen Namen für die Klassendatei ein, und klicken Sie dann auf "Hinzufügen". (Im Beispiel für Medientransportsteuerelemente heißt CustomMediaTransportControlsdie Klasse .)
  2. Ändern Sie den Klassencode so, dass er von der MediaTransportControls-Klasse abgeleitet wird.
public sealed class CustomMediaTransportControls : MediaTransportControls
{
}
  1. Kopieren Sie den Standardstil für MediaTransportControls in ein ResourceDictionary in Ihrem Projekt. Dies ist der Stil und die Vorlage, die Sie ändern. (Im Beispiel für Medientransportsteuerelemente wird ein neuer Ordner namens "Designs" erstellt, und eine ResourceDictionary-Datei namens "generic.xaml" wird hinzugefügt.)
  2. Ändern Sie den TargetType der Formatvorlage in den neuen benutzerdefinierten Steuerelementtyp. (Im Beispiel wird der TargetType in local:CustomMediaTransportControls.)
xmlns:local="using:CustomMediaTransportControls">
...
<Style TargetType="local:CustomMediaTransportControls">
  1. Legen Sie den DefaultStyleKey Ihrer benutzerdefinierten Klasse fest. Dies weist Ihre benutzerdefinierte Klasse an, eine Formatvorlage mit einem TargetType von local:CustomMediaTransportControlszu verwenden.
public sealed class CustomMediaTransportControls : MediaTransportControls
{
    public CustomMediaTransportControls()
    {
        this.DefaultStyleKey = typeof(CustomMediaTransportControls);
    }
}
  1. Fügen Sie Ihrem XAML-Markup ein MediaPlayerElement hinzu, und fügen Sie ihr die benutzerdefinierten Transportsteuerelemente hinzu. Beachten Sie, dass die APIs zum Ausblenden, Anzeigen, Deaktivieren und Aktivieren der Standardschaltflächen weiterhin mit einer angepassten Vorlage funktionieren.
<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>

Sie können nun das Steuerelementformat und die Vorlage ändern, um das Erscheinungsbild Ihres benutzerdefinierten Steuerelements zu aktualisieren, und den Steuerelementcode, um das Verhalten zu aktualisieren.

Arbeiten mit dem Überlaufmenü

Sie können MediaTransportControls-Befehlsschaltflächen in ein Überlaufmenü verschieben, sodass weniger häufig verwendete Befehle ausgeblendet werden, bis der Benutzer sie benötigt.

In der MediaTransportControls-Vorlage sind die Befehlsschaltflächen in einem CommandBar-Element enthalten. Die Befehlsleiste hat das Konzept der primären und sekundären Befehle. Die primären Befehle sind die Schaltflächen, die standardmäßig im Steuerelement angezeigt werden und immer sichtbar sind (es sei denn, Sie deaktivieren die Schaltfläche, blenden die Schaltfläche aus, oder es ist nicht genügend Platz vorhanden). Die sekundären Befehle werden in einem Überlaufmenü angezeigt, das angezeigt wird, wenn ein Benutzer auf die Schaltfläche mit den Auslassungspunkten (...) klickt. Weitere Informationen finden Sie im Artikel zu App-Leisten und Befehlsleisten .

Um ein Element aus den primären Befehlen der Befehlsleiste in das Überlaufmenü zu verschieben, müssen Sie die XAML-Steuerelementvorlage bearbeiten.

So verschieben Sie einen Befehl in das Überlaufmenü

  1. Suchen Sie in der Steuerelementvorlage das CommandBar-Element namens MediaControlsCommandBar.
  2. Fügen Sie dem XAML-Code für commandBar einen SecondaryCommands-Abschnitt hinzu. Platzieren Sie es nach dem schließenden Tag für 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>

  1. Um das Menü mit Befehlen zu füllen, schneiden Sie den XAML-Code für die gewünschten AppBarButton-Objekte aus, und fügen Sie sie aus dem PrimaryCommands-Element in die SecondaryCommands ein. In diesem Beispiel wird das PlaybackRateButton Überlaufmenü verschoben.

  2. Fügen Sie der Schaltfläche eine Beschriftung hinzu, und entfernen Sie die Formatierungsinformationen, wie hier gezeigt. Da das Überlaufmenü aus Textschaltflächen besteht, müssen Sie der Schaltfläche eine Textbezeichnung hinzufügen und auch die Formatvorlage entfernen, die die Höhe und Breite der Schaltfläche festlegt. Andernfalls wird sie im Überlaufmenü nicht ordnungsgemäß angezeigt.

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

Wichtig

Sie müssen die Schaltfläche weiterhin sichtbar machen und aktivieren, um sie im Überlaufmenü zu verwenden. In diesem Beispiel ist das PlaybackRateButton-Element nicht im Überlaufmenü sichtbar, es sei denn, die IsPlaybackRateButtonVisible-Eigenschaft ist true. Es ist nicht aktiviert, es sei denn, die IsPlaybackRateEnabled-Eigenschaft ist true. Das Festlegen dieser Eigenschaften wird im vorherigen Abschnitt gezeigt.

Hinzufügen einer benutzerdefinierten Schaltfläche

Ein Grund zum Anpassen von MediaTransportControls ist das Hinzufügen eines benutzerdefinierten Befehls zum Steuerelement. Unabhängig davon, ob Sie ihn als primärer Befehl oder sekundären Befehl hinzufügen, ist das Verfahren zum Erstellen der Befehlsschaltfläche und das Ändern des Verhaltens identisch. Im Beispiel für Medientransportsteuerelemente wird den primären Befehlen eine Schaltfläche "Bewertung" hinzugefügt.

So fügen Sie eine benutzerdefinierte Befehlsschaltfläche hinzu

  1. Erstellen Sie ein AppBarButton-Objekt, und fügen Sie es der CommandBar in der Steuerelementvorlage hinzu.
<AppBarButton x:Name="LikeButton"
              Icon="Like"
              Style="{StaticResource AppBarButtonStyle}"
              MediaTransportControlsHelper.DropoutOrder="3"
              VerticalAlignment="Center" />

Sie müssen es dem CommandBar-Element an der entsprechenden Position hinzufügen. (Weitere Informationen finden Sie im Abschnitt "Arbeiten mit dem Überlaufmenü".) Wie sie in der Benutzeroberfläche positioniert wird, hängt davon ab, wo sich die Schaltfläche im Markup befindet. Wenn diese Schaltfläche als letztes Element in den primären Befehlen angezeigt werden soll, fügen Sie sie am Ende der Liste der primären Befehle hinzu.

Sie können auch das Symbol für die Schaltfläche anpassen. Weitere Informationen finden Sie in der Referenz zu AppBarButton.

  1. Rufen Sie in der OnApplyTemplate-Außerkraftsetzung die Schaltfläche aus der Vorlage ab, und registrieren Sie einen Handler für das Click-Ereignis. Dieser Code wird in die CustomMediaTransportControls Klasse eingefügt.
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();
    }

    //...
}
  1. Fügen Sie dem Click-Ereignishandler Code hinzu, um die Aktion auszuführen, die auftritt, wenn auf die Schaltfläche geklickt wird. Hier sehen Sie den vollständigen Code für die Klasse.
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);
        }
    }
}

Ändern des Schiebereglers

Das "seek"-Steuerelement der MediaTransportControls wird von einem Slider-Element bereitgestellt. Eine Möglichkeit zum Anpassen besteht darin, die Granularität des Suchverhaltens zu ändern.

Der Standardmäßige Suchschieberegler ist in 100 Teile unterteilt, sodass das Suchverhalten auf diese vielen Abschnitte beschränkt ist. Sie können die Granularität des Suchschiebereglers ändern, indem Sie den Schieberegler aus der visuellen XAML-Struktur in Ihrem MediaOpened-Ereignishandler auf "MediaPlayerElement.MediaPlayer" abrufen. In diesem Beispiel wird gezeigt, wie Sie VisualTreeHelper verwenden, um einen Verweis auf den Schieberegler abzurufen, und ändern Sie dann die Standardschritthäufigkeit des Schiebereglers von 1 % auf 0,1 % (1000 Schritte), wenn das Medium länger als 120 Minuten ist. Das MediaPlayerElement heißt 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;
  }
}