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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Скопируйте стиль по умолчанию из стилей и шаблонов MediaTransportControls в resourceDictionary в проекте.
2. Присвойте стилю значение x:Key, чтобы определить его, как показано ниже.

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

3. Добавьте MediaPlayerElement с MediaTransportControls в пользовательский интерфейс.
4. Задайте свойству Style элемента MediaTransportControls настраиваемый ресурс Style, как показано здесь.

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

Дополнительные сведения об изменении стилей и шаблонов см. в разделе "Стилизация элементов управления " и "Шаблоны элементов управления".

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

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

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

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

public sealed class CustomMediaTransportControls : MediaTransportControls
{
}

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

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

5. Задайте DefaultStyleKey пользовательского класса. Это указывает пользовательскому классу использовать стиль с targetType local:CustomMediaTransportControls.

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

6. Добавьте 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.

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

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

4. Добавьте метку в кнопку и удалите сведения о стилизации, как показано здесь. Так как меню переполнения состоит из текстовых кнопок, необходимо добавить текстовую метку в кнопку, а также удалить стиль, который задает высоту и ширину кнопки. В противном случае в меню переполнения он не будет отображаться правильно.

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

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

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

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

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

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

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

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

2. В переопределении 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();
    }

    //...
}

3. Добавьте код в обработчик событий 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);
        }
    }
}

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

Элемент управления "seek" MediaTransportControls предоставляется элементом Slider . Одним из способов ее настройки является изменение детализации поведения поиска.

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

Связанные статьи

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