WP8.1开发中ListView控件加载图列表的简单使用（1）

      我也是刚接触WP编程没几个月，就是在这段时间一直闲着没事，然后又比较喜欢WP这款系统，就学习了WP这方面的开发言语，自学是很困难的，掌握这方面的资料不多，很初级，就是自己在网上找资料学习过程中，看到别人的分享让我学到了很多，所以我也想分享一下自己的经验，另一方面也希望和大家交流交流，并得到大家的指点。

      好了，不多说了，现在开始进入正题吧：

      ListView这个控件用的很多，而且功能很强大，在我练习开发两个小软件的之前，我以为很简单没什么内容，谁知在开发过程中，才知道它的功能之多，现在就简单说其中的一个功能：加载显示列表图片；

先上Page上的 XAML代码：

<Page
    x:Class="圣经故事1.BlankPage1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:圣经故事1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>

        <!--<Grid.Resources></Grid.Resources>之间注册要绑定的数据-->
        <Grid.Resources>
            <CollectionViewSource x:Name="itemcollectionSource" IsSourceGrouped="True" ItemsPath="DirNameList"/><!--ItemsPath=我一直没怎么搞懂，在这里这个可不要,没什么用-->
        </Grid.Resources>

<!--<ScrollViewer><ScrollViewer.Content></ScrollViewer.Content></ScrollViewer>在之间的ListView控件上加滚动条-->
        <ScrollViewer>
            <ScrollViewer.Content>
                
                    <StackPanel>
                        <ListView x:Name="lv" ItemsSource="{Binding Source={StaticResource itemcollectionSource}}">
                            <ListView.GroupStyle>
                                <GroupStyle x:Name="gs">
                                    <GroupStyle.HeaderTemplate>
                                        <DataTemplate>
                                            <StackPanel Orientation="Horizontal">
                                                <Image x:Name="im1"  Source="{Binding Path=DirectoryImageSource}" Height="240" Width="240" Stretch="Uniform"/>
                                                <StackPanel>
                                                    <TextBlock x:Name="te1" Text="{Binding Path=DirectoryName}" />
                                                </StackPanel>
                                            </StackPanel>

                                        </DataTemplate>
                                    </GroupStyle.HeaderTemplate>
                                </GroupStyle>
                            </ListView.GroupStyle>
                        </ListView>
                    </StackPanel>
                
            </ScrollViewer.Content>
        </ScrollViewer>
        
    </Grid>
</Page>

然后再写一个Model类（当然也可以写成自动属性，我习惯这样写；MVVM架构中的M）：

  public class DirectoryModel
    {
        private string _directoryName;
        public string DirectoryName//图片名称的属性
        {
            get { return _directoryName; }
            set { _directoryName = value; }
        }

        private string _directoryImageSource;
        public string DirectoryImageSource//图片路径的属性
        {
            get { return _directoryImageSource; }
            set { _directoryImageSource = value; }
        }
    }

再建一个ViewModel类（MVVM架构中的VM）：

   class DirectoryViewModel
    {

        private ObservableCollection<DirectoryModel> _dirNameList = new ObservableCollection<DirectoryModel>();
        public ObservableCollection<DirectoryModel> DirNameList
        {
            get { return _dirNameList; }
            set { _dirNameList=value; }
        }
        public DirectoryViewModel()
        { }
        public DirectoryViewModel( ObservableCollection<DirectoryModel> list1)
        {
            this.DirNameList = list1;
        }
        
    }

最后是后台代码了：

 public BlankPage1()
        {
            this.InitializeComponent();

 ObservableCollection<DirectoryModel> dnmList = new ObservableCollection<DirectoryModel>()//这里用ObservableCollection<T>集合，是因为它能实时更改数据，
//且在加载大量数据时能实时加载，不是一次加载完，比如300张图片它可能加载50张，当你在下拉过程中实时更并加载其它的图片；
        {
            new DirectoryModel() { DirectoryImageSource="Assets/DirectoryImages/1.jpg", DirectoryName="asdfaf"},
            new DirectoryModel() { DirectoryImageSource="Assets/DirectoryImages/2.jpg", DirectoryName="fffffffffffff" },
            new DirectoryModel() { DirectoryImageSource="Assets/DirectoryImages/3.jpg", DirectoryName="aaaaaaaaaasfsaf" },
            new DirectoryModel() { DirectoryImageSource="Assets/DirectoryImages/4.jpg", DirectoryName="aaaaaaaaaasfsaf" },
        };

DirectoryViewModel dvm= new DirectoryViewModel(dnmList); //对dvm进行实例化
            this.itemcollectionSource.Source =dvm.DirNameList;//将dvm的集合属性绑定到资源当中
        }

好了，这样就完成了，上一张效果图：

 

我现在也在学习当中，一直在练习MVVM架构及LISTVIEW这方面数据绑定，理解不是太好，如果有哪错误或不合适的地方请各位指正，