如何使用 Caliburn.Micro 绑定 ItemsControl 内的 ComboBox？答案

【问题标题】：How to Bind ComboBox Inside ItemsControl with Caliburn.Micro?如何使用 Caliburn.Micro 绑定 ItemsControl 内的 ComboBox？
【发布时间】：2020-01-13 19:09:05
【问题描述】：

这是我在 Caliburn.Micro 中使用 WPF 的项目。在我看来，我有一个 ItemsControl 绑定到记录类 (MemberVotes) 的对应 ViewModel 中的 BindableCollection。该类只有两个字段：MemberName 和 Vote。 ViewModel 还具有第二个字符串类型的 BindableCollection (VoteOptions)。 ViewModel 中的 Handle 方法将数据加载到两个 BindableCollections 中。 MemberVotes 是从数据库中加载的，而 VoteOptions 则是通过代码添加一个新的字符串集合来加载的。

我可以毫无问题地在文本框中显示 MemberName 和 Vote，但我无法让 ComboBox 绑定投票选项的集合。没有错误消息。组合框只是空的。

如何将 ComboBoxes 绑定到 VoteOptions，然后将每个 ComboBox 的选定项目设置为 Vote？

任何帮助将不胜感激。

视图（MemberVoteView）：

<ItemsControl x:Name="MemberVotes">
    <ItemsControl.ItemTemplate>
        <DataTemplate>

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="4*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <TextBox Text="{Binding MemberName}" Grid.Column="0" IsReadOnly="True" />

            <ComboBox Grid.Column="1" ItemsSource="{Binding RelativeSource={RelativeSource AncestorType=ItemsControl}, Path=DataContext.MemberVoteView.VoteOptions}" />

            <TextBox Grid.Column="2" Text="{Binding Vote}" />
        </Grid>

        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

ViewModel (MemberVoteViewModel)：

    public BindableCollection<MemberVoteModel> MemberVotes { get; set; }

    public BindableCollection<string> VoteOptions { get; set; }

    public void Handle()
    {
        MemberVotes = new BindableCollection<MemberVoteModel>();
        MemberVotes .AddRange(GetVotes());

        VoteOptions = new BindableCollection<string>();
        VoteOptions.AddRange( new string[] { "Y", "N", "NV", "E", "O"} );
    }

【问题讨论】：

标签： wpf combobox binding caliburn.micro itemscontrol

【解决方案1】：

希望我正确理解了您的问题。您的问题在于以下行。

<ComboBox Grid.Column="1" ItemsSource="{Binding RelativeSource={RelativeSource AncestorType=ItemsControl}, Path=DataContext.MemberVoteView.VoteOptions}" />

ItemsControl 的 DataContext 是您的 ViewModel。它没有名为 MemberVoteView 的属性。你需要的是

<ComboBox Grid.Column="1" ItemsSource="{Binding RelativeSource={RelativeSource AncestorType=ItemsControl}, Path=DataContext.VoteOptions}" />

要将 SelectedItem 设置为 Vote，需要将 ComboBox 的 SelectedItem 属性绑定到 MemberVotes.Vote。

例如，

<ComboBox Grid.Column="1" ItemsSource="{Binding RelativeSource={RelativeSource AncestorType=ItemsControl}, Path=DataContext.VoteOptions}" SelectedItem="{Binding Vote}" />

【讨论】：

非常感谢您的帮助。这正是我所需要的。快速提问：绑定是双向的吗？

【解决方案2】：

Caliburn.Micro 是关于约定的。如果您将ComboBox 的Name 设置为“VoteOptions”，并将VoteOptions 属性移动到MemberVoteModel 类，并将SelectedVoteOption 属性（具有此确切名称）添加到此类，则以下内容应工作：

<DataTemplate>
    <Grid cal:Bind.Model="{Binding}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="4*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <TextBox x:Name="MemberName" Grid.Column="0" IsReadOnly="True" />

        <ComboBox x:Name="VoteOptions" />

        <TextBox Grid.Column="2" x:Name="SelectedVoteOption" />
    </Grid>
</DataTemplate>

您还应该考虑将MemberVoteModel 重命名为MemberVoteViewModel（您必须想出一个不同的名称或重命名您当前的视图模型）并定义一个单独的视图模型。这就是Caliburn.Micro 的设置方式。

如果您决定在当前视图模型类中保留VoteOptions 属性，您可以使用如下内置机制绑定到它：

<ComboBox ItemsSource="{Binding RelativeSource={RelativeSource AncestorType=ItemsControl}, Path=DataContext.VoteOptions}"
          SelectedItem="{Binding SelectedVoteOption}"/>

【讨论】：