2009-05-05 3 views
8

, 내가 당신이 일상적인 개발/설계 작업에 혼합 및 Visual Studio를 사용하는 방법 이해를 도와주세요, 여기에 실제 시나리오는 다음과 같습니다Expression Blend를 사용하여 Visual Studio에서 만든 DataTemplate을 편집하려면 어떻게해야합니까? 실제 프로젝트에 Expression Blend를</strong>뿐만 아니라 비주얼 스튜디오를 사용하여 당신의 그 <strong>를 들어

Visual Studio에서 다음과 같은 간단한 WPF 응용 프로그램을 만들었습니다. 은 간단한 오렌지색 상자에 고객을 표시하는 DataTemplate을 사용하여 고객 개체 목록을 보여줍니다.

지금 Expression Blend를 사용하여이 DataTemplate에 일부 pizazz를 추가하려고합니다.

내가 Expression Blend를 내가 크기를 조정, 내가의 색상을 변경할 수있는 오렌지 상자를 참조 그들에 I 마우스로 애니메이션을 만들려고
사고 등의 프로젝트를 열

그러나, 모든 Expression Blend에서 완전히 빈 상자입니다.

그래서 이해 :

  • Expression Blend를 내 데이터가 표시되지 않습니다 따라서 뷰 모델에서 오는하고 이해 수없는 것. 이것이 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; } 
    } 
} 
+2

왜 대답으로 답변을 두지 않고 그런 다음 스스로 받아들입니다. 다른 사람들이보기에 더 쉬울 것입니다. –

+0

기억한다면 쉽게 알아볼 수 있지만, 어려움을 겪을 수있는 장애물이 있습니다. 자신의 질문에 답하기 전에 48 개의 답을 기다린 후 48 시간을 기다려야합니다. –

+0

글쎄 대답은 적어도. –

답변

7

내가 너무 내 자신의 질문에 대답 할 수 있도록이 알아 냈어.

나는 Laurent's Bugnion enlighting article on this을 읽었으며 Expression Blend GUI에 표시되는 내 ViewModel의 데이터를 볼 수 있도록 위 코드를 조정해야만했고, 데이터 템플릿을 블렌드하고 저장 한 다음 편집 할 수있었습니다. Visual Studio에서 계속 편집.

기본적으로 변경 내용은 다음과 같습니다. (1) 코드 숨김에서 DataContext 문 제거 (2) XAML에서 "로컬"네임 스페이스 추가 (3) XAML ("TheDataProvider")에서 로컬 데이터 공급자 정의 4) ListBox에서 직접 바인딩합니다.

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

감사합니다 에드워드, 비슷한 문제로 고민하고있었습니다. 데이터 템플릿 내부에 내 메인 윈도우 뷰 모델을 노출하려고 시도했지만 완벽하게 해결했습니다. 그가 이것을 읽는다면 당신 자신과 Laurent에게 명성을 줘라 :) – si618

2

여기

전체에서 Expression Blend를 및 Visual Studio에서 작동하는 코드 이 호에 대한 블로그 게시물 : http://www.robfe.com/2009/08/design-time-data-in-expression-blend-3/

내 게시물은 블렌드 에 데이터를 표시하는 것입니다.은 런타임에 데이터를 표시하거나 생성하지 않아도됩니다.

0

Blend 및 Visual Studio에서 디자인 모드에서만 datacontext의 내용을 확인하려는 경우 페이지의 디버그 옵션을 사용하여 정의 할 수 있습니다. 예를 들어, 내 페이지 (코드 숨김)는 메인 페이지의 속성에 대한 정보를 d : DataContext로 알려줌으로써 데이터 컨텍스트를 내 nampespace WP8TestBed의 MainVM에 바인드합니다.이 컨텍스트는 디자인 타임에만 사용됩니다. 또한 마법사는 런타임 중에 뷰 모델의 새 인스턴스를 만들지 않습니다. 여기

이 (내 뷰 모델 (MainVM)이 사는 곳 D, 엠씨하고있는 지역), 모든 네임 스페이스가 필요한 예입니다

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