MVVM WPF组合框：为组合框创建模板

问题描述：

代码隐藏（xaml.cs）：

namespace WpfApplication1 
{ 
    private ObservableCollection<TransportType> transportTypes = new ObservableCollection<TransportType>(); 

    transportTypes.Add(new TransportType() {Icon = Properties.Resources.Air, ValueMember = "A100", DisplayMember = "By Air" }); 
    transportTypes.Add(new TransportType() {Icon = Properties.Resources.Maritime, ValueMember = "M200", DisplayMember = "Maritime" }); 

    this.ComboBoxTransportTypes.ItemsSource = transportTypes; 
}

TransportType类：

namespace WpfApplication1 
{ 
    public class TransportType 
    { 

     public Image Icon 
     { 
      get; 
      set; 
     } 

     public string DisplayMember 
     { 
      get; 
      set; 
     } 

     public string ValueMember 
     { 
      get; 
      set; 
     } 
    } 
}

查看：

<ComboBox x:Name="ComboBoxTransportTypes" 
      Grid.Column="1"    
      ItemsSource="{Binding}" 
      DisplayMemberPath="DisplayMember" 
      SelectedValuePath="ValueMember" 
      SelectionChanged="ComboBoxTransportTypes_SelectionChanged"> 
    <ComboBox.ItemsPanel> 
     <ItemsPanelTemplate> 
      <VirtualizingStackPanel /> 
     </ItemsPanelTemplate> 
    </ComboBox.ItemsPanel> 
</ComboBox>

Ñ我正在尝试应用ComboBox ItemTemplate并绑定到“transportTypes”集合。我想每一个组合框项目，如下是：

<ComboBoxItem> 
    <StackPanel Orientation="Horizontal"> 
     <Image Source="{Binding bind-icon-here}" /> 
     <TextBlock Foreground="AliceBlue" 
        VerticalAlignment="Center" 
        Text="{Binding bind-DisplayMember-here}"/> 
    </StackPanel> 
</ComboBoxItem>

所以，我怎么可以创建绑定到我的收藏，以每个项目上面的组合框项模板与图标后面的字符串来呈现？

我在下面尝试过，但它不起作用。我也不知道如何将集合中的每个项目绑定到stackpanel中的图像和文本块，我已经完成了如下，但只显示字符串而不是图标。

<ComboBox x:Name="ComboBoxTransportTypes" 
      Grid.Column="1"    
      ItemsSource="{Binding}" 
      DisplayMemberPath="DisplayMember" <-- removed from here as I cannot define DisplayMemberPath and item template at the same time. 
      SelectedValuePath="ValueMember" 
      SelectionChanged="ComboBoxTransportTypes_SelectionChanged"> 
    <ComboBox.ItemsPanel> 
     <ItemsPanelTemplate> 
      <VirtualizingStackPanel /> 
     </ItemsPanelTemplate> 
    </ComboBox.ItemsPanel> 
    <ComboBox.ItemTemplate> 
     <DataTemplate DataType="l:TransportType"> 
      <StackPanel Orientation="Horizontal"> 
        <Image Source="{Binding Icon}" /> 
        <TextBlock Foreground="AliceBlue" 
          VerticalAlignment="Center" 
          Text="{Binding DisplayMember}"/> 
      </StackPanel> 
     </DataTemplate> 
    </ComboBox.ItemTemplate> 
</ComboBox>

此外，在MVVM是它更好地填充从代码隐藏组合框，因为我已经在这里或视图模型构造做了什么？

您需要备份并去WPVM中的MVVM做一些阅读，因为不是这样。 – Will

答

问题是，您在XAML和后面的代码中都设置了ItemSource。如果您从XAML中删除ItemSource="{Binding}"，那么它应该可以工作。

如果您使用的是MVVM，则该集合应该填充到视图模型中，而不是放在后面的代码中。你的代码背后应该只有很少的代码 - 只有与视图相关的东西应该去那里（比如显示一个子窗口）。

答

问题是，Image.Source需要ImageSource而不是图像。更改...

<Image Source="{Binding Icon}" />

到...

<Frame Content="{Binding Icon}"/>

，事情就会开始工作。

答

必须使用底部语法自定义模板组合框

<TextBlock Text="{Binding Path=DisplayMember}"/>

或

<Image Source="{Binding Path=Icon}" />

像组合框，列表框，......像DataTemplate中的自定义tamplate WPF列表标签
您必须使用路径

MVVM WPF组合框：为组合框创建模板

相关推荐