Windows 8实例教程系列 - 数据绑定高级实例

原文:Windows 8实例教程系列 - 数据绑定高级实例

上篇Windows 8实例教程系列 - 数据绑定基础实例中,介绍Windows 8应用开发数据绑定基础,其中包括一些简单的数据绑定控件的使用。

本篇将介绍较为复杂的数据绑定控件实例, 其中包括ListView, GridView,以及GridView分组,GridView分组缩放等绑定功能。

了解ListView和GridView数据绑定控件

两个控件都是继承自ItemsControl类,在功能上类似,都是在应用中显示数据集合,但是显示方式不同。

ListView显示方式为垂直堆栈形式,以列表的形式显示数据;常用于显示简洁数据列表,选中选项后显示详细数据。

GridView显示方式是平行堆栈形式,经常会用于显示较为丰富的数据集合,例如,相册列表应用,显示照片在每个选项。

 

 

ListView控件

前台代码:

<ListView x:Name="lvMainListView" Margin="5"  VerticalAlignment="Top" MaxWidth="400" HorizontalAlignment="Left"
                  ItemTemplate="{StaticResource ContactTemplate}" ScrollViewer.VerticalScrollBarVisibility="Auto" BorderBrush="White" BorderThickness="2"
                  ScrollViewer.HorizontalScrollBarVisibility="Disabled" SelectionMode="Single"
                  SelectionChanged="lvMainListView_SelectionChanged_1"/>

在ListView中使用了自定义ItemTemplate,自定义设置选项布局,

<Page.Resources>

        <x:String x:Key="AppName">Windows 8实例教程 - ListView</x:String>

        <Style x:Key="ContactEmailStyle" TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Segoe UI Light"/>
            <Setter Property="FontSize" Value="18"/>
        </Style>

        <Style x:Key="ContactAuthorStyle" TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Segoe UI Light"/>
            <Setter Property="FontSize" Value="14"/>
        </Style>

        <DataTemplate x:Key="ContactTemplate">
            <Grid Margin="10">
                <StackPanel Orientation="Horizontal">
                    <Image Source="{Binding Thumbnail}" Height="60" Width="60" Margin="0,0,10,0"/>
                    <StackPanel Margin="0,0,0,0" Orientation="Vertical">
                        <TextBlock TextWrapping="Wrap" Style="{StaticResource ContactEmailStyle}"
                                   Text="{Binding Email}" />
                        <TextBlock TextWrapping="Wrap" Style="{StaticResource ContactAuthorStyle}" Text="{Binding Author}" />
                    </StackPanel>
                </StackPanel>
            </Grid>
        </DataTemplate>

    </Page.Resources>

后台代码:

public sealed partial class MainPage : Page
    {
        private ObservableCollection<Contact> Contacts = new ObservableCollection<Contact>();

        public MainPage()
        {
            this.InitializeComponent();
            LoadContacts();
        }

        private void LoadContacts()
        {
            Contacts.Add(new Contact
            {
                Email = "qq34506@hotmail.com",
                Author = "Kevin Fan",
                Thumbnail = new BitmapImage(new Uri("ms-appx:///Assets/60Mail01.png", UriKind.RelativeOrAbsolute))
            });

            Contacts.Add(new Contact
            {
                Email = "admin@silverlightchina.net",
                Author = "银光中国",
                Thumbnail = new BitmapImage(new Uri("ms-appx:///Assets/60Mail02.png", UriKind.RelativeOrAbsolute))
            });

            Contacts.Add(new Contact
            {
                Email = "SandyY@yahoo.ca",
                Author = "Sandy Yang",
                Thumbnail = new BitmapImage(new Uri("ms-appx:///Assets/60Mail03.png", UriKind.RelativeOrAbsolute))
            });

            lvMainListView.ItemsSource = Contacts;
        }

        private void lvMainListView_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
        {
            SelectedListItem.Text = String.Format("Selected Contact's Email: {0}", ((Contact)e.AddedItems[0]).Email);
        }
    }

GridView控件

前台代码:

<GridView x:Name="gvMainGridView" HorizontalAlignment="Left" Margin="45,30,0,0" Grid.Row="1" VerticalAlignment="Top" MinWidth="200" MinHeight="200"
            ItemTemplate="{StaticResource ContactTemplate}" ItemsPanel="{StaticResource GridViewItemsPanel}"
            BorderBrush="White" BorderThickness="2" ScrollViewer.VerticalScrollBarVisibility="Auto"
            ScrollViewer.HorizontalScrollBarVisibility="Auto" SelectionMode="Single" Width="800"
            SelectionChanged="gvMainGridView_SelectionChanged_1" />

GridView控件使用两个自定义Template,分别为ItemTemplate和ItemsPanel,

<Page.Resources>

        <x:String x:Key="AppName">Windows 8实例教程 - GridView</x:String>

        <Style x:Key="ContactEmailStyle" TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Segoe UI Light"/>
            <Setter Property="FontSize" Value="18"/>
        </Style>

        <Style x:Key="ContactAuthorStyle" TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Segoe UI Light"/>
            <Setter Property="FontSize" Value="14"/>
        </Style>

        <DataTemplate x:Key="ContactTemplate">
            <Grid Margin="10">
                <StackPanel Orientation="Horizontal">
                    <Image Source="{Binding Thumbnail}" Height="60" Width="60" Margin="0,0,10,0"/>
                    <StackPanel Margin="0,0,0,0" Orientation="Vertical">
                        <TextBlock TextWrapping="Wrap" Style="{StaticResource ContactEmailStyle}"
                                   Text="{Binding Email}" />
                        <TextBlock TextWrapping="Wrap" Style="{StaticResource ContactAuthorStyle}" Text="{Binding Author}" />
                    </StackPanel>
                </StackPanel>
            </Grid>
        </DataTemplate>

        <ItemsPanelTemplate x:Key="GridViewItemsPanel">
            <WrapGrid MaximumRowsOrColumns="2" />
        </ItemsPanelTemplate>

    </Page.Resources>

 

后台代码:

public sealed partial class MainPage : Page
    {
        private ObservableCollection<Contact> Contacts = new ObservableCollection<Contact>();
        private CollectionViewSource GroupedItems = new CollectionViewSource { IsSourceGrouped = true };

        public MainPage()
        {
            this.InitializeComponent();
            LoadContacts();
        }

        private void gvMainGridView_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
        {
            SelectedGridItem.Text = String.Format("Selected Contact's Email: {0}", ((Contact)e.AddedItems[0]).Email);
        }

        private void LoadContacts()
        {
            Contacts.Add(new Contact
            {
                Email = "qq34506@hotmail.com",
                Author = "Kevin Fan",
                Thumbnail = new BitmapImage(new Uri("ms-appx:///Assets/60Mail01.png", UriKind.RelativeOrAbsolute))
            });

            Contacts.Add(new Contact
            {
                Email = "admin@silverlightchina.net",
                Author = "银光中国",
                Thumbnail = new BitmapImage(new Uri("ms-appx:///Assets/60Mail02.png", UriKind.RelativeOrAbsolute))
            });

            Contacts.Add(new Contact
            {
                Email = "SandyY@yahoo.ca",
                Author = "Sandy Yang",
                Thumbnail = new BitmapImage(new Uri("ms-appx:///Assets/60Mail03.png", UriKind.RelativeOrAbsolute))
            });

            gvMainGridView.ItemsSource = Contacts;
        }
    }

Windows store应用中,对于GridView控件使用较为频繁,下面两个实例是从GridView扩展而来。

GridView分组 

GridView控件分组,通过对于相同对象属性绑定实现分组功能。该实例分为Developer,Designer和Manager三组,

前台代码:

该实例使用GridView实例中相同模板代码,这里不再重复赘述,

<GridView x:Name="gvMainGridView" HorizontalAlignment="Left" Margin="45,30,0,0" Grid.Row="1" VerticalAlignment="Top" MinWidth="200" MinHeight="200"
            ItemTemplate="{StaticResource ContactTemplate}" ItemsPanel="{StaticResource GridViewItemsPanel}"
            BorderBrush="White" BorderThickness="2" ScrollViewer.VerticalScrollBarVisibility="Auto"
            ScrollViewer.HorizontalScrollBarVisibility="Auto" SelectionMode="Single" MaxWidth="1000"
            SelectionChanged="gvMainGridView_SelectionChanged_1">
                <GridView.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.HeaderTemplate>
                            <DataTemplate>
                                <TextBlock Text='{Binding Role}' Foreground="White" FontSize="25" Margin="5" />
                            </DataTemplate>
                        </GroupStyle.HeaderTemplate>
                    </GroupStyle>
                </GridView.GroupStyle>
            </GridView>

后台代码:

后台代码数据源代码与GridView实例类似,只是在页面载入时需要对数据源进行分组操作。代码如下:

        private List<Contact> AllContacts = new List<Contact>();
        private CollectionViewSource ContactCollection = new CollectionViewSource { IsSourceGrouped = true, ItemsPath = new PropertyPath("Contacts") };

        public MainPage()
        {
            this.InitializeComponent();
            LoadContacts();
            var groupedContacts = AllContacts.GroupBy(x => x.Role).Select(x => new GroupContactList { Role = x.Key, Contacts = x.ToList() });
            ContactCollection.Source = groupedContacts.ToList();
            gvMainGridView.ItemsSource = ContactCollection.View;
        }

 

 GridView Zoom分组

该实例根据GridView分组功能使用SemanticZoom控件实现数据分组以及缩放功能。

前台代码:

<SemanticZoom x:Name="MainZoomControl" HorizontalAlignment="Left" Margin="45,30,0,0" Grid.Row="1" VerticalAlignment="Top">
                <SemanticZoom.ZoomedOutView>
                    <GridView x:Name="gvZoomedOutGridView" MinWidth="200" MinHeight="200"
                    ItemTemplate="{StaticResource ZoomedOutBookTemplate}"
                    BorderBrush="White" BorderThickness="2" ScrollViewer.VerticalScrollBarVisibility="Auto"
                    ScrollViewer.HorizontalScrollBarVisibility="Auto" SelectionMode="Single" MaxWidth="1000" >
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center" />
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                    </GridView>
                </SemanticZoom.ZoomedOutView>
                <SemanticZoom.ZoomedInView>
                    <GridView x:Name="gvZoomedInGridView" HorizontalAlignment="Left" Margin="45,30,0,0" Grid.Row="1" VerticalAlignment="Top" MinWidth="200" MinHeight="200"
                    ItemTemplate="{StaticResource ContactTemplate}" ItemsPanel="{StaticResource GridViewItemsPanel}"
                    BorderBrush="White" BorderThickness="2" ScrollViewer.VerticalScrollBarVisibility="Auto"
                    ScrollViewer.HorizontalScrollBarVisibility="Auto" SelectionMode="Single" MaxWidth="1000"
                              ItemsSource="{Binding Source={StaticResource ContactCollection}}">
                        <GridView.GroupStyle>
                            <GroupStyle>
                                <GroupStyle.HeaderTemplate>
                                    <DataTemplate>
                                        <TextBlock Text='{Binding Role}' Foreground="White" FontSize="25" Margin="5" />
                                    </DataTemplate>
                                </GroupStyle.HeaderTemplate>

                                <GroupStyle.Panel>
                                    <ItemsPanelTemplate>
                                        <VariableSizedWrapGrid Orientation="Vertical" Height="400" />
                                    </ItemsPanelTemplate>
                                </GroupStyle.Panel>
                            </GroupStyle>
                        </GridView.GroupStyle>
                    </GridView>
                </SemanticZoom.ZoomedInView>
            </SemanticZoom>

后代代码:

private List<GroupContactList> GroupedContacts = new List<GroupContactList>();
        private List<Contact> AllContacts = new List<Contact>();

        public MainPage()
        {
            this.InitializeComponent();
            LoadContacts();

            var groupedContacts = AllContacts.GroupBy(x => x.Role).Select(x => new GroupContactList { Role = x.Key, Contacts = x.ToList() });
            GroupedContacts = groupedContacts.ToList();
            ContactCollection.Source = groupedContacts.ToList();
            gvZoomedOutGridView.ItemsSource = ContactCollection.View.CollectionGroups;

        }

 

本篇介绍一些较为复杂的数据绑定控件实例,欢迎留言讨论学习。 

本篇源代码

加入QQ群交流学习:

22308706(一群) 超级群500人 
37891947(二群) 超级群500人 
100844510(三群) 高级群200人 
32679922(四群) 超级群500人 
23413513(五群) 高级群200人 
32679955(六群) 超级群500人 
88585140(八群) 超级群500人 
128043302(九群 企业应用开发推荐群) 高级群200人 
101364438(十群) 超级群500人 

68435160(十一群 企业应用开发推荐群)超级群500人

时间: 2024-09-20 19:04:25

Windows 8实例教程系列 - 数据绑定高级实例的相关文章

Windows 8实例教程:数据绑定高级实例

上篇Windows 8实例教程系列 - 数据绑定基础实例中,介绍Windows 8应用开 发数据绑定基础,其中包括一些简单的数据绑定控件的使用. 本篇将介绍较为复杂的数据绑定控件实例, 其中包括ListView, GridView, 以及GridView分组,GridView分组缩放等绑定功能. 了解ListView和GridView数据绑定控件 两个控件都是继承自ItemsControl类,在功能上类似,都是在应用中显示数据 集合,但是显示方式不同. ListView显示方式为垂直堆栈形式,以

Windows 8实例教程系列 - 数据绑定基础实例

原文:Windows 8实例教程系列 - 数据绑定基础实例   数据绑定是WPF,Silverlight以及Windows Phone应用开发中最为常用的开发技术,在基于XAML的Windows Store应用开发中,数据绑定是其开发特性之一,本文将讨论Windows 8应用开发数据绑定的使用. 快速理解数据绑定(Data Binding) 对于应用开发人员而言,无论是应用界面还是应用逻辑往往是为了简化用户对于数据层的操作,通过应用控件实现数据同步更新是最直接最简单的.但是在实际项目开发中,复杂

Windows 8实例教程:数据绑定基础实例

数据绑定是WPF,Silverlight以及Windows Phone应用开发中最为常用的开发 技术,在基于XAML的Windows Store应用开发中,数据绑定是其开发特性之一,本 文将讨论Windows 8应用开发数据绑定的使用. 快速理解数据绑定(Data Binding) 对于应用开发人员而言,无论是应用界面还是应用逻辑往往是为了简化用户对 于数据层的操作,通过应用控件实现数据同步更新是最直接最简单的.但是在实 际项目开发中,复杂的数据结构以及繁琐的数据操作使应用控件与数据交互难度 增

Windows 8实例教程系列 - 布局控制

原文:Windows 8实例教程系列 - 布局控制 与传统应用类似,Windows store应用允许开发人员通过布局控件管理应用UI. 本篇将讨论Windows8布局设计控制. Windows 8布局控件 在Windows Store应用设计中,布局控件是控制对象位置和尺寸的,由于Windows Store应用不仅仅面向桌面操作系统,而且还需要适应移动设备的部署,所以在设计时,往往需要考虑到不同的分辨率或者硬件屏幕尺寸标准下应用布局的适配性,最大程度的保持设计灵活性是应用设计原则重要环节之一.

Windows 8实例教程系列 - 理解应用框架

原文:Windows 8实例教程系列 - 理解应用框架     Windows 操作系统之所以风靡世界,是因为其"易学易用",从用户的角度出发,让数以万计的非IT人员使用计算机实现娱乐,工作等目的.Windows 8继承Windows桌面的优点,同时提供一种新的用户体验模式 - Windows store风格.换句话说,Windows 8操作系统存在两种不同风格的应用. 本篇将介绍Windows 8应用框架以及开发工具的使用. 理解Windows 8应用框架 正如前文所说,Window

Windows 8实例教程系列 - 自定义应用风格

原文:Windows 8实例教程系列 - 自定义应用风格 在Windows 8 XAML实例教程中,曾经提及过应用风格设计方法以及如何创建可复用样式代码.本篇将深入讨论如何创建自定义Windows8应用风格. 随着计算机硬件性能的提升,用户对于软件应用的体验性要求越来越高,而应用的风格设计也成为衡量应用成功与否的一个标准. 模板样式基础 在XAML实例教程中曾介绍过,Windows8样式应用可以根据应用范围不同进行分类, 1. 局部资源(Page Resources),该样式模板代码位于当前页面

Windows 8实例教程系列 - 开篇

原文:Windows 8实例教程系列 - 开篇   2012年10月26日,微软发布Windows 8操作系统以及自主品牌平板电脑Surface,Windows作为世界上最流行的操作系统,发布一周内,下载量超过400万.毋庸置疑 Windows Store正在酝酿着巨大的Windows应用市场,越来越多的应用开发商,互联网运营商,外包开发团队以及个人承包商加入到 Windows Store应用开发行列,相信未来几个月Windows Store应用数量将突飞猛进. 为了帮助更多开发人员学习和了解W

一步一步手把手教你搭建网站(实例教程系列)

&http://www.aliyun.com/zixun/aggregation/37954.html">nbsp;  制作一个网站总得来说分四步:申请域名.申请虚拟主机.制作网页,网站宣传推广! 教程域名,空间业务购买以www.abc.com为例,其他类似 1.申请域名:最好用COM,没有的话就CN和NET吧,域名简短为宜,查询地址:http://www.b86.net/domain/ 2.申请虚拟主机:一般的现在的网站100M-1000M就差不多了,现在选择虚拟主机双线主机,比

又拍云异步上传实例教程详解_php实例

网站静态文件存储在又拍云,之前上传是通过又拍云的的FORM API进行. 当产品经理歪着脑袋走向你的时候,哎呀呀,这用户信息这里,上传要无刷新的效果了.  这他***,自己偷偷抱怨一会会,怎么搞喃?听说这家伙要一个好听的名字,异步上传,高大上档次挺像我的. 根据我们的观察,此处有两个重点: ①.怎么实现异步上传 ②.怎么上传到又 拍 云 首先我们要实现异步上传,就需要利用js里面的FormData对象,据说,这家伙不支持ie6 7的,ie8就不太清楚了,据说哈,说错了不负责的. 不过喃,我们也不