如何使用Expression Blend編輯在Visual Studio中創建的DataTemplate？

Question

對於那些在實際項目中使用Expression Blend和Visual Studio的人，請幫助我了解如何在日常開發/設計任務中使用Blend和Visual Studio ，這是一個真實的場景：

我在Visual Studio中創建了以下簡單的WPF應用程序。 它顯示了一個帶有DataTemplate的客戶對象列表，該對象以簡單的橙色框顯示客戶。

我現在想通過使用Expression Blend 將一些pizazz放入這個DataTemplate中 。

我在Expression Blend中打開這個項目，以為我會看到橙色的盒子，我可以改變它的顏色，在鼠標懸停時創建動畫，調整大小等等。但是， 我在Expression Blend中看到的只是一個完全空白的盒子 。

所以我理解：

• Expression Blend 似乎無法理解我的數據來自ViewModel ，因此不會顯示它。 這是Blend的限制還是我需要以某種方式更改我的代碼，以便Blend可以解釋在運行時會出現什么數據？
• 我正在使用具有“樣本數據”功能的Expression Blend 3。 使用此示例數據功能的最佳方法是什么 ，即使它無法解釋C＃並了解將從ViewModel屬性中填充Listbox的哪些數據，我怎樣才能使它至少產生一些虛擬數據，以便我可以操縱DataTemplate？

XAML：

<Window x:Class="TestStringFormat234.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <DataTemplate x:Key="DataTemplateCustomers">
            <Border CornerRadius="5" Background="Orange" Padding="5" Margin="3">
                <StackPanel Orientation="Horizontal">
                    <TextBlock>
                    <TextBlock.Text>
                        <MultiBinding StringFormat="{}{0} {1} (hired on {2:MMM dd, yyyy})">
                            <Binding Path="FirstName"/>
                            <Binding Path="LastName"/>
                            <Binding Path="HireDate"/>
                        </MultiBinding>
                    </TextBlock.Text>
                    </TextBlock>
                </StackPanel>
            </Border>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <ListBox ItemsSource="{Binding GetAllCustomers}"
                 ItemTemplate="{StaticResource DataTemplateCustomers}">
        </ListBox>
    </Grid>
</Window>

代碼背后：

using System.Windows;
using System.Collections.ObjectModel;
using System;

namespace TestStringFormat234
{
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            DataContext = new CustomerViewModel();
        }
    }

    //view model
    public class CustomerViewModel
    {
        public ObservableCollection<Customer> GetAllCustomers {
            get {
                ObservableCollection<Customer> customers = new ObservableCollection<Customer>();
                customers.Add(new Customer { FirstName = "Jim", LastName = "Smith", HireDate = DateTime.Parse("2007-12-31") });
                customers.Add(new Customer { FirstName = "Jack", LastName = "Jones", HireDate = DateTime.Parse("2005-12-31") });
                return customers;
            }
        }
    }

    //model
    public class Customer
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public DateTime HireDate { get; set; }
    }
}

Answer 1

我只是想出來，所以請允許我回答我自己的問題。

我閱讀了Laurent的Bugnion文章，並且發現我只需要調整上面的代碼，這樣我就可以在Expression Blend GUI中看到我的ViewModel中的數據，並且能夠在Blend中編輯DataTemplate，保存它，以及然后繼續在Visual Studio中編輯。

基本上改變是：（1）從代碼后面取出DataContext語句，（2）在XAML中添加“本地”命名空間，（3）在XAML中定義本地數據提供者（“TheDataProvider”），（4）綁定到它直接來自ListBox。

以下是完全適用於Expression Blend和Visual Studio的代碼：

XAML：

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:TestStringFormat234"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" x:Name="window" x:Class="TestStringFormat234.Window1"
    Title="Window1" Height="300" Width="300" mc:Ignorable="d">
    <Window.Resources>
        <local:CustomerViewModel x:Key="TheDataProvider"/>

        <DataTemplate x:Key="DataTemplateCustomers">
            <Border CornerRadius="5" Padding="5" Margin="3">
                <Border.Background>
                    <LinearGradientBrush EndPoint="1.007,0.463" StartPoint="-0.011,0.519">
                        <GradientStop Color="#FFF4EEEE" Offset="0"/>
                        <GradientStop Color="#FFA1B0E2" Offset="1"/>
                    </LinearGradientBrush>
                </Border.Background>
                <StackPanel Orientation="Horizontal">
                    <TextBlock>
                    <TextBlock.Text>
                        <MultiBinding StringFormat="{}{0} {1} (hired on {2:MMM dd, yyyy})">
                            <Binding Path="FirstName"/>
                            <Binding Path="LastName"/>
                            <Binding Path="HireDate"/>
                        </MultiBinding>
                    </TextBlock.Text>
                    </TextBlock>
                </StackPanel>
            </Border>
        </DataTemplate>
    </Window.Resources>
    <Grid >
        <ListBox 
            ItemsSource="{Binding Path=GetAllCustomers, Source={StaticResource TheDataProvider}}"
            ItemTemplate="{StaticResource DataTemplateCustomers}" />
    </Grid>
</Window>

代碼背后：

using System.Windows;
using System.Collections.ObjectModel;
using System;

namespace TestStringFormat234
{
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }
    }

    //view model
    public class CustomerViewModel
    {
        public ObservableCollection<Customer> GetAllCustomers {
            get {
                ObservableCollection<Customer> customers = new ObservableCollection<Customer>();
                customers.Add(new Customer { FirstName = "Jim", LastName = "Smith", HireDate = DateTime.Parse("2007-12-31") });
                customers.Add(new Customer { FirstName = "Jack", LastName = "Jones", HireDate = DateTime.Parse("2005-12-31") });
                return customers;
            }
        }
    }

    //model
    public class Customer
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public DateTime HireDate { get; set; }
    }
}

Answer 2

我在這個問題上有一篇博文： http ： //www.robfe.com/2009/08/design-time-data-in-expression-blend-3/

我的帖子是關於在混合中顯示數據而不必在運行時顯示或甚至創建數據。

Answer 3

如果想讓Blend和Visual Studio看到datacontext僅在設計模式下具有什么，那么可以使用頁面上的調試選項來定義。 例如，我的頁面（在代碼隱藏中）將其數據上下文綁定到我的nampespace WP8TestBed中的MainVM，通過將主頁的屬性信息通知為d：DataContext，它僅在設計時使用（我可以使用它綁定到它）向導）並且在運行時期間也不會創建視圖模型的新實例。

下面是示例，需要所有這些命名空間（d，mc和我的ViewModel（MainVM）所在的本地）：

<phone:PhoneApplicationPage
x:Class="WP8TestBed.MainPage"
...
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
xmlns:local="clr-namespace:WP8TestBed"
mc:Ignorable="d"
Name="Primary"
d:DataContext="{d:DesignInstance local:MainVM}">