Microsoft Surface控件之LibraryContainer

2011/8/9 21:36:44中文系列评论(0)浏览(2132)

今天，我介绍一下LibraryContainer控件，它也是Microsoft Surface2.0当中的一个比较重要的控件，它是一个双视图控件，能在两个视图间任意切换，还可以对当中的项目分组和自定义样式，它也支持非常好的拖放操作。在控制两个视图切换是由两个重要控件实现的，一个是StackView属性控件，一个是BarView属性控件，StackView属性控件控制如何显示栈视图，BarView属性控件控制视图栏如何显示。

在介绍使用之前了解一下它的继承关系：
System.Object
System.Windows.Threading.DispatcherObject
System.Windows.DependencyObject
System.Windows.Media.Visual
System.Windows.UIElement
System.Windows.FrameworkElement
System.Windows.Controls.Control
Microsoft.Surface.Presentation.Controls.LibraryContainer

下面就使用LibraryContainer控件实现对植物的分类显示。

首先我们先定义一组数据，此数据是一些植物的分类信息,分别是被子植物门（Angiospermae）、裸子植物门（Gymnospermae）、蕨类植物门（Pteridophyta）。

<xmldataprovider x:Key="Data" XPath="PlantItems">
            <x:xdata>
                <plantitems xmlns="">
                    <item subject="Antrophyaceae"   category="Pteridophyta"/>
                    <item subject="Styracaceae"  category="Angiospermae"/>
                    <item subject="Taxaceae"  category="Gymnospermae"/>
                    <item subject="Illiciaceae"  category="Angiospermae"/>
                    <item subject="Welwitschiaceae"  category="Gymnospermae"/>
                    <item subject="Cupressaceae"   category="Gymnospermae"/>           
                    <item subject="Podocarpaceae"  category="Gymnospermae"/>
                    <item subject="Plumbaginaceae"   category="Angiospermae"/>
                    <item subject="Ephedraceae"   category="Gymnospermae"/>
                    <item subject="Alangiaceae"   category="Angiospermae"/>
                    <item subject="Dicksoniaceae"  category="Pteridophyta"/>
                    <item subject="Aspidiaceae"  category="Pteridophyta"/>
                    <item subject="Musaceae"  category="Angiospermae"/>
                    <item subject="Pteridaceae"  category="Pteridophyta"/>
                    <item subject="Davalliaceae"  category="Pteridophyta"/>        
                </plantitems>
            </x:xdata>
        </xmldataprovider>

　　下来我要绑定数据源和定义数据模版，控制如何显示数据。

       <collectionviewsource x:Key="Source" Source="{Binding Source={StaticResource Data}, XPath=Item}" >
            </collectionviewsource><collectionviewsource .GroupDescriptions>
                <propertygroupdescription PropertyName="@category" />
            </collectionviewsource>
        
        
        <datatemplate x:Key="ContainerItemTemplate">
            <border BorderThickness="1" BorderBrush="White" Margin="3">
                <label Width="120" Content="{Binding XPath=@subject}" Padding="3" Background="Blue" />
            </border>
        </datatemplate>

　　最后我们使用LibraryContainer控件，实现数据的绑定和显示。

<s:librarycontainer Name="MainLibraryContainer" 
         Height="260" Width="900"
         Grid.Row="0"
         ViewingMode="Bar"
         CanSwitchViewingMode="True"
         ItemsSource="{Binding Source={StaticResource Source}}">
            </s:librarycontainer><s:librarycontainer .StackView>
                <s:stackview NormalizedTransitionSize="1,1"
            ItemTemplate="{StaticResource ContainerItemTemplate}">
                </s:stackview>
            </s:librarycontainer>

            <s:librarycontainer .BarView>
                <s:barview Rows="3"
            NormalizedTransitionSize="2.5,0.8" 
            ItemTemplate="{StaticResource ContainerItemTemplate}">
                </s:barview>
</s:librarycontainer>