2009-05-05 4 views
8

, bana günlük gelişme/tasarım görevleri yılında Blend ve Visual Studio nasıl kullandıklarını anlamamıza yardımcı, burada gerçek bir senaryo:Visual Studio'da oluşturulmuş bir DataTemplate dosyasını düzenlemek için Expression Blend'i nasıl kullanabilirim? Gerçek projelerde Expression Blend</strong> yanı sıra Visual Studio kullanarak o sizin <strong>için

Visual Studio'da aşağıdaki basit WPF uygulamasını oluşturdum. , müşterileri basit turuncu kutularda gösteren bir DataTemplate ile müşteri nesnelerinin bir listesini gösterir.

Şimdi , Expression Blend'i kullanarak bu DataTemplate'a biraz pizazz koymak istiyorum.

Ben Expression Blend ben yeniden boyutlandırmak, ben rengini değiştirebilir turuncu kutuları bkz üzerlerinden ben fare gibi bir animasyon oluşturmak için gidiyorum
düşünme, vb projeyi açmak

Ancak bütün Expression Blend'de görüyorum tamamen boş bir kutu.

Yani anlıyorum:

  • Expression Blend benim veri görüntülemek vermez dolayısıyla ViewModel gelen ve anlamak gibi olamaz. Bu bir Blend sınırlaması mıdır yoksa kodumu bir şekilde değiştirmem gerekiyor mu? Böylece Blend çalışma zamanında hangi verinin çıkacağını yorumlayabilir?
  • "Örnek veri" özelliğine sahip Expression Blend 3 kullanıyorum. Bu örnek veri özelliğini kullanmanın en iyi yolu nedir, böylece C# 'yi yorumlayamasa ve Listeyi doldurmak için ViewModel özelliğinden hangi verilerin çıkacağını anlasa bile, en azından nasıl üretebilirim? DataTemplate'i manipüle edebilmem için bazı kukla veriler?

XAML: Arkasında

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

Kodu:

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

Neden cevap olarak cevabınızı koymayın ve sonra kendini kabul et. diğerleri daha sonra –

+0

görüntülemek için daha kolay olacaktır yapmam ben hatırlıyorum, ama zorlaştırır zaman engelli varsa: Eğer kendi sorunuzu yanıtlamak ve o zaman önce başka bir 48 saat kabul etmeden önce 48 cevapları beklemek zorunda. –

+0

En azından cevapları içinde. –

cevap

7

ben sadece bu yüzden beni kendi soruyu cevaplamak için izin bu anladım.

Laurent's Bugnion enlighting article on this okudum ve sadece yukarıdaki kodu değiştirmem gerekiyordu, böylece Expression Blend GUI'de görüntülenen ViewModel'imdeki Verileri görebiliyordum ve DataTemplate'i Blend'de düzenleyebiliyordu, kaydedip Visual Studio'da düzenlemeye devam edildi.

Temel olarak değişiklikler şunlardır: (1) DataContext deyimini arkadan koddan çıkarın, (2) "yerel" ad alanını XAML'ye ekleyin, (3) XAML ("TheDataProvider") içinde bir yerel veri sağlayıcısı tanımlayın, (4) doğrudan ListBox'tan bağla.

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> 

Kod Arkası: bende

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

Teşekkürler Edward, Benzer bir sorunla uğraşıyordum - ana pencere görünümü modelimi bir veri şablonunda göstermeye çalıştım ve bu mükemmel bir şekilde çözüldü. Kendinize şeref ve Laurent bunu okuduysa :) – si618

0

tek Blend ve Visual Studio datacontext sayfadaki hata ayıklama seçenekleri ile tanımlanabilir sadece tasarım modunda ne görmek istiyor edin. Örneğin benim sayfamın (kod-arkasındaki), ana sayfanın özniteliklerini d: DataContext olarak bildirerek, WP8TestBed nampespace WP8TestBed'deki veri içeriğini MainVM'ye bağladığını, yalnızca tasarım sırasında kullanıldığını söyleyebilirim. sihirbazlar) ve ayrıca çalışma zamanı sırasında görünüm modelinin yeni bir örneğini oluşturmaz. İşte

(benim ViewModel (MainVM) yaşadığı d mc ve hangi yerel), tüm bu ad ihtiyaç vardır örnektir:

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