自定义 MediaTrasportControls 不可见答案

【问题标题】：Custom MediaTrasportControls aren't visible自定义 MediaTrasportControls 不可见
【发布时间】：2019-09-02 19:29:40
【问题描述】：

我需要在 MediaPlayerElement 中实现自定义控件。我已经关注"Create custom transport controls" Microsoft guide 并尝试自己一步一步地制作所有内容，甚至公然从示例应用程序中复制代码。但这些都不起作用。

我只看到没有任何控件的 MediaPlayerElement。然后我试着少走一点。我创建了一个新项目并尝试自己复制示例应用程序。好吧，它也失败了。我重新意识到我在某个地方有错误，但我看不到那里。三重检查所有内容，甚至将默认样式复制到我的“自定义”样式中。但是，仍然没有面板。

控制类：

namespace Kinopub.UI.Utilities
{
    public sealed class CustomMediaTransportControls : MediaTransportControls
    {
        public event EventHandler<EventArgs> Liked;

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

        protected override void OnApplyTemplate()
        {
            // This is where you would get your custom button and create an event handler for its click method.
            Button 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
            Liked?.Invoke(this, EventArgs.Empty);
        }
    }
}

控制资源字典：(full code)

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

    <!-- Default style for MediaTransportControls -->
    <Style TargetType="local:CustomMediaTransportControls">
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="FlowDirection" Value="LeftToRight" />
        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
        <Setter Property="IsTextScaleFactorEnabled" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:CustomMediaTransportControls">
                    <Grid x:Name="RootGrid" Background="Transparent">

                        ...
                            A whole lot of code, copied from generic.xml
                        ...

                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

媒体播放器页面：

<Page
    x:Class="Kinopub.UI.Views.MediaPlayerPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Kinopub.UI.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:vms="using:Kinopub.UI.ViewModels"
    xmlns:utils="using:Kinopub.UI.Utilities"
    mc:Ignorable="d"

    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Page.DataContext>
        <vms:MediaPlayerVM/>
    </Page.DataContext>
    <Grid>
        <MediaPlayerElement
            x:Name="PlayerElement"
            Source="{Binding VideoMediaSource}"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Bottom"
        AreTransportControlsEnabled="True"
        >
            <MediaPlayerElement.TransportControls>
                <utils:CustomMediaTransportControls>
                </utils:CustomMediaTransportControls>
            </MediaPlayerElement.TransportControls>
        </MediaPlayerElement>
    </Grid>
</Page>

【问题讨论】：

标签： c# xaml uwp

【解决方案1】：

通过检查您的代码，您需要注意两件事。

将Kinopub.UI.Utilities下创建的资源字典添加到App.xaml，如：

<Application ...>
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ms-appx:///Kinopub/UI/Utilities/resource_file_name.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

将名为 LikeButton 的 AppBarButton 添加到您的 ControlTemplate，如下所示：

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

最好的问候。

【讨论】：