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

     最近比较懒惰一直都没写东西,再不写笔里的墨水就快干了。看过前面关于LibraryStackLibraryBar 的介绍后,大家可能已经对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"));

运行效果:

Capture

按分组选择:

Capture2 Capture4

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

Capture3

posted @ 2011-08-26 14:23 Gnie 阅读(...) 评论(...) 编辑 收藏
Copyright © 2010 Gnie