Storage / Data: DataBinding với ListView DataTemplate trên Windows Store Apps (C #)

Yêu cầu: Windows 10 và Visual Studio 2015

- DataBinding: ListView hiển thị dữ liệu

//Display: MainPage.xaml
<Grid>
    <ListView x:Name="listView" HorizontalAlignment="Left" Height="485" Margin="100,115,0,0" VerticalAlignment="Top" Width="1110">
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Name}" FontSize="24" ></TextBlock>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

//Class: MainPage.xaml.cs
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    Member m1 = new Member
    {
        Id = 1,
        Name="Antonio",
        Email="Antonio@gmail.com"
    };

    List<Member> item = new List<Member>();
    item.Add(m1);

    this.listView.ItemsSource = item;
}

- Example 1: ListView kết hợp DataBinding lấy dữ liệu

MainPage.xaml

Windows Store 2017

<Page
    x:Class="Demo01.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Demo01"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <ListView x:Name="listView" HorizontalAlignment="Left" Height="485" Margin="100,115,0,0" VerticalAlignment="Top" Width="1110">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Name}" FontSize="24"></TextBlock>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Page>

MainPage.xaml.cs

Windows Store 2017

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace Demo01
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {

            List<Member> item = new List<Member>();
            item.Add(new Member { Name = "Antonio" });

            this.listView.ItemsSource = item;
        }
    }
}

Member.cs

Windows Store 2017

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Demo01
{
    class Member
    {
        public String Name { set; get; }

    }
}

- Example 2: 

MainPage.xaml

Windows Store 2017

<Page
    x:Class="Demo01.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Demo01"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" Width="1381">

    <Grid>
        <ListView x:Name="listView" HorizontalAlignment="Left" Background="DarkCyan" Height="285" Margin="90,245,0,0" VerticalAlignment="Top" Width="775">
            <ListView.ItemTemplate>
                <DataTemplate>

                    <StackPanel Orientation="Horizontal">

                        <StackPanel>
                            <TextBlock Text="{Binding Id}" FontSize="24" Margin="20 0 0 0"></TextBlock>
                        </StackPanel>
                        <StackPanel>
                            <TextBlock Text="{Binding Name}" FontSize="24" Margin="20 0 0 0"></TextBlock>
                        </StackPanel>
                        <StackPanel>
                            <TextBlock Text="{Binding Email}" FontSize="24" Margin="20 0 0 0"></TextBlock>
                        </StackPanel>
                        <StackPanel>
                            <TextBlock Text="{Binding Phone}" FontSize="24" Margin="20 0 0 0"></TextBlock>
                        </StackPanel>

                    </StackPanel>

                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

    </Grid>
</Page>

Member.cs

Windows Store 2017

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Demo01
{
    class Member
    {
        public int Id { set; get; }
        public String Name { set; get; }
        public String Email { set; get; }
        public int Phone { set; get; }

    }
}

MainPage.xaml.cs

Windows Store 2017

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace Demo01
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {

            List<Member> item = new List<Member>();
            item.Add(new Member { Id = 1008, Name = "Antonio", Email = "Antoni@gmail.com", Phone = 0983717162 });
            item.Add(new Member { Id = 1007, Name = "Lisa", Email = "Lisa@gmail.com", Phone = 0123881881 });
            item.Add(new Member { Id = 1006, Name = "Sophia", Email = "Sophia@gmail.com", Phone = 0988776611 });
            item.Add(new Member { Id = 1005, Name = "OLeng", Email = "Oleng@gmail.com", Phone = 0912717818 });
            item.Add(new Member { Id = 1004, Name = "Enimom", Email = "Enimom@gmail.com", Phone = 01666161922 });
            item.Add(new Member { Id = 1003, Name = "Stalin", Email = "Stalin@gmail.com", Phone = 0977818999 });
            this.listView.ItemsSource = item;
        }
    }
}

- Chạy chương trình với Vertical

 Với Horizontal