WPF. How to access the MediaElement located in MainWindow.xaml from Page.xaml.cs and Page.xaml?

I have a mainwindow.xaml and several Pages in my application. I placed MediaElement on the mainwindow so that when I switch between pages the song is not interrupted, I also want to be able to switch the song on each page and change the volume. But I don't know how to access MediaElement from MainWindow.xaml.

In MainWindow.xaml, I created a MediaElement that contains music <MediaElement x:Name="music" Source="Models\Music\music_one.m4a"> The project also has Page, on which I want to make it possible to switch to another song through the handler by pressing the button:

 private void TurnOn_Christmas_Button(object sender, RoutedEventArgs e)
        {
 
            music.Close();
            music.Source = new Uri("music/mus/music_two.m4a", UriKind.Relative);
            music.Play();
        }

But "music" from MainWindow.xaml it simply does not see. How to access it? I also need to access it in Page.xaml, because I want to add the possibility to change the volume via Slider

<Slider x:Name="VolumeMusic" Grid.Row="8" Grid.Column="1" Grid.ColumnSpan="4" Minimum="0" Maximum="1" Visibility="Hidden"
        Value="{Binding ElementName=music, Path=Volume, Mode=TwoWay}" VerticalAlignment="Center"/>

Here, accordingly, he can't see it either. How do I get in touch?

Solution

To access the MediaElement defined in MainWindow.xaml from other pages or controls, you can use various approaches. One common approach is to create a public property or method in your MainWindow.xaml.cs file that exposes the MediaElement. Here's an example:

public partial class MainWindow : Window
{
 Create a public property to expose the MediaElement
public MediaElement MusicElement
{
    get { return music; }
}

// ... other code in MainWindow.xaml.cs
}

Now, in your Page.xaml.cs or any other code-behind file where you want to access the MediaElement, you can do the following:

private void TurnOn_Christmas_Button(object sender, RoutedEventArgs e)
{
 // Access the MediaElement from MainWindow
 if (Application.Current.MainWindow is MainWindow mainWindow)
 {
    // Use the public property to get the MediaElement
    MediaElement music = mainWindow.MusicElement;

    // Now you can manipulate the MediaElement
    music.Close();
    music.Source = new Uri("music/mus/music_two.m4a", UriKind.Relative);
    music.Play();
}
}

Similarly, for changing the volume in Page.xaml.cs:

  private void VolumeSlider_ValueChanged(object sender, 
  RoutedPropertyChangedEventArgs<double> e)
  {
  // Access the MediaElement from MainWindow
  if (Application.Current.MainWindow is MainWindow mainWindow)
  {
    // Use the public property to get the MediaElement
    MediaElement music = mainWindow.MusicElement;

    // Set the volume based on the Slider value
    music.Volume = VolumeSlider.Value;
 }
}

Make sure to adjust the code according to your project structure and naming conventions. This approach allows you to access the MediaElement from other parts of your application.