Создание пользовательских элементов управления транспортировкой

Статья
07/13/2023

MediaPlayerElement содержит настраиваемые элементы управления транспортировки XAML для управления аудио- и видео-содержимым в приложении для Windows. Здесь мы покажем, как настроить шаблон MediaTransportControls. Мы покажем, как работать с меню переполнения, добавить пользовательскую кнопку и изменить ползунок.

Важные API: MediaPlayerElement, MediaPlayerElement.AreTransportControlsEnabled и MediaTransportControls

Перед началом необходимо ознакомиться с классами MediaPlayerElement и MediaTransportControls. Подробнее см. в руководстве по элементу управления MediaPlayerElement.

Совет

Примеры в этом разделе основаны на Примере элементов управления транспортировкой мультимедиа. Вы можете скачать пример для просмотра и запуска полного кода.

Примечание

MediaPlayerElement доступен только в Windows 10 версии 1607 и более поздних. При разработке приложения для более ранней версии Windows 10 потребуется использовать MediaElement. Все примеры на этой странице также совместимы с MediaElement.

Когда нужно настраивать шаблон?

MediaPlayerElement обладает встроенными элементами управления транспортировкой, которые без каких-либо модификаций хорошо совместимы с большинством приложений для воспроизведения аудио и видео. Они предоставляются классом MediaTransportControls и включают кнопки для воспроизведения, остановки и навигации по мультимедиа, регулировки громкости, переключения полноэкранного режима, приведения к второму устройству, включения субтитров, переключения звуковых дорожек и настройки скорости воспроизведения. Класс MediaTransportControls имеет свойства, которые позволят вам отслеживать, отображается ли каждая кнопка и включена ли она. Можно также задать свойство IsCompact, чтобы указать, отображаются ли элементы управления в одну строку или в две.

Однако возможны сценарии, при которых необходимо настроить внешний вид элемента управления или изменить его поведение. Вот несколько примеров:

Изменить значки, поведение ползунка и цвета.
Переместить не часто используемые кнопки команд в меню переполнения.
Изменить порядок, в котором команды раскрываются при изменении размеров элемента управления.
Укажите командную кнопку, которая не находится в наборе по умолчанию.

Примечание

Кнопки на экране будут раскрываться из встроенных элементов управления транспортировкой в заранее определенном порядке, если на экране недостаточно места. Чтобы изменить этот порядок или разместить команды, не умещающиеся в меню переполнения, вам потребуется настроить элементы управления.

Вы можете настроить вид элемента управления с помощью изменения стандартного шаблона. Чтобы изменять поведение элемента управления либо добавить новые команды, вы можете создать пользовательский элемент управления, который является производным от MediaTransportControls.

Совет

Настраиваемые шаблоны элементов управления — полезная функциональность платформы XAML, но необходимо принимать в расчет их последствия. При настройке шаблон становится статической частью приложения и потому не получает обновления платформы, которые Майкрософт вносит в шаблон. Если обновление шаблона выполнено компанией Майкрософт, вы должны взять новый шаблон и заново изменить его, чтобы воспользоваться преимуществами обновленного шаблона.

Структура шаблона

Элемент ControlTemplate входит в состав стиля по умолчанию. Вы можете скопировать этот стиль по умолчанию в ваш проект и изменить его. Шаблон ControlTemplate состоит из разделов, которые аналогичны другим шаблонам элементов управления XAML.

Первый раздел шаблона содержит определения Style для различных компонентов MediaTransportControls.
Во втором разделе определены различные визуальные состояния, используемые в MediaTransportControls.
Третий раздел содержит сетку Grid, которая объединяет различные элементы MediaTransportControls и определяет расположение компонентов относительно друг друга.

Примечание

Дополнительные сведения об изменении шаблонов см. в разделе Шаблоны элементов управления. Вы можете использовать текстовый редактор или аналогичные редакторы в интегрированной среде разработки, чтобы открыть файлы XAML в папке (Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\(версия пакета SDK)\Generic. Стиль и шаблон по умолчанию для каждого элемента управления определяются в файле generic.xaml. Чтобы найти шаблон MediaTransportControls в файле generic.xaml, используйте строку поиска "MediaTransportControls".

В следующих разделах вы научитесь настраивать ряд основных элементов управления транспортировкой:

Slider: позволяет пользователю вручную управлять воспроизведением мультимедиа, а также показывает ход выполнения операции;
CommandBar: содержит все необходимые кнопки. Дополнительные сведения см. в разделе "Анатомия" справочного раздела по MediaTransportControls.

Настройка элементов управления транспортировкой

Если вы хотите изменить только вид MediaTransportControls, вы можете просто создать копию стиля и шаблона элемента управления по умолчанию и затем изменить ее. Однако если вы хотите добавить или изменить функционал элемента управления, необходимо создать новый класс, производный от MediaTransportControls.

Изменение шаблона элемента управления

Настройка стандартного стиля и шаблона MediaTransportControls

Скопируйте стиль по умолчанию из раздела "Стили и шаблоны MediaTransportControls" в класс ResourceDictionary в своем проекте.
Для определения стиля присвойте ему значение x:Key, как показано далее.

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

Добавьте MediaPlayerElement с MediaTransportControls в пользовательский интерфейс.
Укажите для свойства Style элемента MediaTransportControls ваш пользовательский ресурс Style, как показано ниже.

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

Подробнее об изменении стилей и шаблонов см. в статьях Настройка стиля элементов управления и Шаблоны элементов управления.

Создание производного элемента управления

Чтобы добавить или изменить функционал элементов управления транспортировкой, необходимо создать новый класс, производный от MediaTransportControls. Производный класс под названием CustomMediaTransportControls показан в примере Media Transport Controls и других примерах на этой странице.

Создание нового класса, производного от MediaTransportControls

Добавьте новый файл класса в проект.
- В Visual Studio выберите Проект > Добавить класс. Откроется диалоговое окно Добавление нового элемента.
- В диалоговом окне "Добавление нового элемента" введите имя файла класса и нажмите кнопку "Добавить". (В примере Media Transport Controls класс имеет имя CustomMediaTransportControls.)
Измените код класса, чтобы он был производным от класса MediaTransportControls.

public sealed class CustomMediaTransportControls : MediaTransportControls
{
}

Скопируйте стиль по умолчанию для MediaTransportControls в класс ResourceDictionary вашего проекта. Это стиль и шаблон, которые вы изменяете. (В примере Media Transport Controls создается новая папка с именем Themes и в нее добавляется файл ResourceDictionary с именем generic.xaml.)
Измените значение свойства TargetType стиля на новый тип пользовательского элемента управления. (В примере значение TargetType меняется на local:CustomMediaTransportControls.)

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

Задайте значение свойства DefaultStyleKey своего пользовательского класса. Это указывает вашему пользовательскому классу использовать стиль со свойством TargetType, равным local:CustomMediaTransportControls.

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

Добавьте MediaPlayerElement к разметке XAML, а затем добавьте к ней пользовательские элементы управления транспортировкой. Обратите внимание, что API для скрытия, отображения, отключения и включения кнопок по умолчанию по-прежнему работают с пользовательским шаблоном.

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

Теперь вы можете изменить стиль и шаблон элемента управления для обновления внешнего вида вашего пользовательского элемента управления и управляющего кода для обновления его поведения.

Вы можете переместить кнопки команд MediaTransportControls в меню переполнения — таким образом, не часто используемые команды будут скрыты до тех пор, пока пользователю они не понадобятся.

В шаблоне MediaTransportControls кнопки команд содержатся в элементе CommandBar. Панель команд базируется на концепции главных и вспомогательных команд. Основные команды — это кнопки, которые отображаются в элементе управления по умолчанию и всегда видны (если не отключить или не скрыть кнопку, либо если недостаточно места). Вспомогательные команды находятся в меню переполнения, которое отображается, когда пользователь нажимает на кнопку с многоточием (…) Подробнее см. в статье, посвященной панели приложения и панели команд.

Чтобы переместить элемент из раздела главных команд панели команд в меню переполнения, необходимо изменить шаблон элемента управления XAML.

Перемещение команды в меню переполнения

В шаблоне элемента управления найдите элемент CommandBar с именем MediaControlsCommandBar.
Добавьте раздел SecondaryCommands к коду XAML элемента CommandBar. Поместите его после закрывающего тега для 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>

Для заполнения меню командами нужно вырезать и вставить XAML для нужных объектов AppBarButton с PrimaryCommands в SecondaryCommands. В этом примере мы перемещаем PlaybackRateButton в меню переполнения.
Добавьте подпись к кнопке и удалите информацию о стиле, как показано ниже. Поскольку меню переполнения состоит из кнопок текста, вы должны добавить текстовую подпись к кнопке, а также удалить стиль, который задает высоту и ширину кнопки. В противном случае она не будет правильно отображаться в меню переполнения.

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

Важно!

Вы должны сделать кнопку видимой и включить ее, чтобы использовать ее в меню переполнения. В этом примере элемент PlaybackRateButton является невидимым в меню переполнения, если свойство IsPlaybackRateButtonVisible не имеет значение true. Она не будет включена, если свойство IsPlaybackRateEnabled не имеет значение true. Установка этих свойств была показана в предыдущем разделе.

Добавление пользовательской кнопки

Одной из причин, по которой может потребоваться настройка MediaTransportControls, является добавление пользовательской команды к элементу управления. Независимо от того, добавляете ли вы ее как основную команду или как второстепенную, процедуры создания кнопки команды и изменения ее поведение одинаковы. В примере Media Transport Controls кнопка оценки добавляется к основным командам.

Добавление пользовательской кнопки команды

Создайте объект AppBarButton и добавьте его в CommandBar в шаблоне элемента управления.

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

Добавьте его в CommandBar в соответствующем месте. (См. подробнее о работе с меню переполнения.) Его расположение в пользовательском интерфейсе определяется положением кнопки в разметке. Например, если требуется, чтобы эта кнопка отображалась в виде последнего элемента в основных командах, добавьте его в самом конце списка этих команд.

Можно также настроить значок для кнопки. См. подробнее в справочнике по AppBarButton.

В переопределении метода OnApplyTemplate получите кнопку из шаблона и зарегистрируйте обработчик для события Click этой кнопки. Этот код перейдет в класс CustomMediaTransportControls.

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

    //...
}

Добавьте код в обработчик события Click, который будет выполнять действия, происходящие при нажатии кнопки. Ниже приведен полный код класса.

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

Изменение ползунка

Навигация в MediaTransportControls обеспечивается элементом Slider. Один из способов его настройки — изменение точности навигации.

По умолчанию ползунок поиска состоит из 100 частей, следовательно, поведение поиска ограничено данным количеством частей. Вы можете изменить точность навигации ползунка, получив элемент Slider из визуального дерева XAML в обработчике событий MediaOpened в MediaPlayerElement.MediaPlayer. В этом примере показано, как использовать VisualTreeHelper для получения ссылки на элемент Slider, а затем изменить стандартный шаг перемещения ползунка с 1 % до 0,1 % (1000 шагов), если продолжительность мультимедиа превышает 120 минут. Элемент MediaPlayerElement имеет имя 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;
  }
}

Воспроизведение мультимедиа

Создание пользовательских элементов управления транспортировкой

Когда нужно настраивать шаблон?

Структура шаблона

Настройка элементов управления транспортировкой

Изменение шаблона элемента управления

Создание производного элемента управления

Работа с меню переполнения

Добавление пользовательской кнопки

Изменение ползунка

Обратная связь

Дополнительные ресурсы

Создание пользовательских элементов управления транспортировкой

Когда нужно настраивать шаблон?

Структура шаблона

Настройка элементов управления транспортировкой

Изменение шаблона элемента управления

Создание производного элемента управления

Работа с меню переполнения

Добавление пользовательской кнопки

Изменение ползунка

Похожие статьи

Обратная связь

Дополнительные ресурсы