如何使用Expression Blend编辑在Visual Studio中创建的DataTemplate? [英] How can I use Expression Blend to edit a DataTemplate created in Visual Studio?

问题描述

对于您在实际项目中使用Expression Blend以及Visual Studio的那些人，请帮助我了解您如何在日常开发/设计任务中使用Blend和Visual Studio strong>，这是一个真实的场景:

For those of you using Expression Blend as well as Visual Studio in your real projects, please help me understand how you use Blend and Visual Studio in your everyday development/design tasks, here is a real scenario:

我在Visual Studio中创建了以下简单的WPF应用程序.它显示带有DataTemplate的客户对象列表，该模板在简单的橙色框中显示客户.

I created the following simple WPF application in Visual Studio. It shows a list of customer objects with a DataTemplate that shows the customers in simple orange boxes.

我现在要使用Expression Blend将一些赞誉添加到此DataTemplate 中.

我在Expression Blend中打开项目，以为我将看到可以更改其颜色的橙色框，将鼠标悬停在其上时制作动画，调整其大小等.但是，我在Expression Blend中看到的只是一个完全空白的框.

I open the project in Expression Blend thinking that I'm going to see the orange boxes which I can change the color of, create an animation as I mouse over them, resize it, etc. However, all I see in Expression Blend is a completely blank box.

所以我了解:

• Expression Blend 似乎无法理解我的数据来自ViewModel ，因此无法显示.这是Blend的限制吗?还是我需要以某种方式更改代码，以便Blend可以解释在运行时将输出哪些数据?
• 我正在使用具有样本数据"功能的Expression Blend 3. 使用此示例数据功能的最佳方法是什么，以便即使它无法解释C#并理解将从ViewModel属性中填充来填充列表框的数据，我如何获得它至少会产生一些虚拟数据，以便我可以操纵DataTemplate?

• Expression Blend can't seem to understand that my data is coming from the ViewModel and hence doesn't display it. Is this a limitation of Blend or do I need to change my code in some way so that Blend can interpret what data will be coming out at run-time?
• I'm using Expression Blend 3 which has "sample data" capability. What is the best way to use this sample data feature so that even if it can't interpret the C# and understand what data will be coming out of the ViewModel property to fill the Listbox, how can I get it to at least produce some dummy data so that I can manipulate the 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; }
    }
}

推荐答案

我刚刚发现了这个问题，所以请允许我回答我自己的问题.

I just figured this out so allow me to answer my own question.

我阅读了 Laurent的Bugnion启发性文章，事实证明我只需要调整上面的代码，这样我就可以在Expression Blend GUI中看到ViewModel中的数据，并能够在Blend中编辑DataTemplate，将其保存，然后在Visual Studio中继续进行编辑.

I read Laurent's Bugnion enlighting article on this and it turns out I just had to tweak the above code so that I could see the Data from my ViewModel displayed in the Expression Blend GUI and was able to edit the DataTemplate in Blend, save it, and then continued editing in Visual Studio.

基本上，更改是:(1)从后面的代码中取出DataContext语句，(2)在XAML中添加本地"名称空间，(3)在XAML中定义本地数据提供者("TheDataProvider")，(4 )直接从ListBox绑定到它.

Basically the changes are: (1) take out the DataContext statement from code behind, (2) add the "local" namespace in XAML, (3) define a local data provider in XAML ("TheDataProvider"), (4) bind to it directly from the ListBox.

以下是可完全在Expression Blend和Visual Studio中使用的代码:

Here is the code that works in Expression Blend and Visual Studio in full:

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; }
    }
}

这篇关于如何使用Expression Blend编辑在Visual Studio中创建的DataTemplate?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！