8

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

我在 Visual Studio 中创建了以下简单的 WPF 应用程序。它显示了一个客户对象列表,其中包含一个以简单的橙色框显示客户的 DataTemplate 。

我现在想通过使用 Expression Blend在这个 DataTemplate 中添加一些 pizazz 。

在 Expression Blend 中打开项目,认为我将看到可以更改颜色的橙色框,当我将鼠标悬停在它们上时创建动画,调整它的大小等。但是,我在 Expression Blend 中看到的只是一个完全空白的盒子

所以我明白:

  • Expression Blend似乎无法理解我的数据来自 ViewModel,因此不会显示它。这是 Blend 的一个限制,还是我需要以某种方式更改我的代码,以便 Blend 可以解释运行时将输出的数据?
  • 我正在使用具有“示例数据”功能的 Expression Blend 3。使用此示例数据功能的最佳方法是什么,以便即使它无法解释 C# 并理解 ViewModel 属性将从 ViewModel 属性中输出的数据来填充列表框,我怎样才能让它至少产生一些虚拟数据以便我可以操作 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; }
    }
}
4

3 回答 3

7

我只是想通了,所以请允许我回答我自己的问题。

我阅读了Laurent 的 Bugnion 启发性文章,结果发现我只需要调整上面的代码,以便我可以看到来自我的 ViewModel 的数据显示在 Expression Blend GUI 中,并且能够在 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; }
    }
}
于 2009-05-07T07:31:29.727 回答
2

我有一篇关于这个问题的博客文章:http ://www.robfe.com/2009/08/design-time-data-in-expression-blend-3/

我的帖子都是关于在混合中显示数据,不必在运行时显示甚至创建该数据。

于 2009-10-05T13:45:40.467 回答
0

如果想要让 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}">
于 2013-04-30T13:23:00.797 回答