Windows Store dynamically add items into GridView

Question

Hee,

I'm currently trying to make a GridView which contains items within an Image and a textblock for a title. I want to add these dynamically.

After searching for an hour I got this:

<GridView 
    x:Name="grid" 
    SelectionMode="Single" 
    IsItemClickEnabled="False"  
    Foreground="#DEFFFFFF" 
    SelectionChanged="GridView_SelectionChanged" Margin="0, 50, 0, 0" >
    <GridView.Resources>
        <CollectionViewSource x:Name="CollectionViewSource" x:Key="CollectionViewSource" />
        <DataTemplate x:Key="ImageBinder">
            <Image Source="{Binding Photo}" Width="200" Height="200" />
        </DataTemplate>
        <DataTemplate x:Key="TextBinder">
            <TextBlock Text="{Binding Text}" Width="auto" Height ="auto" />
        </DataTemplate>
    </GridView.Resources>

</GridView>

I understand from reading that the Source attributes needs a class or something? But I really don't understand how I can add Item dynamically to the grid this way, can someone explain that to me with a code example?

Answer 1

Example of a class :

Public Class PiecePictureObject{
    Public String [Text] { get; set; }
    Public BitmapImage [Photo] { get; set; }
}

• Then create a List of that class

• Add elements to that list

• Affect your gridview GridviewExample.DataContext = ListYouCreatedOfYourObject

And the XAML

<GridView x:Name="grdPiecesImage" ItemsSource="{Binding}" SelectionChanged="grdPiecesImage_SelectionChanged">
    <GridView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical">
                <StackPanel.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="Black"/>
                        <GradientStop Color="#FF443585" Offset="1"/>
                    </LinearGradientBrush>
                </StackPanel.Background>
                <TextBlock Text="{Binding Text}" Height="45" FontSize="25" Padding="10"/>
                <Image Source="{Binding Photo}" Height="95" Width="250"/>
            </StackPanel>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

I would suggest using different words than Photo and Text such as PiecePhoto, PieceText

Make sure that the names in your bindings are the same as your object. If you are having trouble with getting the image from your files here is how I did it in VB.NET

    Public Async Function LoadImage(_folder As StorageFolder, _filename As String) As Task(Of BitmapImage)
        Try
            Dim file = Await _folder.GetFileAsync(_filename)
            Dim bitmapImage As BitmapImage = New BitmapImage()
            Dim stream As FileRandomAccessStream = CType(Await file.OpenAsync(FileAccessMode.Read), FileRandomAccessStream)
            bitmapImage.SetSource(stream)
            Return bitmapImage
        Catch ex As Exception
            Return Nothing
        End Try
    End Function

Sorry about the inconveniance I currently don't have the time to translate to C#

If you are still having problems take a look at this : http://www.c-sharpcorner.com/UploadFile/c25b6d/image-binding-in-gridview-and-listview-in-windows-8-apps-usi/