媒体播放器元素初始化后如何将焦点设置到 Play/Pause 按钮？

Question

我正在使用 MediaPlayerElement，并添加一个 TransportControls。

默认情况下，播放器初始化后焦点始终在音量按钮上。

现在我希望在播放器初始化后焦点到 play/pause 按钮。

我做了一些基本的事情。喜欢自定义 MediaTransportControls 跟随 https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/custom-transport-controls#customize-the-transport-controls

我可以使用 play/pause 按钮 Globals.ButtonPlayPause = GetTemplateChild("PlayPauseButton") as Button;

播放器初始化后，我用

if (Globals.ButtonPlayPause != null)
  Globals.ButtonPlayPause.Focus(FocusState.Programmatic);

好像不行

谁能告诉我为什么。谢谢

Answer 1

我使用的是官方示例-XamlCustomMediaTransportControls，它也是自定义 SMTC。在示例中，我在客户 SMTC 控件中创建了一个 public 方法，用于设置播放按钮的状态。之后，我启动示例，直接按下space/enter按钮，播放按钮事件被触发。证明播放按钮设置成功。

在自定义SMTC里面添加如下方法：

    public void setfocus() 
    {
        AppBarButton playbutton = GetTemplateChild("PlayPauseButton") as AppBarButton;
        playbutton.Focus(FocusState.Programmatic);
    }

并且在主页中：

  public MainPage()
    {
        this.InitializeComponent();

        //This following line is setting the source for the MediaPlayerElement
        this.MainMPE.Source = MediaSource.CreateFromUri(new Uri("ms-appx:///Assets/fishes.wmv"));
        this.Loaded += MainPage_Loaded;
    }

    private void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        MySMTC.setfocus();
    }

请注意所有代码均基于我发布的示例。这有帮助吗？

更新：

依旧使用官方样机进行测试。我将默认的 Appbarbutton 样式复制到自定义 SMTC 样式中。然后我为特殊的Appbarbutton样式添加了焦点状态的视觉状态组，稍后将应用于播放按钮。

在焦点状态的视觉状态组中，我添加了三个状态- Focused、PointerFocused、Unfocused。像这样：

                        <Style x:Key="AppBarButtonStyleSpecial" TargetType="AppBarButton">
                                 ......
                            <Setter Property="AllowFocusOnInteraction" Value="True" />
                            <Setter Property="UseSystemFocusVisuals" Value="False" />
                            <Setter Property="KeyboardAcceleratorPlacementMode" Value="Hidden" />
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="AppBarButton">
                                        <Grid x:Name="Root"
                    MinWidth="{TemplateBinding MinWidth}"
                    MaxWidth="{TemplateBinding MaxWidth}"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    CornerRadius="{TemplateBinding CornerRadius}" >

                                            <VisualStateManager.VisualStateGroups>

                                                 ......
                                                </VisualStateGroup>
                                                <!-- Focus states -->
                                                <VisualStateGroup x:Name="FocusStates">
                                                    <VisualState x:Name="Focused">
                                                        <VisualState.Setters>
                                                            <Setter Target="Content.Background" Value="Red" />

                                                        </VisualState.Setters>
                                                    </VisualState>

                                                    <VisualState x:Name="PointerFocused">
                                                        <VisualState.Setters>
                                                            <Setter Target="Content.Background" Value="Red" />
                                                        </VisualState.Setters>
                                                    </VisualState>

                                               ......

                                </Setter.Value>
                            </Setter>
                        </Style>

那么还有一个关键点就是需要把UseSystemFocusVisuals属性改成false。

之后，您可以启动您的应用并查看结果。

媒体播放器元素初始化后如何将焦点设置到 Play/Pause 按钮？

How to set focus to Play/Pause button after media player element intialized?

uwp

media-player

uwp-xaml

caml