DevExpress官网

本期为你呈现 DevExpress Windows 8 XAML如何从数据源中植入幻灯片视图。SlideView幻灯片将以一个水平滚动条进行查看。

1、首先，在开始之前，从官网上下载一个初始项目：

How to: Populate SlideView with Data from Datasource (Draft)

2、在Visual Studio加载这个初始项目，打开MainPage.xaml文件，它包含了可以在一个网格控件内创建空SlideView的代码：

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" Height="500" VerticalAlignment="Center"> 
    <Layout:SlideView> 
    </Layout:SlideView> 
</Grid> 

3、在page resources内定义一个数据源：

<Page.Resources> 
    <data:WritersData x:Key="sampleWritersData" /> 
</Page.Resources> 
<Grid DataContext="{StaticResource sampleWritersData}" ...> 
...

被定义的WritersData类包含DataSource集合属性，SlideView将被绑定到这个集合中。

4、部署WritersData.DataSource集合到SlideView.ItemsSource属性：

<!--Bind SlideView to a collection of items--> 
<Layout:SlideView ItemsSource="{Binding DataSource}"> 
</Layout:SlideView> 

5、在 SlideView的打开和关闭标签之间，添加以下代码：

<!--The template to visualize an item's header--> 
<Layout:SlideView.HeaderTemplate> 
    <DataTemplate> 
        <TextBlock Text="{Binding Name}"/> 
    </DataTemplate> 
</Layout:SlideView.HeaderTemplate> 

这些代码定义了SlideView可视化项目标题的模板，项目标题将会渲染成一个TextBlock，显示一个Writer.Name属性值。

6、要定义一个可视化SlideView项目的内容模板，在SlideView对象定义内添加以下代码：

<Layout:SlideView.ItemTemplate> 
    <DataTemplate> 
        <Layout:LayoutControl Width="400" Orientation="Vertical" HorizontalAlignment="Center" Margin="10,10"> 

            <Layout:LayoutControl.Resources> 
                <Style TargetType="TextBlock"> 
                    <Setter Property="TextWrapping" Value="Wrap"/> 
                    <Setter Property="VerticalAlignment" Value="Center"/> 
                    <Setter Property="Width" Value="100"/> 
                </Style> 
            </Layout:LayoutControl.Resources> 

            <Layout:LayoutGroup Orientation="Horizontal" > 
                <Image Source="{Binding ImageSource}" Height="200" Width="150"/> 
                <Layout:LayoutGroup Orientation="Vertical" VerticalItemSizeMode="AutoSize"> 
                    <Layout:LayoutItem Header="Name:" > 
                        <TextBlock Text="{Binding Name}"/> 
                    </Layout:LayoutItem> 
                    <Layout:LayoutItem Header="Occupation:"> 
                        <TextBlock Text="{Binding Occupation}"/> 
                    </Layout:LayoutItem> 
                    <Layout:LayoutItem Header="Genres:" > 
                        <TextBlock Text="{Binding Genres}" /> 
                    </Layout:LayoutItem> 
                    <Layout:LayoutItem Header="Born:" > 
                        <TextBlock Text="{Binding Born}"/> 
                    </Layout:LayoutItem> 
                    <Layout:LayoutItem Header="Died:" > 
                        <TextBlock Text="{Binding Died}"/> 
                    </Layout:LayoutItem> 
                </Layout:LayoutGroup> 
            </Layout:LayoutGroup> 

            <Layout:LayoutItem Header="Notes:" ShowHeader="False" HeaderPosition="Top"> 
                <TextBlock Text="{Binding Notes}" Width="360"/> 
            </Layout:LayoutItem> 
        </Layout:LayoutControl> 
    </DataTemplate> 
</Layout:SlideView.ItemTemplate> 

7、运行程序，并将看到以下结果：