如何在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>