UWP 包括媒体播放器传输栏作为命令栏的一部分？

Question

我正在尝试为媒体播放器应用程序创建自定义媒体传输控件，我可以在其中添加自己的按钮和功能。我唯一需要的标准 MediaTransportControl 是 SeekBar.

我试过摆弄字典，但对于我想要实现的好处来说，它的方式太复杂了。有没有简单的方法可以做到这一点，还是我应该放弃？

谢谢！

Answer 1

有两种方法可以将自定义功能添加到媒体播放器的控件中。

Custom Transport Controls ：您可以在其中编辑模板的样式，或添加额外的按钮并为其添加功能，如果您不想要，也可以删除现有按钮或折叠它们他们。您甚至可以直接从传输控件设置某些按钮的可见性，而无需使用 IsZoomButtonVisible 等属性的样式
不要使用 sdk 的内置传输控件并将 MediaPlayerElement 控件的 AreTransportControlsEnabled 设置为 false，然后创建您自己的用户控件来控制媒体，如果您是初学者，这实际上更难。

我会向您推荐第一个选项，只需按照文档一步一步进行，一旦您了解了所有这些是如何组合在一起并一起工作的基础知识，您将能够轻松地向您的网站添加许多自定义按钮控制。你不需要弄乱样式，只需将按钮添加到样式的命令栏，然后向其添加一个点击处理程序，所有这些都记录在我上面提供给你的 link 中，逐步尝试并有问题的地方，请继续在这里提出质量问题。

Answer 2

好吧.....我为此摆弄了几个小时。我已经从 touseefbsb 阅读了上面的 link 并逐行阅读了 CustomMediaTransportControl 示例。

我创建了一个字典，并从示例中逐字复制字典：

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MultiVid">

<!--This is the style for a custom Media Transport Control. We are taking the default control and simply tweaking it to fit our needs.
The default template can be found here: C:\Program Files (x86)\Windows Kits\DesignTime\CommonConfiguration\Neutral\UAP.0.10069.0\Generic
Simply take the portion of code that corresponds to the MediaTransportControl and bring it in to your app just like we have done in this sample-->

<Style TargetType="local:CustomMediaTransportControls">
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="FlowDirection" Value="LeftToRight" />
    <Setter Property="UseSystemFocusVisuals" Value="True" />
    <Setter Property="IsTextScaleFactorEnabled" Value="False" />
    <Setter Property="Template">

  ----- etc..... it's a long file but it's the exact copy of the "generic.xaml" file of the Sample except for the beginning where I used xmlns:local="using:MultiVid" as my solution is called MultiVid.

    </Style>
   </ResourceDictionary>

然后，我按照教程创建了 Class：

namespace MultiVid
{
public sealed class CustomMediaTransportControls : MediaTransportControls
{
    public event EventHandler<EventArgs> Moins10click;

    public CustomMediaTransportControls()
    {
        this.DefaultStyleKey = typeof(CustomMediaTransportControls);
    }

    protected override void OnApplyTemplate()
    {
        // Find the custom button and create an event handler for its Click event.
        var Moins10Button = GetTemplateChild("Moins10") as Button;
        Moins10Button.Click += Moins10Button_Click;
        base.OnApplyTemplate();

    }

    private void Moins10Button_Click(object sender, RoutedEventArgs e)
    {
        var handler = Moins10click;
        if (handler != null)
    {
        handler(this, EventArgs.Empty);
    }
    }
}
}

最后是我的主页 Xaml:

<Page
x:Class="MultiVid.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="using:MultiVid"
mc:Ignorable="d"
Loaded="initkbd"
Unloaded="unloadkbd">

 <Grid x:Name="imggrid" Background="Black" BorderBrush="Black" >

    <MediaPlayerElement x:Name="mediaPlayerElement" AutoPlay="True" Height="Auto" Width="Auto" AreTransportControlsEnabled="True" RequestedTheme="Dark" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <MediaPlayerElement.TransportControls>
            <local:CustomMediaTransportControls IsCompact="False"
                                                IsZoomButtonVisible="True"
                                                IsZoomEnabled="True"
                                                IsPlaybackRateButtonVisible="True"
                                       IsEnabled="True">
            </local:CustomMediaTransportControls>
        </MediaPlayerElement.TransportControls>
    </MediaPlayerElement>

</Grid>


</Page>

当我将上述代码与我的 C# 代码一起使用时，我根本看不到 TransportControl。如果我注释掉该部分，我会看到传输控制。

5个小时后，我还是没明白...求救！

Answer 3

好的，知道了！

食谱如下：

添加一个单独的 XAML 文件来保存新传输栏的资源字典。将 CustomMediaTransport 示例中的文件复制到其中。确保将 x:local = "using:..." 更改为您自己的项目名称 space。

在 XAML 代码的命令栏部分添加您想要的按钮（您将在那里看到其他命令栏按钮。自定义命令栏按钮的格式为：

  <AppBarButton x:Name='Plus500Button'
          Label="Very Long Skip Forward"
          VerticalAlignment="Center"
          Style='{StaticResource AppBarButtonStyle}'>
      <AppBarButton.Icon>
          <BitmapIcon UriSource="put in here the asset for your button icon"/>
      </AppBarButton.Icon>
  </AppBarButton>

在单独的 CS 文件中添加新按钮的代码。将 yournamespace 替换为您的解决方案名称 space.

namespace yournamespace
{

public sealed class CustomMediaTransportControls : MediaTransportControls
{

//Add an eventhandler for each button you added
public event EventHandler<EventArgs> Plus500;

public CustomMediaTransportControls()
{
    this.DefaultStyleKey = typeof(CustomMediaTransportControls);
}


//Add an override for each button you created in the following format:
protected override void OnApplyTemplate()
{
    Button Plus500Button = GetTemplateChild("Plus500Button") as Button;
    Plus500Button.Click += Plus500Button_Click;
}

//To raise an event when the button is clicked, add the following code for each button you added:
private void Plus500B_Click(object sender, RoutedEventArgs e)
{            
    Plus500?.Invoke(this, EventArgs.Empty);
}

最后，在您的 XAML 代码中按以下方式使用新的自定义传输栏：

    <MediaPlayerElement x:Name="mediaPlayerElement" 
                                Grid.ColumnSpan="2" 
                                Grid.RowSpan="4" 
                                AutoPlay="True"  
                                AreTransportControlsEnabled="True"             
         <MediaPlayerElement.TransportControls >
            <local:CustomMediaTransportControls IsCompact="False"
                                       IsPlaybackRateButtonVisible="True"
                                       IsEnabled="True"
                                       Plus500="Plus500"   <!-- Use the name you added in the EventHandler you added for the cuscom command bar

            </local:CustomMediaTransportControls>
        </MediaPlayerElement.TransportControls>

瞧瞧！鲍勃是你妈妈的弟弟！

UWP 包括媒体播放器传输栏作为命令栏的一部分？

UWP including mediaplayer transport bar as part of commandbar?

c#

commandbar

media-player

uwp