WPF 与Surface 2.0 SDK 亲密接触–LibraryContainer 篇

     最近比较懒惰一直都没写东西，再不写笔里的墨水就快干了。看过前面关于LibraryStack 和LibraryBar 的介绍后，大家可能已经对Library 控件系列有了进一步了解，本篇将继续介绍LibraryContainer，它其实就是LibraryStack、LibrayBar 的集合体。

     首先，我们仍然需要创建一个DataTemplate 用来控制LibraryStack、LibrayBar 的显示样式。然后新建一个LibraryContainer，在其中增加StackView 和BarView 两种浏览模式。

<s:SurfaceWindow.Resources>
    <DataTemplate x:Key="LibraryBarItemTemplate">
        <Grid >
            <Image Source="{Binding Bitmap}"/>
            <Label FontSize="14" Content="{Binding Label}"/>
        </Grid>
    </DataTemplate>
</s:SurfaceWindow.Resources>

<Grid>
    <s:LibraryContainer x:Name="mlibraryContainer">
        <s:LibraryContainer.StackView>
            <s:StackView ItemTemplate="{StaticResource LibraryBarItemTemplate}"/>
        </s:LibraryContainer.StackView>

        <s:LibraryContainer.BarView>
            <s:BarView ItemTemplate="{StaticResource LibraryBarItemTemplate}"/>
        </s:LibraryContainer.BarView>
    </s:LibraryContainer>
</Grid>

     与上一篇LibraryBar 一样我们继续使用分组的浏览模式，按GroupName 进行分组操作，PhotoAlbum 类请参考这里。

ObservableCollection<PhotoAlbum> items = new ObservableCollection<PhotoAlbum>();
string imagesPath = @"C:\Users\Public\Pictures\Sample Pictures\";

items.Add(new PhotoAlbum(imagesPath + "Hydrangeas.jpg", "Hydrangeas", "Nature"));
items.Add(new PhotoAlbum(imagesPath + "Lighthouse.jpg", "Lighthouse", "Nature"));
items.Add(new PhotoAlbum(imagesPath + "Tulips.jpg", "Tulips", "Nature"));
items.Add(new PhotoAlbum(imagesPath + "Jellyfish.jpg", "Jellyfish", "Animal"));
items.Add(new PhotoAlbum(imagesPath + "Koala.jpg", "Koala", "Animal"));
items.Add(new PhotoAlbum(imagesPath + "Penguins.jpg", "Penguins", "Animal"));

mlibraryContainer.ItemsSource = items;
ICollectionView defaultView = CollectionViewSource.GetDefaultView(items);
defaultView.GroupDescriptions.Add(new PropertyGroupDescription("GroupName"));

运行效果：

按分组选择：

 

点击下方按钮切换为BarView 模式：