如何在 ListView 中创建 ComboBox + TextBox 并将输入的文本添加为​​ ComboBox 中的新项目

Question

我想创建一个ListView，我需要在其中的每个列表视图项中创建一个ComboBox。 ComboBox 应该是可编辑的，以便它接受文本并使用输入的文本创建一个新项目。我参考了我的previous question

这是MainPage.xaml的代码

<Page.Resources>
    <local:RoleConverter x:Key="RoleConverter" Options="{x:Bind VM.UserRoleList}" RoleEditText="{x:Bind VM.EditText,Mode=OneWay}"/>
</Page.Resources>

<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <ListView x:Name="DataListView" ItemsSource="{x:Bind UserList}" VerticalAlignment="Center" HorizontalAlignment="Center">
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="data:User">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{x:Bind username}" Width="150" />
                    <TextBlock Text="{x:Bind fisrt_name}"  Width="150"/>
                    <TextBlock Text="{x:Bind last_name}"  Width="150" />
                    <ComboBox 
                        Width="150"
                        IsEditable="True"
                        IsTextSearchEnabled="True"
                        Text="{Binding ElementName=DataListView, Path=DataContext.EditText, Mode=TwoWay}"
                        DisplayMemberPath="name"
                        SelectedItem="{x:Bind user_role, Mode=TwoWay , Converter={StaticResource RoleConverter}}"
                        ItemsSource="{Binding ElementName=DataListView, Path=DataContext.UserRoleList,Mode=TwoWay}">
                    </ComboBox>
                    <TextBlock Text="{x:Bind user_role.name , Mode=OneWay}"  Width="150"/>
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
    <Button Grid.Row="1" Name="submit" Click="submit_Click" Content="click" />
</Grid>

现在的问题是我已将转换器类属性设置为全局属性，因此当我在一个列表项中输入文本时，它也会反映在其他项中。 它应该更改输入行中的文本。这是我完整的source code

请帮忙！谢谢

Answer 1

现在的问题是我已将转换器类属性设置为全局属性，因此当我在一个列表项中输入文本时，它也会反映在其他项中。

问题是Text绑定相同的值，如果你编辑源，所有的ComboBoxs Text属性也会改变。根据您的要求，您可以在ComboBoxs 类中处理。我们需要自定义ComboBox 并监听TextSubmitted 事件。我已经编辑了你的项目，请参考以下代码。

public class MyComboBox : ComboBox
{
    public MyComboBox()
    {
        this.Loaded += MyComboBox_Loaded;
    }

    private void MyComboBox_Loaded(object sender, RoutedEventArgs e)
    {
        TextSubmitted += MyComboBox_TextSubmitted;
    }

    private void MyComboBox_TextSubmitted(ComboBox sender, ComboBoxTextSubmittedEventArgs args)
    {
        var items = ItemsSource as ObservableCollection<UserRole>;
        if (items.Count > 0)
        {
            if (items.Any<UserRole>(s => s.name == args.Text))
            {
                return;
            }
            else
            {
                var newItem = new UserRole() { id = (items.Count + 1).ToString(), name = args.Text };
                items.Add(newItem);
            }

        }
    }
}

没有转换器的 Xaml 代码

<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <ListView
        x:Name="DataListView"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        ItemsSource="{x:Bind UserList}"
        >
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="data:User">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Width="150" Text="{x:Bind username}" />
                    <TextBlock Width="150" Text="{x:Bind fisrt_name}" />
                    <TextBlock Width="150" Text="{x:Bind last_name}" />
                    <TextBlock Width="150" Text="{x:Bind user_role.name, Mode=OneWay}" />
                    <local:MyComboBox
                        Width="150"
                        DisplayMemberPath="name"
                        IsEditable="True"
                        IsTextSearchEnabled="True"
                        ItemsSource="{Binding ElementName=DataListView, Path=DataContext.UserRoleList, Mode=TwoWay}"
                        SelectedItem="{x:Bind user_role, Mode=TwoWay}"
                        />
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
    <Button
        Name="submit"
        Grid.Row="1"
        Click="submit_Click"
        Content="click"
        />
</Grid>