After making media element static, the binding in the xaml to the media element seems to not do anything anymore when navigating to the other page, but still works on the first page and whenever i go back to it, the audio works fine all over its just the UI...anyone any thoughts of what im missing?

[Mashedpoturtles]

[jedusei]

In the constructor of the story page, the media element is set to the static one to keep both pages using the same player:
mediaElement = AudioPlayerService.SharedMediaElement;

Here's the problem. Both pages aren't using the same player. That line of code only assigns the shared media element to mediaElement; it doesn't actually replace the story page's media element. The slider and labels on the story page are still bound to the media element on that page, not the shared media element. That's why the labels and slider aren't updating—the story page media element isn't playing.

Here's some quick steps you can follow to make this work:

• Add a SharedMediaElement property to the story page viewmodel. Set this to the shared media element in the viewmodel constructor.
• Change the story page XAML bindings so that they now point to the the shared media element declared in the viewmodel. For example, the slider value should be bound like this Value="{Binding SharedMediaElement.Position.TotalSeconds}". Remember to remove the BindingContext as well.

[Mashedpoturtles]

Thank you so much!!! That worked perfectly.....but i am struggling to understand why, I thought that if i assigned the mediaplayer on the page to be this: mediaElement = AudioPlayerService.SharedMediaElement; that whatever element in the xaml would simply become that one and that it would have just worked, any chance you understand where my thinking is flawed and could you possibly help me understand why that doesn't work and why the way you mention did work?

I am quite new at all of this and some things havent clicked with me yet despite trying to read the documentation several times over hehe...

thanks again, I was stuck on this for days!

[jedusei]

Glad to be of help! 🙂

Lemme see if I can explain this well enough...

When you build the project, the XAML compiler converts the XAML into C# code that creates the controls and sets their properties and bindings. The generated code is put in the InitializeComponent method, which is called in the constructor. If you specify a name for a control, eg. x:Name="mediaElement", the compiler adds a field with that name to the page class, and assigns it to the control (mediaElement = <the control>).

Changing the value of mediaElement simply reassigns the variable; it has no effect on the page at all. The media element on the page remains the same and the other controls are still bound to it, because everything is created and bound within the InitializeComponent method.

Maybe you thought that the bindings would update automatically because you set BindingContext="{Reference mediaElement}", but no, that XAML is converted to control.BindingContext = mediaElement, which is executed only once (in InitializeComponent), so the binding context is set to the story media element.

You could manually set the binding context of each control to the shared media element in the C# codebehind to update the bindings, but an easier solution was to bind to the SharedMediaElement on the viewmodel instead. That works just like binding regular properties like ints and strings on the viewmodel.

Hope that clears things up a bit 😅

[Mashedpoturtles]

It's making a bit more sense to me now, thanks so much again you are fantastic!