locked
How do I access a MediaElement from a different frame? RRS feed

Answers

  • Hi, pumpkinszwan

    You can change the root frame template in App.xaml, make the MediaElement included in root frame template.

    Code the root frame template in XAML like below:

    <Style  x:Key="RootFrameStyle" TargetType="Frame">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Frame">
                        <Grid>
                            <MediaElement x:Name="MediaPlayer" AudioCategory="BackgroundCapableMedia" AutoPlay="True"  />
                            <ContentPresenter />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
    </Style>

    In  App.xaml.cs you can code below to change the root frame style:

    protected override void OnLaunched(LaunchActivatedEventArgs args)
    {
                var rootFrame = new Frame();
                rootFrame.Style = Resources["RootFrameStyle"] as Style;
                rootFrame.Navigate(typeof(BasicPage2));
                Window.Current.Content = rootFrame;
                Window.Current.Activate();
    
     }

    If you want to access the MediaElement in different page, wrote this piece in Page's loaded event:

    DependencyObject rootGrid = VisualTreeHelper.GetChild(Window.Current.Content, 0);
                MediaElement rootMediaElement = (MediaElement)VisualTreeHelper.GetChild(rootGrid, 0);

    Best Wishes!


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.



    • Edited by Anne Jing Friday, August 30, 2013 4:06 AM from
    • Marked as answer by Anne Jing Wednesday, September 4, 2013 6:05 AM
    Friday, August 30, 2013 4:03 AM
  • You can use custom frame in your app. Just create class NavigationFrame : Frame, and add it template in Themes/Generic.xaml file 

    xaml:

    <Style TargetType="controls:NavigationFrame">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="controls:NavigationFrame">
                        <Border x:Name="Border" 
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}">
    <Grid>
    <MediaElement x:Name="MediaElement" 
                                              AudioCategory="BackgroundCapableMedia"/>
    
    <ContentPresenter Content="{TemplateBinding Content}"
                                                  ContentTemplate="{TemplateBinding ContentTemplate}"
                                                  ContentTransitions="{TemplateBinding ContentTransitions}"
                                                  Margin="{TemplateBinding Padding}"
                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
    </Grid>
    /Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    code:

    [TemplatePart(Name = "MediaElement", Type = typeof(MediaElement))]
        public class NavigationFrame : Frame
        {
     public MediaElement MediaElement { get; protected set; }
    
    protected override void OnApplyTemplate()
            {
                base.OnApplyTemplate();
    
                this.MediaElement = base.GetTemplateChild("MediaElement") as MediaElement;
    
                }
    }
    
    In app.xaml.cs:
    
    private async void ActivateFrame(IActivatedEventArgs args)
            {
                this.RootFrame = Window.Current.Content as NavigationFrame;
    
                if (this.RootFrame == null)
                {
                    this.RootFrame = new NavigationFrame();
    Window.Current.Content = this.RootFrame;
    }
    


    use it in code:

    if (mediaElement == null)//I use static mediaElement in my ViewModel. But you can use it everywhere.
                    {
                        var frame = Window.Current.Content as NavigationFrame;
                        mediaElement = frame.MediaElement;

    }

    • Proposed as answer by Dave SmitsMVP Thursday, August 29, 2013 8:24 AM
    • Marked as answer by Anne Jing Wednesday, September 4, 2013 6:07 AM
    Thursday, August 29, 2013 4:45 AM

All replies

  • You can use custom frame in your app. Just create class NavigationFrame : Frame, and add it template in Themes/Generic.xaml file 

    xaml:

    <Style TargetType="controls:NavigationFrame">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="controls:NavigationFrame">
                        <Border x:Name="Border" 
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}">
    <Grid>
    <MediaElement x:Name="MediaElement" 
                                              AudioCategory="BackgroundCapableMedia"/>
    
    <ContentPresenter Content="{TemplateBinding Content}"
                                                  ContentTemplate="{TemplateBinding ContentTemplate}"
                                                  ContentTransitions="{TemplateBinding ContentTransitions}"
                                                  Margin="{TemplateBinding Padding}"
                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
    </Grid>
    /Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    code:

    [TemplatePart(Name = "MediaElement", Type = typeof(MediaElement))]
        public class NavigationFrame : Frame
        {
     public MediaElement MediaElement { get; protected set; }
    
    protected override void OnApplyTemplate()
            {
                base.OnApplyTemplate();
    
                this.MediaElement = base.GetTemplateChild("MediaElement") as MediaElement;
    
                }
    }
    
    In app.xaml.cs:
    
    private async void ActivateFrame(IActivatedEventArgs args)
            {
                this.RootFrame = Window.Current.Content as NavigationFrame;
    
                if (this.RootFrame == null)
                {
                    this.RootFrame = new NavigationFrame();
    Window.Current.Content = this.RootFrame;
    }
    


    use it in code:

    if (mediaElement == null)//I use static mediaElement in my ViewModel. But you can use it everywhere.
                    {
                        var frame = Window.Current.Content as NavigationFrame;
                        mediaElement = frame.MediaElement;

    }

    • Proposed as answer by Dave SmitsMVP Thursday, August 29, 2013 8:24 AM
    • Marked as answer by Anne Jing Wednesday, September 4, 2013 6:07 AM
    Thursday, August 29, 2013 4:45 AM
  • Hi, pumpkinszwan

    You can change the root frame template in App.xaml, make the MediaElement included in root frame template.

    Code the root frame template in XAML like below:

    <Style  x:Key="RootFrameStyle" TargetType="Frame">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Frame">
                        <Grid>
                            <MediaElement x:Name="MediaPlayer" AudioCategory="BackgroundCapableMedia" AutoPlay="True"  />
                            <ContentPresenter />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
    </Style>

    In  App.xaml.cs you can code below to change the root frame style:

    protected override void OnLaunched(LaunchActivatedEventArgs args)
    {
                var rootFrame = new Frame();
                rootFrame.Style = Resources["RootFrameStyle"] as Style;
                rootFrame.Navigate(typeof(BasicPage2));
                Window.Current.Content = rootFrame;
                Window.Current.Activate();
    
     }

    If you want to access the MediaElement in different page, wrote this piece in Page's loaded event:

    DependencyObject rootGrid = VisualTreeHelper.GetChild(Window.Current.Content, 0);
                MediaElement rootMediaElement = (MediaElement)VisualTreeHelper.GetChild(rootGrid, 0);

    Best Wishes!


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.



    • Edited by Anne Jing Friday, August 30, 2013 4:06 AM from
    • Marked as answer by Anne Jing Wednesday, September 4, 2013 6:05 AM
    Friday, August 30, 2013 4:03 AM