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