WPF：ComboBox：暴露樣式/ ControlTemplate中的DataTemplate綁定

Question

可以說我有一個樣本ComboBox這樣定義。

<ComboBox ItemsSource="{Binding Path=Bikes}" 
      HorizontalAlignment="Stretch"> 
    <ComboBox.ItemTemplate> 
     <DataTemplate> 
      <StackPanel Orientation="Horizontal"> 
       <Ellipse Fill="{DynamicResource AccentColorBrush}" 
          Height="15" 
          Width="15" 
          VerticalAlignment="Center"/> 
       <TextBlock Text="{Binding Type}" 
          Margin="15, 0, 0, 0" 
          FontWeight="SemiBold" 
          Foreground="{DynamicResource AccentColorBrush}" 
          VerticalAlignment="Center"/> 
      </StackPanel> 
     </DataTemplate> 
    </ComboBox.ItemTemplate> 
</ComboBox> 

我想這樣做的是包裝在一個Style，但內DataTemplate暴露ComboBox和Text財產ItemSource財產，這樣我可以每次使用ComboBox時間綁定到不同的屬性。

Answer 1

我可以建議您創建一個組合框樣式，它將使用ViewModel-First方法選擇其組合項目的模板。所以會有數量的數據模板，每個模板都與特定的視圖模型相關。

<Window x:Class="WpfViewConstructorCall.MainWindow" 
    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:local="clr-namespace:WpfViewConstructorCall" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    Title="MainWindow" 
    Width="525" 
    Height="350" 
    mc:Ignorable="d"> 
<Window.Resources> 
    <!--Combo-item data-template wich is defining the final item view--> 
    <DataTemplate x:Key="ComboItemContentTemplate"> 
     <StackPanel Orientation="Horizontal"> 
      <Ellipse Width="15" 
        Height="15" 
        VerticalAlignment="Center" 
        Fill="GreenYellow" /> 
      <TextBlock Margin="15, 0, 0, 0" 
         VerticalAlignment="Center" 
         FontWeight="SemiBold" 
         Foreground="Red" 
         Text="{Binding}" /> 
     </StackPanel> 
    </DataTemplate> 
    <!--Combo-item data-template wich relates to ItemA view-model--> 
    <DataTemplate DataType="{x:Type local:ItemA}"> 
     <ContentControl Content="{Binding Name}" 
         ContentTemplate="{StaticResource ComboItemContentTemplate}" /> 
    </DataTemplate> 
    <!--Combo-item data-template wich relates to ItemB view-model--> 
    <DataTemplate DataType="{x:Type local:ItemB}"> 
     <ContentControl Content="{Binding Kind}" 
         ContentTemplate="{StaticResource ComboItemContentTemplate}" /> 
    </DataTemplate> 
    <!--Combo-item data-template wich relates to ItemC view-model--> 
    <DataTemplate DataType="{x:Type local:ItemC}"> 
     <ContentControl Content="{Binding Type}" 
         ContentTemplate="{StaticResource ComboItemContentTemplate}" /> 
    </DataTemplate> 
    <!--main Combo-item data-template--> 
    <DataTemplate x:Key="ComboItemDataTemplate"> 
     <ContentControl Content="{Binding}" /> 
    </DataTemplate> 
    <!--Combo style--> 
    <Style x:Key="ComboBoxStyle" 
      TargetType="ComboBox"> 
     <Setter Property="HorizontalAlignment" Value="Stretch" /> 
     <Setter Property="ItemTemplate" Value="{StaticResource ComboItemDataTemplate}" /> 
    </Style> 
</Window.Resources> 
<Grid> 
    <Grid.DataContext> 
     <local:GridDataContext /> 
    </Grid.DataContext> 
    <StackPanel> 
     <!--Combo(s) with specific source definition--> 
     <ComboBox x:Name="A" 
        DisplayMemberPath="Name" 
        ItemsSource="{Binding ItemsA}" 
        SelectedValuePath="Name" 
        Style="{StaticResource ComboBoxStyle}" /> 
     <ComboBox x:Name="B" 
        DisplayMemberPath="Kind" 
        ItemsSource="{Binding ItemsB}" 
        SelectedValuePath="Kind" 
        Style="{StaticResource ComboBoxStyle}" /> 
     <ComboBox x:Name="C" 
        DisplayMemberPath="Type" 
        ItemsSource="{Binding ItemsC}" 
        SelectedValuePath="Type" 
        Style="{StaticResource ComboBoxStyle}" /> 
    </StackPanel> 
</Grid></Window> 

如果你將有一個額外的連擊項的視圖模型您將添加一個數據模板，這將涉及到特定視圖模型，並規定其觀點。

讓我知道如果你需要更多的例子。

此致敬禮。