WPF:Commobox:在样式 / 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中，但是将ComboBox和Text属性的ItemSource属性揭示DataTemplate中的属性，以便每次使用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>

，如果您将拥有一个附加的组合视图模型，则将添加一个与该特定视图模型相关的数据模型，并将定义其视图。

如果您需要更多示例，请让我确定。

最好的问候。