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

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

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

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

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

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

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

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

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

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

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

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

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

• ползунок: позволяет пользователю перемещаться по медиаконтенту и также отображает ход воспроизведения.
• 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 ресурс вашего настраиваемого стиля, как показано здесь.

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

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

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

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

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

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

public sealed class CustomMediaTransportControls : MediaTransportControls
{
}

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

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

5. Задайте ключ стиля по умолчанию для вашего пользовательского класса. Это указывает пользовательскому классу использовать Style с 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 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;
  }
}

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

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