Set cover image to MediaPlayerElement in C# uwp for audio files

Question

Set cover image to MediaPlayerElement in C# uwp for audio files

Tamás Bitó 20

In my C# uwp project, i want to set a cover image to my MediaPlayerElement object, when an mp3 (or other audio file) loaded. I have tried the PosterSource property, but after i have been loaded a file in my mediaplayer, the postersource disappeared.

I don't want to overlay an image with the mediaplayer element, because the transportcontrols panel covers part of the image.

Do you have any suggestion to solve this?

Junjie Zhu - MSFT 21,646 Reputation points

2024-06-17T03:18:09.94+00:00

Hello @Tamás Bitó ,

Welcome to Microsoft Q&A!

"but after i have been loaded a file in my mediaplayer, the postersource disappeared."

I tested PosterSource, it works, could you please provide the code related to PosterSource to help us further check the problem for you?

Thank you.

Tamás Bitó 20

Here is my code snippet from the xaml:

<MediaPlayerElement PointerPressed="MediaPlayerElement_PointerPressed" HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="MediaPlayerElement" AreTransportControlsEnabled="True" Grid.Row="1">


                   <MediaPlayerElement.TransportControls>

                       <local:CustomMediaTransportControls Style="{StaticResource CustomTransportControlStyle}">


                    </local:CustomMediaTransportControls>
               </MediaPlayerElement.TransportControls>
</MediaPlayerElement>

and my xaml.cs:


private readonly MediaPlayer _mediaPlayer;

private MediaSource _mediaSource;`

private void LoadFile()`

{



           if (mediaFile != null)`

           {

                _mediaSource = MediaSource.CreateFromStorageFile(mediaFile);
           }

            _mediaPlayer.Source = _mediaSource;

         if (mediaFile.Name.EndsWith(".mp3"))

         {

                MediaPlayerElement.PosterSource = new BitmapImage(new Uri("path"));

         }
}

Tamás Bitó 20 Reputation points

2024-06-17T11:06:09.0466667+00:00

Here is the way i tried to set postersource: (MediaPlayerElement is the x:Name of my MediaPlayerElement component.)

MediaPlayerElement.PosterSource = new BitmapImage(new Uri("path"));
Junjie Zhu - MSFT 21,646 Reputation points

2024-06-18T06:30:00.0666667+00:00

Hello @Tamás Bitó ,

I test your code, but I cannot reproduce same behavior.

This line MediaPlayerElement.PosterSource = new BitmapImage(new Uri("path")); it works, you need check this line result by adding breakpoint in Debug,

If this line works fine in debug but the image still doesn't show up, it is recommended that you reproduce this behavior in a blank empty UWP project first, and then you can share the full code, please be careful not to include any personal information when sharing the code.

Thank you.
Anonymous

2024-06-25T08:09:15.7033333+00:00

Any updates about this issue?
Milija Ivovic 0 Reputation points

2024-06-26T20:17:45.98+00:00

@Anonymous Check the path to the resource..

var posterImageUri = new Uri("ms-appx:///Assets/YourImage.jpg"); // Ensure this path is correct MediaPlayerElement.PosterSource = new BitmapImage(posterImageUri);

Your answer

Junjie Zhu - MSFT 21,646 Reputation points

2024-06-17T03:18:09.94+00:00

Hello @Tamás Bitó ,

Welcome to Microsoft Q&A!

"but after i have been loaded a file in my mediaplayer, the postersource disappeared."

I tested PosterSource, it works, could you please provide the code related to PosterSource to help us further check the problem for you?

Thank you.
Tamás Bitó 20 Reputation points

2024-06-17T09:26:59.0833333+00:00

Here is my code snippet from the xaml:

<MediaPlayerElement PointerPressed="MediaPlayerElement_PointerPressed" HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="MediaPlayerElement" AreTransportControlsEnabled="True" Grid.Row="1"> <MediaPlayerElement.TransportControls> <local:CustomMediaTransportControls Style="{StaticResource CustomTransportControlStyle}"> </local:CustomMediaTransportControls> </MediaPlayerElement.TransportControls> </MediaPlayerElement>

and my xaml.cs:

private readonly MediaPlayer _mediaPlayer; private MediaSource _mediaSource;` private void LoadFile()` { if (mediaFile != null)` { _mediaSource = MediaSource.CreateFromStorageFile(mediaFile); } _mediaPlayer.Source = _mediaSource; if (mediaFile.Name.EndsWith(".mp3")) { MediaPlayerElement.PosterSource = new BitmapImage(new Uri("path")); } }
Tamás Bitó 20 Reputation points

2024-06-17T11:06:09.0466667+00:00

Here is the way i tried to set postersource: (MediaPlayerElement is the x:Name of my MediaPlayerElement component.)

MediaPlayerElement.PosterSource = new BitmapImage(new Uri("path"));
Junjie Zhu - MSFT 21,646 Reputation points

2024-06-18T06:30:00.0666667+00:00

Hello @Tamás Bitó ,

I test your code, but I cannot reproduce same behavior.

This line MediaPlayerElement.PosterSource = new BitmapImage(new Uri("path")); it works, you need check this line result by adding breakpoint in Debug,

If this line works fine in debug but the image still doesn't show up, it is recommended that you reproduce this behavior in a blank empty UWP project first, and then you can share the full code, please be careful not to include any personal information when sharing the code.

Thank you.
Anonymous

2024-06-25T08:09:15.7033333+00:00

Any updates about this issue?
Milija Ivovic 0 Reputation points

2024-06-26T20:17:45.98+00:00

@Anonymous Check the path to the resource..

var posterImageUri = new Uri("ms-appx:///Assets/YourImage.jpg"); // Ensure this path is correct MediaPlayerElement.PosterSource = new BitmapImage(posterImageUri);

Share via

Set cover image to MediaPlayerElement in C# uwp for audio files

Your answer