How to set the a transparent background for TransportControls in MediaPlayerElement control in WinUI3

Question

In UWP, for the MediaPlayerElement control, the MediaTransportControls background is transparent. But not in WinUI3, so how to set it to transparent?

Answer 1

Hello,

Welcome to Microsoft Q&A!

Glad to hear that you've done it by using the UWP style. I'm going to make a simple explanation about why the UWP style makes the background transparent. Hope it helps you.

how to set it to transparent?

The Customize the transport controls shows the correct steps about how to customize the style. Based on the comment, you've already tried this. The reason that it doesn't work for you might be that you didn't find the right panel control. I'll show the steps about how to do this in WinUI3 without using the UWP style.

1. Go to (Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP<SDK version>\Generic folder and open the generic.xaml.
2. Search for DefaultMediaTransportControlsStyle and find the default style of the MediaTransportControls
3. Copy the default style into a ResourceDictionary. For example, the parent control's resource of the MediaTransportControls and give a x:key to the style.
4. In the default style, find the root panel of the MediaTransportControls, it is a Grid named as ControlPanelGrid. Change the background of the Grid to {ThemeResource SystemControlPageBackgroundMediumAltMediumBrush}. The old UWP style uses SystemControlPageBackgroundMediumAltMediumBrush as background by default, so it is transparent.

The whole XAML code looks similar to this( please note: I removed part of the style code to reduce the size. In your real scenario, please keep the complete style.):

     <StackPanel  Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <StackPanel.Resources>
            <Style x:Key="myTransportControlsStyle" TargetType="MediaTransportControls">
                <Setter Property="IsTabStop" Value="False" />
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="FlowDirection" Value="LeftToRight" />
                <Setter Property="Margin" Value="{ThemeResource MediaTransportControlsMargin}" />
                <Setter Property="MaxWidth" Value="{ThemeResource MediaTransportControlsMaxWidth}" />
                <Setter Property="MinWidth" Value="{ThemeResource MediaTransportControlsMinWidth}" />
                <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
                <Setter Property="IsTextScaleFactorEnabled" Value="False" />
                <Setter Property="CornerRadius" Value="{ThemeResource OverlayCornerRadius}" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="MediaTransportControls">
                            <Grid x:Name="RootGrid" Background="Transparent">
                                <!--Part of the code  is omitted to reduce the size-->
                                 <!--Part of the code  is omitted to reduce the size-->
                                    
                                        
                                    <Border x:Name="ControlPanel_ControlPanelVisibilityStates_Border">
                                   
                                     <!-- change the background -->
                                    <Grid x:Name="ControlPanelGrid" Background="{ThemeResource SystemControlPageBackgroundMediumAltMediumBrush}" VerticalAlignment="Bottom" RenderTransformOrigin="0.5,0.5" BorderBrush="{ThemeResource MediaTransportControlsBorderBrush}" BorderThickness="{ThemeResource MediaTransportControlsBorderThickness}" CornerRadius="{TemplateBinding CornerRadius}">
                                        <Grid.RenderTransform>
                                            <TranslateTransform x:Name="TranslateVertical" />
                                        </Grid.RenderTransform>

                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>

                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="*" />
                                            <RowDefinition Height="Auto" />
                                        </Grid.RowDefinitions>
                                        <!--Part of the code  is omitted to reduce the size-->
                                        <!--Part of the code  is omitted to reduce the size-->
                                    </Grid>
                                </Border>

                            </Grid>

                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </StackPanel.Resources>
        <MediaPlayerElement AreTransportControlsEnabled="True"  Source="ms-appx:///Assets/video.mp4" AutoPlay="True">
            <MediaPlayerElement.TransportControls>
                <MediaTransportControls Style="{StaticResource myTransportControlsStyle}"/>
            </MediaPlayerElement.TransportControls>
        </MediaPlayerElement>
            
    </StackPanel>

Thank you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.