Как я могу использовать Expression Blend для редактирования DataTemplate, созданного в Visual Studio? - PullRequest
8 голосов
/ 05 мая 2009

Для тех из вас, кто использует Expression Blend , а также Visual Studio в ваших реальных проектах, пожалуйста, помогите мне понять , как вы используете Blend и Visual Studio в повседневных задачах разработки / проектирования Вот реальный сценарий:

Я создал следующее простое приложение WPF в Visual Studio. показывает список объектов клиентов с DataTemplate , который показывает клиентов в простых оранжевых прямоугольниках.

Теперь я хочу добавить немного стиля в этот шаблон данных с помощью Expression Blend.

Я открываю проект в Expression Blend , думая, что я увижу оранжевые прямоугольники, цвет которых я могу изменить, создаю анимацию при наведении на них курсора, изменяю ее размер и т. Д. Однако , все, что я вижу в Expression Blend - это полностью пустое поле .

Итак, я понимаю:

  • Expression Blend не может понять, что мои данные поступают из ViewModel и, следовательно, не отображают их. Это ограничение Blend или мне нужно каким-то образом изменить свой код, чтобы Blend мог интерпретировать, какие данные будут выводиться во время выполнения?
  • Я использую Expression Blend 3, которая имеет возможность «выборки данных». Каков наилучший способ использовать этот пример данных , чтобы, даже если он не может интерпретировать C # и понять, какие данные будут поступать из свойства 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; }
    }
}

Ответы [ 3 ]

7 голосов
/ 07 мая 2009

Я только что понял это, поэтому позвольте мне ответить на мой собственный вопрос.

Я прочитал статью Лорана по освещению Bugnion об этом , и оказалось, что мне просто пришлось настроить вышеуказанный код, чтобы я мог видеть данные из моей ViewModel, отображаемые в графическом интерфейсе Expression Blend, и мог редактировать DataTemplate в Blend, сохраните его, а затем продолжите редактирование в 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; }
    }
}
2 голосов
/ 05 октября 2009

У меня есть запись в блоге по этому вопросу: http://www.robfe.com/2009/08/design-time-data-in-expression-blend-3/

Мой пост посвящен отображению данных в смеси без необходимости отображать или даже создавать эти данные во время выполнения.

0 голосов
/ 30 апреля 2013

Если кто-то хочет, чтобы Blend и Visual Studio видели, что текст данных имеет только в режиме разработки, это можно определить с помощью параметров отладки на странице. Скажем, например, моя страница (в коде сзади) связывает свой контекст данных с MainVM в моем nampespace WP8TestBed, сообщая эту информацию об атрибутах главной страницы как 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}">
...