Data Binding

The ListView control binds to a data source through the ItemsSource property.

Item rendering is controlled by a DataTemplate. The template defines the structure and appearance of each item in the list.

Changes in the data source are reflected in the UI based on the binding configuration.

XML

<UserControl.Resources>
    <!-- Item template-->
    <DataTemplate x:Key="ListViewItemTemplate">
        <StackPanel Orientation="Horizontal" >
            <Image Source="{Binding imagePath}" Height="100" Width="175" />
            <StackPanel>
                <TextBlock FontSize="14" TextWrapping="Wrap" Height="90" Width="175">
                   <Run Text="{Binding Name  }" />
                    <LineBreak/>
                    <Run Text="{Binding Description}" FontStyle="Italic" Foreground="LightSlateGray"/>                            
                    <LineBreak/>
                    <Run Text="{Binding Price}" />
                </TextBlock>
                <Button Content="ADD" Width="100"></Button>
            </StackPanel>
        </StackPanel>
    </DataTemplate>
</UserControl.Resources>
<Grid>
    <!--Setting item template and binding with Products-->
    <c1:C1ListView x:Name="listView"
                   ShowSelectAll="True"
                   ItemsSource="{Binding Products}"
                   SelectionMode="Extended" 
                   ItemTemplate="{StaticResource ListViewItemTemplate}">
    </c1:C1ListView>
</Grid>

CSharp

Products = new List<Product>();
// Add products to the list
Products.Add(new Product()
{
    Name = "Ipoh Coffee",
    Description = "Frothy coffee in condensed milk",
    imagePath = "../Assets/image1.png",
    Price = "$46.00"
});
Products.Add(new Product()
{
    Name = "Pavlova",
    Description = "Frozen meringue topped with fruits",
    imagePath = "../Assets/image2.png",
    Price = "$17.45"
});
Products.Add(new Product()
{
    Name = "Scottish LongBreads",
    Description = "Cheese-filled baguettes for decadent brunches",
    imagePath = "../Assets/image3.png",
    Price = "$12.50"
});
Products.Add(new Product()
{
    Name = "Teatime Chocolate Biscuits",
    Description = "Chocolate biscuits baked in generous dollops of butter",
    imagePath = "../Assets/image4.png",
    Price = "$9.20"
});