C# how to save datas in list, then add them in listview (WPF)

Question

0.00/5 (No votes)

See more:

I have Menu in the left side in my window,which has two sections,when i click on first Section Home,opens a page which has 3 textboxes,and three buttons.First button is for uploading music video,in the right side there is groupBox,where i fill that music video's datas` song's name,album,singer's name and again uploading image for song,and Save button,after clicking on Save button,i need save that all datas` Video,image,song's name,album's name,singer's name in List,after saving datas,i need add them in Listview. Listview located in second page,when i click on section Album,opens second page, where shows my saved datas in listview,but it must show only song's name and image. When i click on any item, in the bottom` outside listview, must show that song's video.
This is first page[^]
This is second page[^]

class Media
   {
       public string SongName;
       public string Album;
       public string SingerName;
       public MediaElement medias;
       public string Image;
       public Media(string SongName,string Album, string SingerName,MediaElement medias,string Image)
       {
           this.SongName = SongName;
           this.Album = Album;
           this.SingerName = SingerName;
           this.medias = medias;
           this.Image = Image;
       }
   }
   class Controller
   {
       static public List<Media> videos = new List<Media>();
   }

//Page 1
public partial class Page1 : Page
    {
        public string n;
        public Page1()
        {
            InitializeComponent();
        }

        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 is Save button click,it save datas in Controller class's list
        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
          Media x = new Media(txt1.Text,txt2.Text, txt3.Text,mp,n);
          Controller.videos.Add(x);
        }
        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 = System.IO.Path.GetFileName(op.FileName);
        }

        private void mp_MouseEnter(object sender, MouseEventArgs e)
        {
            mp.Pause();
        }

        private void mp_MouseLeave(object sender, MouseEventArgs e)
        {
            mp.Play();
        }
    }

//This is Page 2
public partial class Page2 : Page
    {
        public Page2()
        {
            InitializeComponent();
            foreach (var videos in Controller.videos) //add datas in ListView
            {
                var add = string.Format("{0} {1}", videos.SongName,videos.Image);
                lv.Items.Add(add);
            }
        }
    }

// Page 1 XAML

<Grid Background="#FF35A69C">
        <Button Click="Button_Click" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="20" Content="Upload Video" FontSize="30" Height="80" Width="250" Background="Aqua"/>
        <MediaElement MouseEnter="mp_MouseEnter" MouseLeave="mp_MouseLeave" x:Name="mp" LoadedBehavior="Manual"  Height="290" Width="450" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10 110"/>
        <GroupBox Header="Edit" FontSize="20" Background="White" Foreground="Aqua" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="20" Height="500" Width="500">
            <Grid>
                <TextBlock Height="30" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10" Width="120" FontSize="20" Text="Song Name"/>
                <TextBox x:Name="txt1" Height="40" Width="200" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10 40"/>
                <TextBlock Height="30" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10 80" Width="120" FontSize="20" Text="Album"/>
                <TextBox x:Name="txt2" Height="40" Width="200" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10 110"/>
                <TextBlock Height="30" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10 150" Width="120" FontSize="20" Text="Singer Name"/>
                <TextBox x:Name="txt3" Height="40" Width="200" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="13,179,0,0"/>
                <Button Click="Button_Click_3" Height="60" Width="160" Background="Aqua" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="10 120" Content="Choose Image" FontSize="20"/>
                <Button HorizontalAlignment="Right" Margin="0,0,310,40" Content="Save" FontSize="30" Background="Aqua" Click="Button_Click_1" Height="60" Width="160" VerticalAlignment="Bottom"/>
                <Image x:Name="image1" Height="280" Width="240" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="10 40"/>
            </Grid>
        </GroupBox>
    </Grid>

//Page 2 XAML
<Grid Background="#FF35A69C">
        <GroupBox Background="White" Header="My Songs" FontSize="20" Height="200" Width="600" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="20">
            <ListView x:Name="lv">
            </ListView>
        </GroupBox>
    </Grid>

What I have tried:

How can i do, that image shows in listview, now it shows like this ` Listview[^]
I need Song's name and next to it or under it ` Image.And how can i do, that for example when i click on any song,in the bottom play that song's video, which i have saved in the List. Like this[^]
Thank you.

Posted 3-Apr-18 22:49pm

Suren97

Updated 4-Apr-18 4:29am

v2

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

#realJSOP · Answer 1 · 2018-04-04T02:43:00

You need to create a property in your code behind:

C#

public ObservableCollection<Media> Videos { get; set; }

and populate that property.

--------------------

Your Media object needs a new property that holds the actual image you want to display:

C#

public Image ImageData { get; set; }

and you have to set that with the appropriate image.

--------------------

In your listview XAML, do something like this:

XML

<ListView x:Name="lv" ItemsSource=>
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical" VerticalAlignment="Stretch">
                <Image Source="{Binding ImageData}" HorizontalAlignment="Center" VerticalAlignment="Top"/>
                <TextBlock Text="{Binding SongName}" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Graeme_Grant · Answer 2 · 2018-04-04T04:31:00

Above John recommends[^] storing the image in the class itself. For a small number of items this is okay but when you start handling hundreds of records in memory, this can affect the performance of your app plus you have to write the code to handle the loading of image data.

WPF is designed to handle a lot of this for you. In your previous questions, you were working with references to images in your file system where we were using a URI to the image. This, IMHO (in my humble opinion), is the better way of doing it as it works better with the WPF system. WPF will manage image resource allocation on your behalf, along with virtualization options, resulting in lower memory usage and better overall performance. Additionally, if in future you decide to change the location of the image, say to a non-local source like cloud-based storage, only the URI pointing to the image changes and WPF will seamlessly do the rest for you.

Regarding the ListView control, here is a good resource to get you started in learning how to use the control: Introduction to the ListView control[^]. Here they show you how to use the GridView layout with the ListView control. If you want to use a different view in your ListView, then you can. Here is a great example for you: Dr WPF - Introduction to the ListView control[^]. Also, check out the rest of Dr WPF's posts, there a lot of beneficial information for you!

C# how to save datas in list, then add them in listview (WPF)

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0