Gustavo Bocalandro
Gustavo Bocalandro

Reputation: 79

Need directions on how to make a List with different items, to bind it to a ListView

I need to make a ListView where each row will have an image, then a Text, then another image.

Since to make a GridView I had to bind its DataContext to a List with all the images, and they work (almost) the same way, I think I need to make another List with the images and texts

The format is: "Store Logo. Promotion Text. Credit Card Logo" and all this data comes from an API.

I already have all the pictures saved in different folders ("Stores" and "PaymentMethods") and I get the text like

myTextBlock.text = item.promotion;

Now my questions are:

1) Is it possible to make a list with all this data? How? (or where do I have to look for it)

2) Once I have the list, how, by binding it, can I be sure that it will respect the format I mentioned above?

(Something I tried out, instead of having a ListView, was creating everything at runtime:

public async void getPromos()
    {
        if (Resp.searchResults.Count > 0)
        {
            var selected = from promo in Resp.searchResults
                           where (promo.store_id != null || promo.method_id != null)
                           select new
                           {
                               store = promo.store_id,
                               medio = promo.method_id,
                               endDay = promo.to,
                               promocion = promo.desc
                           };

            foreach (var item in selected)
            {
                Debug.WriteLine(item.store);
                await showPromos(item.store, item.medio, item.endDay, item.promocion);

            }
        }
    }

    async Task showPromos(string store, string medio, string endDay, string promocion)
    {
        Debug.WriteLine(store);
        Debug.WriteLine("medio" + medio);

        StorageFolder folder1 = await KnownFolders.PicturesLibrary.GetFolderAsync("UnicenterMediosFolder");
        StorageFolder folder2 = await KnownFolders.PicturesLibrary.GetFolderAsync("UnicenterStores");
        if (store != null)
        {
            StorageFile file = await folder2.GetFileAsync(store + ".png");
            ImageProperties properties = await file.Properties.GetImagePropertiesAsync();
            if (properties.Width > 0)
            {
                var bitmap = new WriteableBitmap((int)properties.Width, (int)properties.Height);
                bitmap.SetValue(NameProperty, (string)properties.Title);
                Debug.WriteLine(bitmap.PixelWidth);
                using (var stream = await file.OpenAsync(FileAccessMode.ReadWrite))
                {
                    bitmap.SetSource(stream);
                }
                Color customColor = ColorHelper.FromArgb(213, 213, 213, 213);
                StackPanel casa = new StackPanel();
                casa.Orientation = Orientation.Horizontal;
                casa.Background = new SolidColorBrush(customColor);
                casa.Height = 70;
                Image promoImage = new Image();
                promoImage.Source = bitmap;
                promoImage.Width = 70;
                promoImage.Height = 70;
                TextBlock thePromo = new TextBlock();
                thePromo.Text = promocion;
                thePromo.Foreground = new SolidColorBrush(Colors.Gray);
                casa.Children.Add(promoImage);
                casa.Children.Add(thePromo);
                gridForPromos.Children.Add(casa);
                Debug.WriteLine("aaa" + gridForPromos.Children.Count);

            }
        }
    }

and in my xaml:

<ScrollViewer x:Name="myPromoSpace" Grid.Row="2">
        <Grid x:Name="gridForPromos"/>
    </ScrollViewer>

But doing this, I get each stackpanel on the previous one, instead of having them one under the other)

Can you guys point me in the right direction here, please?

Upvotes: 1

Views: 45

Answers (1)

Markus Gilli
Markus Gilli

Reputation: 237

When you add elements to a Grid without setting Grid.Row and having Grid.RowDefinitions, all the childs will be in the same grid cell. You either need to add RowDefinitions and set the row of the child:

gridForPromos.RowDefinitions.Add(new RowDefinition(...))
Grid.SetRow(casa, gridForPromos.RowDefinitions.Count);

or replace your Grid with a StackPanel:

<StackPanel x:Name="gridForPromos" />

But I would prefer to define a DataTemplate for your Items. With this you can define the visual apperance of your items in XAML and simple bind a StackPanel to your items. Here a link that shows you how to do: http://www.wpftutorial.net/datatemplates.html

Upvotes: 1

Related Questions