Microsoft Surface控件之LibraryContainer

      今天，我介绍一下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.GroupDescriptions>
                <PropertyGroupDescription PropertyName="@category" />
            </CollectionViewSource.GroupDescriptions>
        </CollectionViewSource>

        <DataTemplate x:Key="ContainerItemTemplate">
            <Border BorderThickness="1" BorderBrush="White" Margin="3">
                <TextBlock Width="120" Text="{Binding XPath=@subject}" Padding="3" Background="AliceBlue"/>
            </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.StackView>
        <s:StackView 
            NormalizedTransitionSize="1,1"
            ItemTemplate="{StaticResource ContainerItemTemplate}">
        </s:StackView>
    </s:LibraryContainer.StackView>

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

</s:LibraryContainer>

　　

　　下来运行看看:

     好了，LibraryContainer控件就到这里了。

更多内容访问：http://flute.vacau.com/

转载时须注明本文的详细链接，否则作者将保留追究其法律责任。