Tworzenie niestandardowych kontrolek transportu

Element MediaPlayerElement ma dostosowywalne kontrolki transportu XAML w celu zarządzania kontrolą zawartości audio i wideo w aplikacji systemu Windows. W tym miejscu pokazano, jak dostosować szablon MediaTransportControls. Pokażemy, jak pracować z menu rozwijanym, dodać przycisk niestandardowy i zmodyfikować suwak.

Ważne interfejsy API: MediaPlayerElement, MediaPlayerElement.AreTransportControlsEnabled, MediaTransportControls

Przed rozpoczęciem należy zapoznać się z klasami MediaPlayerElement i MediaTransportControls. Aby uzyskać więcej informacji, zobacz Przewodnik sterowania MediaPlayerElement.

Kiedy należy dostosować szablon?

MediaPlayerElement ma wbudowane kontrolki transportu, które są zaprojektowane tak, aby działały dobrze bez modyfikacji w większości aplikacji do odtwarzania wideo i audio. Są one dostarczane przez klasę MediaTransportControls i zawierają przyciski odtwarzania, zatrzymywania i nawigowania po nośniku, dopasowują głośność, przełączają pełny ekran, rzutują do drugiego urządzenia, włączają podpisy, przełączają ścieżki dźwiękowe i dostosowują częstotliwość odtwarzania. MediaTransportControls ma właściwości, które pozwalają kontrolować, czy każdy przycisk jest wyświetlany i włączony. Można również ustawić właściwość IsCompact , aby określić, czy kontrolki są wyświetlane w jednym wierszu, czy dwóch.

Jednak mogą istnieć scenariusze, w których trzeba jeszcze bardziej dostosować wygląd kontrolki lub zmienić jego zachowanie. Oto kilka przykładów:

• Zmień ikony, zachowanie suwaka i kolory.
• Przenieś rzadziej używane przyciski poleceń do menu ukrytego.
• Zmień kolejność, w jakiej polecenia znikają podczas zmiany rozmiaru kontrolki.
• Podaj przycisk polecenia, który nie znajduje się w zestawie domyślnym.

Wygląd kontrolki można dostosować, modyfikując szablon domyślny. Aby zmodyfikować zachowanie kontrolki lub dodać nowe polecenia, możesz utworzyć niestandardową kontrolkę pochodzącą z kontrolek MediaTransportControls.

Struktura szablonu

ControlTemplate jest częścią stylu domyślnego. Możesz skopiować ten domyślny styl do projektu, aby go zmodyfikować. Element ControlTemplate jest podzielony na sekcje podobne do innych szablonów kontrolek XAML.

• Pierwsza sekcja szablonu zawiera definicje stylu dla różnych składników kontrolek MediaTransportControls.
• Druga sekcja definiuje różne stany wizualizacji używane przez kontrolery MediaTransportControls.
• Trzecia sekcja zawiera Grid, który łączy różne elementy MediaTransportControls i definiuje sposób rozmieszczenia komponentów.

W poniższych sekcjach dowiesz się, jak dostosować kilka głównych elementów kontroli transportu:

• Suwak: umożliwia użytkownikowi przeglądanie multimediów i wyświetla postęp
• Pasek poleceń: zawiera wszystkie przyciski. Aby uzyskać więcej informacji, zobacz sekcję Anatomia tematu referencyjnego MediaTransportControls.

Dostosowywanie kontrolek transportu

Jeśli chcesz zmodyfikować tylko wygląd kontrolek MediaTransportControls, możesz utworzyć kopię domyślnego stylu kontrolki i szablonu i zmodyfikować go. Jeśli jednak chcesz również dodać lub zmodyfikować funkcjonalność kontrolki, musisz utworzyć nową klasę pochodzącą z kontrolek MediaTransportControls.

Ponowne szablonowanie kontrolki

Aby dostosować domyślny styl i szablon MediaTransportControls

1. Skopiuj styl domyślny ze stylów i szablonów MediaTransportControls do elementu ResourceDictionary w projekcie.
2. Nadaj stylowi wartość x:Key, aby ją zidentyfikować, w następujący sposób.

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

3. Dodaj element MediaPlayerElement za pomocą kontrolek MediaTransportControls do interfejsu użytkownika.
4. Ustaw właściwość Style elementu MediaTransportControls na niestandardowy zasób stylu, jak pokazano tutaj.

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

Aby uzyskać więcej informacji na temat modyfikowania stylów i szablonów, zobacz Kontrolki stylów i Szablony kontrolek.

Utwórz kontrolkę pochodną

Aby dodać lub zmodyfikować funkcje kontrolek transportu, należy utworzyć nową klasę pochodzącą z kontrolek MediaTransportControls. Klasa pochodna o nazwie CustomMediaTransportControls jest wyświetlana w przykładzie Media Transport Controls i pozostałych przykładach na tej stronie.

Aby utworzyć nową klasę pochodzącą z klasy MediaTransportControls

1. Dodaj nowy plik klasy do projektu.
   • W programie Visual Studio wybierz pozycję Project Add Class (Dodaj klasę projektu > ). Zostanie otwarte okno dialogowe Dodawanie nowego elementu.
   • W oknie dialogowym Dodawanie nowego elementu wprowadź nazwę pliku klasy, a następnie kliknij przycisk Dodaj. (W przykładzie Media Transport Controls klasa ma nazwę CustomMediaTransportControls.)
2. Zmodyfikuj kod klasy, aby pochodził z klasy MediaTransportControls.

public sealed class CustomMediaTransportControls : MediaTransportControls
{
}

3. Skopiuj domyślny styl elementu MediaTransportControls do elementu ResourceDictionary w projekcie. Jest to styl i szablon, który należy zmodyfikować. (W przykładzie Media Transport Controls zostanie utworzony nowy folder o nazwie "Motywy", a do niego zostanie dodany plik ResourceDictionary o nazwie generic.xaml).
4. Zmień typ TargetType stylu na nowy niestandardowy typ kontrolki. (W przykładzie parametr TargetType jest zmieniany na local:CustomMediaTransportControls.)

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

5. Ustaw DefaultStyleKey dla swojej klasy niestandardowej. Ta instrukcja powoduje, że klasa niestandardowa korzysta ze stylu z ustawionym TargetType na local:CustomMediaTransportControls.

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

6. Dodaj element MediaPlayerElement do znaczników XAML i dodaj do niego niestandardowe kontrolki transportu. Należy pamiętać, że interfejsy API do ukrywania, pokazywania, wyłączania i włączania przycisków domyślnych nadal działają z dostosowanym szablonem.

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

Teraz możesz zmodyfikować styl kontrolki i szablon w celu zaktualizowania wyglądu kontrolki niestandardowej oraz kodu sterującego w celu zaktualizowania jego zachowania.

Praca z menu rozwijanym

Przyciski poleceń MediaTransportControls można przenieść do menu dodatkowego, aby mniej powszechnie używane polecenia były ukryte, dopóki użytkownik ich nie potrzebuje.

W szablonie MediaTransportControls przyciski poleceń znajdują się w elemecie CommandBar . Pasek poleceń zawiera pojęcie podstawowych i pomocniczych poleceń. Podstawowe polecenia to przyciski, które są domyślnie wyświetlane w kontrolce i są zawsze widoczne (chyba że przycisk zostanie wyłączony, ukryty lub gdy brakuje miejsca). Polecenia pomocnicze są wyświetlane w menu rozwijanym, które pojawia się po kliknięciu przez użytkownika przycisku z wielokropkiem. Aby uzyskać więcej informacji, zobacz artykuł Paski aplikacji i paski poleceń .

Aby przenieść element z podstawowych poleceń paska poleceń do menu przepełnienia, należy edytować szablon kontrolki XAML.

Aby przenieść polecenie do menu przepełnienia:

1. W szablonie kontrolki znajdź element CommandBar o nazwie MediaControlsCommandBar.
2. Dodaj sekcję SecondaryCommands do kodu XAML dla paska poleceń. Umieść go po zamykającym tagu dla elementu 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. Aby wypełnić menu poleceniami, wytnij i wklej kod XAML dla żądanych obiektów AppBarButton z pola PrimaryCommands do SecondaryCommands. W tym przykładzie przenosimy element PlaybackRateButton do menu przepełnienia.

4. Dodaj etykietę do przycisku i usuń informacje o stylu, jak pokazano tutaj. Ponieważ menu przepełnienia składa się z przycisków tekstowych, musisz dodać etykietę tekstową do przycisku, a także usunąć styl ustawiający wysokość i szerokość przycisku. W przeciwnym razie nie będzie ona wyświetlana poprawnie w menu nadmiarowym.

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

Dodawanie przycisku niestandardowego

Jednym z powodów, dla których warto dostosować kontrolkę MediaTransportControls, jest dodanie niestandardowego polecenia do kontrolki. Niezależnie od tego, czy dodajesz go jako polecenie podstawowe, czy pomocnicze polecenie, procedura tworzenia przycisku polecenia i modyfikowania jego zachowania jest taka sama. W przykładzie Media Transport Controls do podstawowych poleceń zostanie dodany przycisk "ocena".

Aby dodać przycisk polecenia niestandardowego

1. Utwórz obiekt AppBarButton i dodaj go do paska poleceń w szablonie kontrolki.

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

Musisz dodać go do paska poleceń w odpowiedniej lokalizacji. (Aby uzyskać więcej informacji, zobacz sekcję Praca z menu przepełnienia.) Sposób, w jaki jest pozycjonowany w interfejsie użytkownika, zależy od tego, gdzie przycisk jest umieszczony w znaczniku. Jeśli na przykład chcesz, aby ten przycisk był wyświetlany jako ostatni element w podstawowych poleceniach, dodaj go na samym końcu listy podstawowych poleceń.

Możesz również dostosować ikonę przycisku. Aby uzyskać więcej informacji, zobacz dokumentację AppBarButton .

2. W zastąpieniu OnApplyTemplate pobierz przycisk z szablonu i zarejestruj procedurę obsługi dla zdarzenia Click . Ten kod jest w CustomMediaTransportControls klasie .

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. Dodaj kod do procedury obsługi zdarzeń kliknięcia, aby wykonać akcję wykonywaną po kliknięciu przycisku. Oto kompletny kod dla klasy.

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);
        }
    }
}

Modyfikowanie suwaka

W kontrolkach MediaTransportControls element typu Slider obsługuje funkcję "wyszukiwania". Jednym ze sposobów dostosowywania jest zmiana poziomu szczegółowości zachowania przeszukiwania.

Domyślny suwak wyszukiwania jest podzielony na 100 części, więc zachowanie wyszukiwania jest ograniczone do tych wielu sekcji. Stopień szczegółowości suwaka wyszukiwania można zmienić, uzyskując suwak z drzewa wizualnego XAML w programie obsługi zdarzeń MediaOpened w elemencie MediaPlayerElement.MediaPlayer. W tym przykładzie pokazano, jak za pomocą VisualTreeHelper uzyskać odwołanie do suwaka, a następnie zmienić domyślną częstotliwość kroków suwaka z 1% na 0,1% (1000 kroków), jeśli materiał wideo jest dłuższy niż 120 minut. Element MediaPlayerElement nosi nazwę 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;
  }
}

Powiązane artykuły

• odtwarzania multimediów