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

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

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

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

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

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

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

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

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

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

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

运行效果：

按分组选择：

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

作者：李敬然（Gnie）
出处：{GnieTech} （http://www.cnblogs.com/gnielee/）