Storage / Data: DataBinding với Master View & Details View trên Windows Store Apps (C #)

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

- DataBingding - Details View: Hiển thị dữ liệu trên ScrollViewer điều khiển từ ListView

<ListView>
    <ListView.ItemTemplate>
        <DataTemplate>
            //Binding + click item
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>
<ScrollViewer> 
        //Binding show details có sử dụng Convert Date
</ScrollViewer>

-Example 1: Show Details View có Convert Ngày tháng năm

MainPage.xaml

Windows Store 2017

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

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <ListView x:Name="lvwEmployees" Margin="100" Grid.Column="0" Grid.Row="0" Width="auto" Height="auto">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Background="BurlyWood">
                        <TextBlock Text="{Binding Name}" FontSize="24"></TextBlock>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <ScrollViewer x:Name="EmployeeDetails" Grid.Column="1" Grid.Row="0">
            <StackPanel DataContext="{Binding SelectedItem,ElementName=lvwEmployees}">
                <StackPanel.Resources>
                    <local:DateConverter x:Key="newDate"></local:DateConverter>
                </StackPanel.Resources>
                <TextBlock Text="{Binding Name}" FontSize="24"></TextBlock>
                <TextBlock Text="{Binding Address}" FontSize="24"></TextBlock>
                <TextBlock Text="{Binding Doj,Converter={StaticResource newDate}}" FontSize="24"></TextBlock>
            </StackPanel>
        </ScrollViewer>

    </Grid>
</Page>

Employee.cs

Windows Store 2017

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

namespace DetailsView
{
    class Employee
    {
        public string Name { get; set; }
        public string Address { get; set; }
        public DateTime Doj { get; set; }

    }
}

DateConverter.cs

Windows Store 2017

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.UI.Xaml.Data;

namespace DetailsView
{
    public class DateConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            DateTime data = (DateTime)value;
            return data.Day + "/" + data.Month + "/" + data.Year;
        }

        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            throw new NotImplementedException();
        }
    }

}

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 DetailsView
{
    /// <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();
            List<Employee> listEmps = new List<Employee>() {
                new Employee() {
                    Name="A",
                    Address="Ha Noi",
                    Doj=new DateTime(2016,1,1)
                },
                new Employee() {
                    Name="B",
                    Address="Ha Nam",
                    Doj=new DateTime(2017,1,1)
                },
                new Employee() {
                    Name="C",
                    Address="Thai Binh",
                    Doj=new DateTime(2016,12,19)
                }
            };
            lvwEmployees.ItemsSource = listEmps;
        }
    }
}

-Chạy chương trình