Windows8 Metro应用开发之C#（3）- 数据控件ListView、GridView、FlipView

本文转载自查看原文 2012-03-22 13:33 6376 数据控件/ Windows8 Metro应用开发之C#/ Metro/ Controls

介绍：

本节主要对Windows 8 中对于Metro应用开发提供的数据控件ListView、GridView、FlipView进行讲解。

ListView数据控件

ListView 控件允许你在一个可自定义的显示项列表显示数据，如果你在项目开发中需要以列表的形式单一的显示你的数据，你可以用ListBox，但是如果你觉得列表的样式单一的展示数据不能满足你的要求，这时你可以使用ListView自定义显示项样式。下面我们看示例：

1.ListView.xaml

1 < UserControl
2      x:Class ="BlankApplication.Controls.ListView"
3     xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4     xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
5     xmlns:local ="using:BlankApplication.Controls"
6     xmlns:d ="http://schemas.microsoft.com/expression/blend/2008"
7     xmlns:mc ="http://schemas.openxmlformats.org/markup-compatibility/2006"
8     mc:Ignorable ="d"
9     d:DesignHeight ="400"
10     d:DesignWidth ="500" >
11 < UserControl.Resources >
12          < CollectionViewSource
13              x:Name ="groupedItemsViewSource"
14
15             IsSourceGrouped ="true"
16             ItemsPath ="Items"
17          />
18
19      </ UserControl.Resources >
20      < Grid Background ="#FFAA6C6C" MinWidth ="500" MinHeight ="500" >
21          < ListView   x:Name ="listview" Background ="Black" ItemsSource =" {Binding Source={StaticResource groupedItemsViewSource}} " Width ="500" Height ="500" >
22 
23              < ListView.GroupStyle >
24                  < GroupStyle >
25                      < GroupStyle.HeaderTemplate >
26                              < DataTemplate >
27                              < StackPanel Orientation ="Horizontal" >
28                                  < Image Source =" {Binding ImageSrc} " Width ="150" Height ="150" />
29                                  < StackPanel >
30                                      < TextBlock Text =" {Binding Title} " FontSize ="20" />
31                                      < TextBlock Text =" {Binding Author} "    />
32                                      < TextBlock Text =" {Binding Datetime} "    />
33                                  </ StackPanel >
34                              </ StackPanel >
35                          </ DataTemplate >
36                      </ GroupStyle.HeaderTemplate >
37                  </ GroupStyle >
38              </ ListView.GroupStyle >
39          </ ListView >
40
41      </ Grid >
42 </ UserControl >

2.ListView.xaml.cs

1 using System;
2 using System.Collections.Generic;
3 using System.Collections.ObjectModel;
4 using System.IO;
5 using System.Linq;
6 using BlankApplication.DataModel;
7 using Windows.Foundation;
8 using Windows.Foundation.Collections;
9 using Windows.UI.Xaml;
10 using Windows.UI.Xaml.Controls;
11 using Windows.UI.Xaml.Controls.Primitives;
12 using Windows.UI.Xaml.Data;
13 using Windows.UI.Xaml.Input;
14 using Windows.UI.Xaml.Media;
15 using Windows.UI.Xaml.Navigation;
16
17
18
19 namespace BlankApplication.Controls
20 {
21      public sealed partial class ListView : UserControl
22     {
23          public ListView()
24         {
25              this.InitializeComponent();
26 ///获取数据源
27             groupedItemsViewSource.Source = new ListViewDataSource().ItemGroups;
28         }
29
30     }
31 }

3.ListViewDataSource.cs

1 using System;
2 using System.Collections.Generic;
3 using System.Collections.ObjectModel;
4 using System.Linq;
5 using System.Text;
6 using System.Threading.Tasks;
7
8 namespace BlankApplication.DataModel
9 {
10
11      public sealed class ListViewDataSource
12     {
13          private ObservableCollection<Painting> _itemGroups = new ObservableCollection<Painting>();
14          public ObservableCollection<Painting> ItemGroups { get { return this._itemGroups; } }
15
16
17          public ListViewDataSource()
18         {
19             _itemGroups.Add(
20                  new Painting() { Title = " 异度空间 ", Author = " Donli ", ImageSrc = " /Assets/atacertaintime_512x512x32.png ", Datetime = " 2012/03/17 10:50 " }
21             );
22             _itemGroups.Add(
23                  new Painting() { Title = " 异度空间1 ", Author = " Donli ", ImageSrc = " /Assets/franziska_512x512x32.png ", Datetime = " 2012/03/17 10:50 " }
24              );
25         _itemGroups.Add(
26                  new Painting() { Title = " 异度空间2 ", Author = " Donli ", ImageSrc = " /Assets/lotte_512x512x32.png ", Datetime = " 2012/03/17 10:50 " }
27              );
28         _itemGroups.Add(
29              new Painting() { Title = " 异度空间3 ", Author = " Donli ", ImageSrc = " /Assets/reachingnewyork_512x512x32.png ", Datetime = " 2012/03/17 10:50 " }
30          );
31              _itemGroups.Add(
32              new Painting() { Title = " 异度空间4 ", Author = " Donli ", ImageSrc = " /Assets/thebluebridge_512x512x32.png ", Datetime = " 2012/03/17 10:50 " }
33          );
34              _itemGroups.Add(
35                           new Painting() { Title = " 异度空间5 ", Author = " Donli ", ImageSrc = " /Assets/turintales_512x512x32.png ", Datetime= " 2012/03/17 10:50 " }
36                       );
37              _itemGroups.Add(
38                           new Painting() { Title = " 异度空间6 ", Author = " Donli ", ImageSrc = " /Assets/kungfupanda_01.png ", Datetime = " 2012/03/17 10:50 " }
39                       );
40              _itemGroups.Add(
41                          new Painting() { Title = " 异度空间7 ", Author = " Donli ", ImageSrc = " /Assets/kungfupanda_02.png ", Datetime = " 2012/03/17 10:50 " }
42                      );
43              _itemGroups.Add(
44                          new Painting() { Title = " 异度空间8 ", Author = " Donli ", ImageSrc = " /Assets/kungfupanda_03.png ", Datetime = " 2012/03/17 10:50 " }
45                      );
46              _itemGroups.Add(
47                          new Painting() { Title = " 异度空间9 ", Author = " Donli ", ImageSrc = " /Assets/kungfupanda_04.png ", Datetime = " 2012/03/17 10:50 " }
48                      );
49         }
50
51     }
52      public class Painting
53     {
54       public string Title { get; set; }
55          public string Author { get; set; }
56          public string ImageSrc { get; set; }
57          public string Datetime { get; set; }
58     }
59 }

GridView数据控件

GridView控件描述一个专用的已排序的列表视图。

1.DataView.xaml

1 < UserControl
2      x:Class ="BlankApplication.Controls.GridView"
3     xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4     xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
5     xmlns:local ="using:BlankApplication.Controls"
6     xmlns:d ="http://schemas.microsoft.com/expression/blend/2008"
7     xmlns:mc ="http://schemas.openxmlformats.org/markup-compatibility/2006"
8     mc:Ignorable ="d"
9     d:DesignHeight ="300"
10     d:DesignWidth ="400" >
11      < UserControl.Resources >
12          < CollectionViewSource
13              x:Name ="groupedItemsViewSource"
14
15             IsSourceGrouped ="true"
16             ItemsPath ="Items"
17          />
18
19      </ UserControl.Resources >
20      < Grid >
21          
22          < GridView Background ="Black" x:Name ="gridview" ItemsSource =" {Binding Source={StaticResource groupedItemsViewSource}} " Width ="500" Height ="500" >
23              < GridView.GroupStyle >
24                  < GroupStyle >
25                      < GroupStyle.HeaderTemplate >
26                          
27                          < DataTemplate >
28                              < StackPanel Orientation ="Horizontal" >
29                                  < Image Source =" {Binding ImageSrc} " Width ="150" Height ="150" />
30                                  < StackPanel >
31                                      < TextBlock Text =" {Binding Title} " FontSize ="20" />
32                                      < TextBlock Text =" {Binding Author} "    />
33                                      < TextBlock Text =" {Binding Datetime} "    />
34                                  </ StackPanel >
35                              </ StackPanel >
36                          </ DataTemplate >
37                      </ GroupStyle.HeaderTemplate >
38                  </ GroupStyle >
39              </ GridView.GroupStyle >
40          </ GridView >
41      </ Grid >
42 </ UserControl >

2.GridView.xaml.cs

1 using System;
2 using System.Collections.Generic;
3 using System.IO;
4 using System.Linq;
5 using BlankApplication.DataModel;
6 using Windows.Foundation;
7 using Windows.Foundation.Collections;
8 using Windows.UI.Xaml;
9 using Windows.UI.Xaml.Controls;
10 using Windows.UI.Xaml.Controls.Primitives;
11 using Windows.UI.Xaml.Data;
12 using Windows.UI.Xaml.Input;
13 using Windows.UI.Xaml.Media;
14 using Windows.UI.Xaml.Navigation;
15
16
17 namespace BlankApplication.Controls
18 {
19      public sealed partial class GridView : UserControl
20     {
21          public GridView()
22         {
23              this.InitializeComponent();
24             groupedItemsViewSource.Source = new ListViewDataSource().ItemGroups;
25         }
26     }
27 }

FlipView数据控件

FlipView控件提供一个通过对子元素项进行翻动显示下一个子元素的数据控件。

1.FlipView.xaml

1 < UserControl
2      x:Class ="BlankApplication.Controls.FlipView"
3     xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4     xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
5     xmlns:local ="using:BlankApplication.Controls"
6     xmlns:d ="http://schemas.microsoft.com/expression/blend/2008"
7     xmlns:mc ="http://schemas.openxmlformats.org/markup-compatibility/2006"
8     mc:Ignorable ="d"
9     d:DesignHeight ="300"
10     d:DesignWidth ="400" >
11      < UserControl.Resources >
12          < CollectionViewSource
13              x:Name ="groupedItemsViewSource"
14
15             IsSourceGrouped ="true"
16             ItemsPath ="Items"
17          />
18
19      </ UserControl.Resources >
20      < Grid >
21
22          < FlipView Background ="Black" ItemsSource =" {Binding Source={StaticResource groupedItemsViewSource}} " Width ="500" Height ="500" >
23              < FlipView.GroupStyle >
24                  < GroupStyle >
25                      < GroupStyle.HeaderTemplate >
26                          < DataTemplate >
27                              < StackPanel Orientation ="Horizontal" >
28                                  < Image Source =" {Binding ImageSrc} " Width ="150" Height ="150" />
29                                  < StackPanel >
30                                      < TextBlock Text =" {Binding Title} " FontSize ="20" />
31                                      < TextBlock Text =" {Binding Author} "    />
32                                      < TextBlock Text =" {Binding Datetime} "    />
33                                  </ StackPanel >
34                              </ StackPanel >
35                          </ DataTemplate >
36                      </ GroupStyle.HeaderTemplate >
37                  </ GroupStyle >
38              </ FlipView.GroupStyle >
39          </ FlipView >
40
41      </ Grid >
42 </ UserControl >

2.FlipView.xaml.cs

1 using System;
2 using System.Collections.Generic;
3 using System.IO;
4 using System.Linq;
5 using BlankApplication.DataModel;
6 using Windows.Foundation;
7 using Windows.Foundation.Collections;
8 using Windows.UI.Xaml;
9 using Windows.UI.Xaml.Controls;
10 using Windows.UI.Xaml.Controls.Primitives;
11 using Windows.UI.Xaml.Data;
12 using Windows.UI.Xaml.Input;
13 using Windows.UI.Xaml.Media;
14 using Windows.UI.Xaml.Navigation;
15
16 namespace BlankApplication.Controls
17 {
18      public sealed partial class FlipView : UserControl
19     {
20          public FlipView()
21         {
22              this.InitializeComponent();
23             groupedItemsViewSource.Source = new ListViewDataSource().ItemGroups;
24         }
25     }
26 }

OK.

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 Windows8 创建分组GridView Windows 8 Metro应用中使用C#连接SQLite及创建数据库,数据表的增删改查 C#操作GridView控件重新想象 Windows 8 Store Apps (11) - 控件之 ListView 和 GridView Attached Command for Windows 8 Metro Style in C# C# Winform ListView控件 C# 中的ListView 控件 c#的listview控件添加表头 C#中向ListView控件中添加一行数据 Windows 8 Metro 应用开发入门(三)：工具栏和对话框