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

Question

I'm using MediaPlayerElement, and add a TransportControls.

In default, the focus always on volumn button after player intialized.

Now I want the focus to play/pause button after player intialized.

I have done some basic things. Like custom the MediaTransportControls following https://learn.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/custom-transport-controls#customize-the-transport-controls

And I can get play/pause button using Globals.ButtonPlayPause = GetTemplateChild("PlayPauseButton") as Button;

After the player intialized, I use

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

It seems not work.

So can anyone tell me why. Thx.

Answer 1

I'm using the official sample -XamlCustomMediaTransportControls which is also a custom SMTC. In the sample, I created a public method inside the customer SMTC control which set the play button's state. After that, I launched the sample, directly press the space/enter button, the play button event is triggered. It proves the play button is set to be focused successfully.

Inside the custom SMTC add the following method：

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

And in the main page:

  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();
    }

Please note all the codes are based on the sample I posted. Is this helpful?

Updated:

Still using the official sample for test. I copied the default Appbarbutton style into the custom SMTC style. Then I added the visual state group of Focus state for the special Appbarbutton style which will be applied to the play button later.

In the visual state group of Focus state, I added three states - Focused,PointerFocused,Unfocused. Like this:

                        <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>

Then another key point is that you need to change the UseSystemFocusVisuals property to false.

After that, you could launch your app and check the result.