CODEWITHSUNDEEP
c#wpfxaml
Osborne Cox
Osborne Cox

Reputation: 466

Data binding from multiple sources

I am trying to get data from two array lists into a window. The first array list contains images and the second array list contains names of movies.

The layout will show movie posters along with the names of the relevant movie underneath the poster. The code I am currently using doesn't seem to be working properly as I only get images showing in the window but no text.

This the current XAML code I have:

<Window.Resources>
        <DataTemplate x:Key="ItemTemplate">
            <WrapPanel Orientation="Vertical">
                    <Image Width="200" Height="300" Stretch="Fill" Source="{Binding}"/>
                    <TextBlock Text="{Binding movie_names}" HorizontalAlignment="Center"/> 
            </WrapPanel>
        </DataTemplate>
    </Window.Resources>

        <Grid x:Name="movie_grid">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition />
            </Grid.RowDefinitions>
            <ListView Grid.Row="1"
                      Name="MovieListView"
                      ItemTemplate="{StaticResource ItemTemplate}"
                      ItemsSource="{Binding Path = movie_posters_list}">
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <UniformGrid Columns="5" />
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
            </ListView>
            <TextBlock Name="SampleTextBlock"
               Text="{Binding Path=movie_names}"
               DataContext="{StaticResource ItemTemplate}" />
        </Grid>
</Window>

And here is the C# code behind:

public partial class MoviePanel : Window {
    public MoviePanel() {
        InitializeComponent();
    }

    List<ImageSource> movie_posters_list = new List<ImageSource>();
    List<String> movie_names = new List<String>();
    String regex_pattern = @"\\([\w ]+).(?:jpg|png)$";

    public void LoadImages() {
        //Image current_image;
        String movie_poster_path = @"C:\Users\Vax\Desktop\movie_posters";
        List<String> filenames = new List<String>(System.IO.Directory.EnumerateFiles(movie_poster_path, "*.jpg"));
        foreach (String filename in filenames) {
            this.movie_posters_list.Add(new BitmapImage(new Uri(filename)));
            Match regex_match = Regex.Match(filename.Trim(), regex_pattern);
            String matched_movie_name = regex_match.Groups[1].Value;
            this.movie_names.Add(matched_movie_name);
        }

        MovieListView.ItemsSource = movie_posters_list;
        MovieListView.DataContext = movie_names;
    }

}

I think the issue stems from binding the data but I'm not sure what I've done wrong.

Upvotes: 0

Views: 833

Answers (1)

Jawahar
Jawahar

Reputation: 4885

Create a model class and wrap your Movie Name and Image into it.

public class MovieDetail
{
    public ImageSource Image { get; set; }

    public string Name { get; set; }
}

When calling LoadImages, add instances of this model into ListView. And modify the datatemplate to bind the Name and Image.

        List<MovieDetail> movies = new List<MovieDetail>();

        foreach (String filename in filenames)
        {
            Match regex_match = Regex.Match(filename.Trim(), regex_pattern);
            String matched_movie_name = regex_match.Groups[1].Value;
            movies.Add(new MovieDetail { Image = new BitmapImage(new Uri(filename)), Name = matched_movie_name });
        }

        MovieListView.ItemsSource = movies;

The DataTemplate,

     <DataTemplate x:Key="ItemTemplate">
        <WrapPanel Orientation="Vertical">
            <Image Width="200"
                   Height="300"
                   Stretch="Fill"
                   Source="{Binding Image}" />
            <TextBlock Text="{Binding Name}"
                       HorizontalAlignment="Center" />
        </WrapPanel>
    </DataTemplate>

Upvotes: 2

Related Questions