uwpmedia-playeruwp-xamlcaml

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


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.

enter image description here


Solution

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

    enter image description here