Click here to Skip to main content
14,266,194 members
Rate this:
Please Sign up or sign in to vote.
See more:
I have two pages in my window,in first page i write datas for my uploaded music video,and after clicking on button Save, It's saved in list, then added in ListBox,but in Listbox show me only that song's name and image for Song.ListBox located in second page,when item already is adding, when i click on any item, Ineed to see that item's video in the right side` outside Listbox.How can i solve this problem?
This is first page after Uploading video and picture[^]
This is second page, item already added in listbox[^]
Now I need when i click on item,it should show me that item's video` Beyonce - Halo in MediaElement. Please help me.

//My media class
 public class Media
    {
        public string SongName { get; set; }
        public string Album { get; set; }
        public string SingerName { get; set; }
        public Uri Medias { get; set; }
        public Uri Image { get; set; }
        public Media(string SongName, string Album, string SingerName, Uri Medias, Uri Image)
        {
            this.SongName = SongName;
            this.Album = Album;
            this.SingerName = SingerName;
            this.Medias = Medias;
            this.Image = Image;
        }
    }
//Page 1
 public partial class Page1 : Page
    {
        public Uri n;
        public Uri m;
        public Page1()
        {
            InitializeComponent();
        }
        //Button for uploading video
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            OpenFileDialog op = new OpenFileDialog();
            if (op.ShowDialog() == true)
            {
                mp.Source = new Uri(op.FileName);
                mp.Play();
            }
            this.m = new Uri(op.FileName);
        }
       //Button for saving datas in list
        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
          Media x = new Media(txt1.Text,txt2.Text, txt3.Text,m,n);
          Page2.videos.Add(x);
        }
        //Button for uploading image
        private void Button_Click_3(object sender, RoutedEventArgs e)
        {
            OpenFileDialog op = new OpenFileDialog();
            op.Title = "Select a picture";
            op.Filter = "All supported graphics|*.jpg;*.jpeg;*.png|" +
              "JPEG (*.jpg;*.jpeg)|*.jpg;*.jpeg|" +
              "Portable Network Graphic (*.png)|*.png";
            if (op.ShowDialog() == true)
            {
                image1.Source = new BitmapImage(new Uri(op.FileName));
            }
            this.n = new Uri(op.FileName);
        }
    }

//Page 2
public partial class Page2 : Page
    {
        static public ObservableCollection<Media> videos { get; } = new ObservableCollection<Media>();
//This shows items in ListBox` Name and Image
        public Page2()
        {
            InitializeComponent();
            foreach (Media item in Page2.videos)
            {
                lb.ItemsSource = videos;
            }
        }
//This is my problem, Video doesn't play when i click on item
        private void lb_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            foreach (Media items in Page2.videos)
            {
                if (lb.SelectedItem != null)
                {
                    m_element = items.Medias;
                    m_element.Play();
                }
            }
        }
    }


What I have tried:

// Page 2 XAML

<Page x:Class="Suren_MaterialDesign.Page2"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:Suren_MaterialDesign"
      mc:Ignorable="d" 
      d:DesignHeight="515" d:DesignWidth="1010"
      Title="Page2">
    <Page.Resources>
        <DataTemplate x:Key="Songs">
            <StackPanel Height="110" Width="310">
                <WrapPanel HorizontalAlignment="Center">
                    <Label VerticalAlignment="Center" HorizontalAlignment="Center"  Content="{Binding Path=SongName}"/>
                </WrapPanel>
                <Image Source="{Binding Path=Image}" Width="200" Height="100"/>
            </StackPanel>
        </DataTemplate>
    </Page.Resources>

    <Grid Background="#FF35A69C">
        <GroupBox Background="White" Header="My Songs" FontSize="20" Height="460" Width="425" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="20,20,0,0">
            <ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled" Name="lb" Width="425" ItemTemplate="{StaticResource Songs}" Margin="0,-15,0,-8">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel/>
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
            </ListBox>
        </GroupBox>
        <MediaElement Source="{Binding Path=Medias}" x:Name="m_element" Height="400" Width="400" HorizontalAlignment="Right" Margin="30"/>
    </Grid>
</Page>
Posted
Updated 6-Apr-18 0:01am
v3

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

//Page 2
public partial class Page2 : Page
{
    //This is my problem, Video doesn't play when i click on item
    private void lb_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        foreach (Media items in Page2.videos)
        {
            if (lb.SelectedItem != null)
            {
                m_element = items.Medias;
                m_element.Play();
            }
        }
    }
}

<MediaElement Source="{Binding Path=Medias}" x:Name="m_element" Height="400" Width="400" HorizontalAlignment="Right" Margin="30"/>

Quote:
Now I need when i click on item,it should show me that item's video` Beyonce - Halo in MediaElement.

You have the MediaElement named m_element initialized in XAML using data binding yo a non-existant collection called Medias in your code behind. Then you point the XAML MediaElement object to an unititialized MediaElement in your Media class. You only need to add a MediaURL property to the Media class and point point the m_element.Source property at it.

Also the in the lb_SelectionChanged event method you search for the Media class in the Videos collection. The lb.SelectedItem is already pointing at the Media class, so there is no need to find it.

You can learn more here: WPF Tutorial - Playing video[^] (http://www.wpf-tutorial.com/audio-video/playing-video/)
   
Comments
Maciej Los 6-Apr-18 3:03am
   
Hawk eye!
Graeme_Grant 6-Apr-18 3:06am
   
Thanks! :)
Suren97 6-Apr-18 3:53am
   
Do you mean instead of public MediaElement Medias { get; set; }, I need to write public MediaURL Medias { get; set; }???
Graeme_Grant 6-Apr-18 4:52am
   
yes... don't pass the control, just the URL (path) to the file to be played.
Suren97 6-Apr-18 5:06am
   
but i don't know constant URL video, I don't understand what you mean :(
Graeme_Grant 6-Apr-18 5:55am
   
Just like the Image URL, the music/video will have a file URL...
Suren97 6-Apr-18 6:00am
   
Look I updated my question, you mean like this?
Suren97 6-Apr-18 6:01am
   
I think the problem is in SelectionChanged event, what should i change there?
Suren97 6-Apr-18 6:02am
   
And MediaElement i have given Source="{Binding Path=Medias}", is this wrong?
Graeme_Grant 6-Apr-18 6:10am
   
Check out the link provided in the answer. It shows you exactly how.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100