Controls: GridView hiển thị một danh sách lưới trên Windows Store Apps (C #)

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

- GridView: Hiển thị danh sách dữ liệu dạng lưới

<GridView x:Name="name"></GridView>

- Example 1: Show GridView và Click

MainPage.xaml

Windows Store 2017

<Page
    x:Class="GridView.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GridView"
    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}">
        <GridView x:Name="gdView" Margin="260,230,306,383" FontSize="46" Background="DarkCyan" SelectionChanged="gdView_SelectionChanged">
            <x:String>Item 1</x:String>
            <x:String>Item 2</x:String>
            <x:String>Item 3</x:String>
            <x:String>Item 4</x:String>
        </GridView>
    </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.Popups;
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 GridView
{
    /// <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();
        }

        private void gdView_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            MessageDialog msgDialog = new MessageDialog("Your Selected : " + gdView.SelectedItem.ToString(), "Result");
            msgDialog.ShowAsync();
        }
    }
}

- Chạy chương trình

 - Click Item 1 show MessageDialog

-Example 2: Hiển thị danh sách lưới khung hình

Tự động xếp khung hình

Khi tăng kích thước chiều cao

MainPage.xaml

Windows Store 2017

<Page
    x:Class="GridView.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GridView"
    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}">
        <GridView x:Name="gdView" Margin="140,170,81,128" FontSize="46" Background="DarkCyan" >
            <Border Height="160" Width="200" Margin="5" Background="Blue" />
            <Border Height="160" Width="200" Margin="5" Background="Green" />
            <Border Height="160" Width="200" Margin="5" Background="Red" />
            <Border Height="160" Width="200" Margin="5" Background="Yellow" />
            <Border Height="160" Width="200" Margin="5" Background="Cyan" />
            <Border Height="160" Width="200" Margin="5" Background="Magenta" />
            <Border Height="160" Width="200" Margin="5" Background="DarkKhaki" />
            <Border Height="160" Width="200" Margin="5" Background="Beige" />
            <Border Height="160" Width="200" Margin="5" Background="DarkViolet" />
        </GridView>
    </Grid>
</Page>

-Chạy chương trình

Cuộn ngang

- Example 3: Đưa giá trị vào List Object và hiển thị

MainPage.xaml

Windows Store 2017

<Page
    x:Class="GridView.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GridView"
    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}">
        <GridView x:Name="gdView" Margin="140,170,366,468" FontSize="46" Background="DarkCyan" SelectionChanged="gdView_SelectionChanged" >
            //Để trống
        </GridView>
    </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.Popups;
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 GridView
{
    /// <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<string> item = new List<string>();
            item.Add("Item 1");
            item.Add("Item 2");
            item.Add("Item 3");
            item.Add("Item 4");

            gdView.ItemsSource = item;
        }

        private void gdView_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            MessageDialog msgDialog = new MessageDialog("Your Selected : " + gdView.SelectedItem.ToString(), "Result");
            msgDialog.ShowAsync();

        }
    }
}

- Chạy chương trình

 - Click Item 1 show MessageDialog