如何查看我的數據綁定ItemTemplate的設計？

Question

我有一個簡單的ListBox並將一組對象綁定爲ItemsSource。 我現在分配的DataTemplate非常簡單，但是如何在設計器中看到該模板？

這是我的XAML：

<ListBox.ItemTemplate> 
    <DataTemplate> 
     <Grid> 
      <TextBlock Text="{Binding Title}" /> 
      <TextBlock Text="{Binding Address}" /> 
     </Grid> 
    </DataTemplate> 
</ListBox.ItemTemplate> 

這是設計師的樣子：

這是當數據綁定和應用程序正在運行它的外觀：

如何讓設計師顯示我的DataTemplate的預覽圖？ 我不需要填入真實數據（發生在運行時），但預覽表示讚賞。

Answer 1

您需要設計時間數據。您可以使用d:DataContext屬性聲明設計時數據上下文。您可以創建模擬類，爲您的設計師展示模擬列表，以便在設計時顯示。

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     mc:Ignorable="d" 
     x:Class="WpfAnswer001.Window1" 
     d:DataContext="{StaticResource ResourceKey=MockMasterViewModel}" 
     Title="Window1" d:DesignWidth="523.5"> 
    <Grid> 
     <ListBox ItemsSource="{Binding Path=Items}"> 
      <ListBox.ItemTemplate> 
       <DataTemplate> 
        <StackPanel Margin="4"> 
         <TextBlock Text="{Binding Title}" /> 
         <TextBlock Text="{Binding Address}" /> 
        </StackPanel> 
       </DataTemplate> 
      </ListBox.ItemTemplate> 
     </ListBox> 
    </Grid> 
</Window> 

這是你如何申報的App.xaml模擬視圖模型：

<Application x:Class="WpfAnswer001.App" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:local="clr-namespace:WpfAnswer001" 
      StartupUri="Window1.xaml"> 
    <Application.Resources> 
     <local:MockMasterViewModel x:Key="MockMasterViewModel"/> 
    </Application.Resources> 
</Application> 

這是模擬視圖模型的代碼看起來像：

using System.Collections.ObjectModel; 

public class MockItemViewModel 
{ 
    public string Title { get; set; } 
    public string Address { get; set; } 
} 

public class MockMasterViewModel 
{ 

    public ObservableCollection<MockItemViewModel> Items { get; set; } 

    public MockMasterViewModel() 
    { 
     var item01 = new MockItemViewModel() { Title = "Title 01", Address = "Address 01" }; 
     var item02 = new MockItemViewModel() { Title = "Title 02", Address = "Address 02" }; 
     Items = new ObservableCollection<MockItemViewModel>() 
     { 
      item01, item02 
     }; 
    } 
} 

這是它如何在Visual Studio中顯示：

這是值得的努力和編碼？這取決於你，但這是應該如何完成的。

否則，放上一個空白的設計器，只在運行時測試。

當您使用Expression Blend進行大量工作並確實需要了解項目的外觀時，這非常有用。