如何在 Expression Blend 中将 CollectionViewSource 与设计时数据一起使用? [英] How to use CollectionViewSource with design time data in Expression Blend?

问题描述

我想知道如何使用 CollectionViewSource 在位于 SampleData.xaml 内的 Expression Blend 中显示设计时数据?在更改代码以使用 CVS 之前，我使用了 ObservableCollection.我需要对里面的项目进行过滤和排序，因此我更改了代码以使用 CVS.现在，我的设计师抱怨无法用适当的结构填充 SampleData 的 NextItems 以显示在 Expression Blend 中.这是我在应用程序中使用的一些代码:

I wonder how I can show design time data in Expression Blend that is located inside a SampleData.xaml using a CollectionViewSource? Before changing my code to use the CVS, I used an ObservableCollection. I was in the need to filter and sort the items inside there, thus I changed the code to use the CVS. Now my designer complains about not being able to fill the SampleData's NextItems with a proper structure to show up in Expression Blend. Here is some code I use inside the app:

MainViewModel.cs

MainViewModel.cs

class MainViewModel
{
    public MainViewModel()
    {
        AllItems = new ObservableCollection<ItemViewModel>();
        NextItems = new CollectionViewSource();
        NextItems.Source = AllItems;
    }

    public CollectionViewSource NextItems
    {
        get;
        private set;
    }

    public ObservableCollection<ItemViewModel> AllItems
    {
        get;
        private set;
    }

    some functions to fill, filter, sort etc...
}

MainView.xaml:

MainView.xaml:

<phone:PhoneApplicationPage
    ... some other stuff ...
    d:DesignWidth="480"
    d:DesignHeight="728"
    d:DataContext="{d:DesignData SampleData/SampleData.xaml}">

    <Grid
        x:Name="LayoutRoot"
        Background="Transparent">
        <controls:Panorama>
            <controls:PanoramaItem>
                <ListBox ItemsSource="{Binding NextItems.View}">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <Image Source="{Binding Image}" />
                                <StackPanel>
                                    <TextBlock Text="{Binding FullName}" />
                                </StackPanel>
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </controls:PanoramaItem>
        </controls:Panorama>
    </Grid>
</phone:PhoneApplicationPage>

示例数据.xaml

<local:MainViewModel
    xmlns:local="clr-namespace:MyAppNamespace"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:swd="clr-namespace:System.Windows.Data;assembly=System.Windows" >
    <local:MainViewModel.AllItems>
        <local:ItemModel
            FullName="Dummy"
            Image="/Images/dummy.png" />
    </local:MainViewModel.AllItems>

    <local:MainViewModel.NextItems>

        How to fill the CollectionViewSource's Source?

    </local:MainViewModel.NextItems>
</local:MainViewModel>

所以我找不到答案的问题是如何在 SampleDate.xaml 中填充 NextItems 的源?任何帮助将不胜感激.

So the question I can't find an answer to is how to fill the Source for NextItems in SampleDate.xaml? Any help would be much appreciated.

推荐答案

如果您想在设计器中显示示例数据，我建议您从代码中进行.有两种为 Blend Designer 或 VStudio 设计器生成示例数据的方法:

if you want to show sample data in the designer I would recommend you to do it from code. There are two ways of generating sample data for the Blend Designer or the VStudio designer:

1. 像您一样从 XML 文件中获取.
2. 来自 c# 类 -> 最佳选择

1. From an XML file as you do.
2. From a c# class -> Best option

最佳选择.

在 WPF、Windows 8 和 WP7.5 及更高版本中，您可以访问名为:Windows.ApplicationModel.DesignMode.DesignModeEnabled 的属性，利用它您可以从您的视图中为 ObservableCollection 设置种子模型:

In WPF, in windows 8 and in WP7.5 and highger, you can access a propertie called:Windows.ApplicationModel.DesignMode.DesignModeEnabled making use of it you can seed your ObservableCollection from your view model:

    public class MainViewModel
{
    public MainViewModel()
    {
        AllItems = new ObservableCollection<ItemViewModel>();

        if (DesignMode.DesignModeEnabled)
        {
            AllItems = FakeDataProvider.FakeDataItems;
        }
        NextItems.Source = AllItems;
    }

    public CollectionViewSource NextItems
    {
        get;
        private set;
    }

    public ObservableCollection<ItemViewModel> AllItems
    {
        get;
        private set;
    }
}

这样，如果你改变模型，你就不必重新生成一个 XML 文件，它比 C# 文件更清晰一点.FakeDataProvider 是一个静态类，其中存储了所有设计时假数据.因此，在您的 XAML 中，您唯一需要做的就是将您的 Listbox 绑定到您的 ViewModel 集合.

In this way, if you change the model, you dont' have to regenerate an XML file, it's a little bit cleaner from a C# file. The FakeDataProvider is an static class where all design-time fake data are stored. So in you XAML the only thing you have to do is to bind your Listbox to the collection of your ViewModel.

这篇关于如何在 Expression Blend 中将 CollectionViewSource 与设计时数据一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！