Generating items in ListVIew

Question

I need to generate a listview with data I have in an array

my XAML is:

<Page.Resources>
        <DataTemplate x:Key="IconTextDataTemplate">
            <StackPanel Orientation="Horizontal" Width="220" Height="60">
                <Border Background="#66727272" Width="40" Height="40" Margin="10">
                    <Image Source="/SampleImage.png" Height="32" Width="32" Stretch="UniformToFill"/>
                </Border>
                <StackPanel Orientation="Vertical" VerticalAlignment="Center">
                    <TextBlock x:Name="Name" Margin="10,0,0,0" Width="170" Height="20" TextTrimming="WordEllipsis" Loaded="Name_Loaded"/>
                    <TextBlock x:Name="Description" Margin="10,0,0,0" Width="170" Height="20" TextTrimming="WordEllipsis" Loaded="Description_Loaded"/>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
</Page.Resources>
<ListView x:Name="IconTextGrid" Height="400" ItemTemplate="{StaticResource IconTextDataTemplate}" Grid.Row="4" Margin="40,40,40,10" HorizontalAlignment="Stretch">
                    <ListView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <ItemsWrapGrid MaximumRowsOrColumns="8"/>
                        </ItemsPanelTemplate>
                    </ListView.ItemsPanel>
                </ListView>

And the C# code:

private async void SearchBox_QuerySubmitted(SearchBox sender, SearchBoxQuerySubmittedEventArgs args)
    {
        foreach (var item in results)
        {
            IconTextGrid.Items.Add("");
            nameStr = item.FirstName + " " + item.LastName;
            descriptionStr = item.Email;
        }
    }


    public T FindElementByName<T>(DependencyObject element, string sChildName) where T : FrameworkElement
    {
        T childElement = null;
        var nChildCount = VisualTreeHelper.GetChildrenCount(element);
        for (int i = 0; i < nChildCount; i++)
        {
            FrameworkElement child = VisualTreeHelper.GetChild(element, i) as FrameworkElement;

            if (child == null)
                continue;

            if (child is T && child.Name.Equals(sChildName))
            {
                childElement = (T)child;
                break;
            }

            childElement = FindElementByName<T>(child, sChildName);

            if (childElement != null)
                break;
        }
        return childElement;
    }

    private void Name_Loaded(object sender, RoutedEventArgs e)
    {
        TextBlock Name = FindElementByName<TextBlock>(this, "Name");
        Name.Text = nameStr;
    }

    private void Description_Loaded(object sender, RoutedEventArgs e)
    {
        TextBlock Description = FindElementByName<TextBlock>(this, "Description");
        Description.Text = descriptionStr;
    }

This code should generate a list view with some items (in the array size) and put in every item the data from the cell in the array. The problem is that only in one item I see the data from the array and in the other items there is nothing. Wish for help, thanks

Answer 1

Your code is failing for at least one reason:

    foreach (var item in results)
    {
        IconTextGrid.Items.Add("");
        nameStr = item.FirstName + " " + item.LastName;
        descriptionStr = item.Email;
    }

you appear to be storing nameStr and descriptionStr into fields. But you are only storing the last item in results.

The good news is you can simplify and fix your code all at once. Using

    foreach (var item in results)
    {
        var nameStr = item.FirstName + " " + item.LastName;
        var descriptionStr = item.Email;
        IconTextGrid.Items.Add(new { Name = nameStr, Description = descriptionStr });
    }

That will create anonymous types with Name and Description properties for the ListView elements. You can then use:

    <DataTemplate x:Key="IconTextDataTemplate">
        <StackPanel ...>
                <Image .../>
            </Border>
            <StackPanel ...>
                <TextBlock Text="{Binding Name}" Margin="10,0,0,0" Width="170" Height="20" TextTrimming="WordEllipsis"/>
                <TextBlock Text="{Binding Description} Margin="10,0,0,0" Width="170" Height="20" TextTrimming="WordEllipsis"/>
            </StackPanel>
        </StackPanel>
    </DataTemplate>

And remove your FindElementByName, Name_Loaded, and Description_Loaded methods.