可编辑的 WPF ListBox 包含文本框答案

【问题标题】：Editable WPF ListBox contains textbox可编辑的 WPF ListBox 包含文本框
【发布时间】：2014-06-03 17:29:18
【问题描述】：

我想在 wpf 应用程序中拥有动态可编辑列表框。我在列表框内使用文本框，并将 Observable 集合绑定到该列表框。现在，我想让文本框在鼠标单击时可编辑。因此，用户可以对文本框进行更改并保存新的文本框文本。

         <ListBox Name="ListTwo" ItemsSource="{Binding CollectionUrl, Mode=TwoWay}"  >
         <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBox Name="TextBoxList" Text="{Binding Path=urlString}" IsEnabled="False" >
                </TextBox>
            </DataTemplate>

        </ListBox.ItemTemplate>

        </ListBox>

【问题讨论】：

标签： wpf data-binding textbox listbox

【解决方案1】：

您应该使用IsReadOnly 属性。在触发器中，您应该检查IsFocused 属性。

在以下示例中，我更改了前景色以指示哪个TextBox 处于编辑模式。

例子：

<ListBox Name="ListTwo" ItemsSource="{Binding CollectionUrl, Mode=TwoWay}"  >
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBox Name="TextBoxList" Text="{Binding Path=urlString}" MinWidth="100">
                <TextBox.Style>
                    <Style TargetType="TextBox">
                        <Style.Triggers>
                            <Trigger Property="IsFocused" Value="True">
                                <Setter Property="Foreground" Value="Green"/>
                                <Setter Property="IsReadOnly" Value="False" />
                            </Trigger>
                            <Trigger Property="IsFocused" Value="False">
                                <Setter Property="Foreground" Value="Red"/>
                                <Setter Property="IsReadOnly" Value="True" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </TextBox.Style>
            </TextBox>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

如果你想让用户在编辑TextBox中的值后保存更改，你可以添加按钮并显示在实际编辑行中：

<ListBox Name="ListTwo" ItemsSource="{Binding CollectionUrl, Mode=TwoWay}"  >
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="50" />
                </Grid.ColumnDefinitions>
                <TextBox Name="TextBoxList" Text="{Binding Path=urlString}" MinWidth="100">
                    <TextBox.Style>
                        <Style TargetType="TextBox">
                            <Style.Triggers>
                                <Trigger Property="IsFocused" Value="True">
                                    <Setter Property="Foreground" Value="Green"/>
                                    <Setter Property="IsReadOnly" Value="False" />
                                </Trigger>
                                <Trigger Property="IsFocused" Value="False">
                                    <Setter Property="Foreground" Value="Red"/>
                                    <Setter Property="IsReadOnly" Value="True" />
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </TextBox.Style>
                </TextBox>
                <Button Content="Save" Grid.Column="1" Command="{Binding SaveChanges}">
                    <Button.Style>
                        <Style TargetType="Button">
                            <Setter Property="Visibility" Value="Collapsed" />
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding ElementName=TextBoxList, Path=IsFocused}" Value="True">
                                    <Setter Property="Visibility" Value="Visible" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Button.Style>
                </Button>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

【讨论】：

它工作得很好......但我有一个问题。在保存按钮上，我想将编辑后的文本保存在隐藏在代码后面的实际列表中。所以，我想保存编辑过的文本并根据更新列表。如何在单击保存按钮时访问已编辑的文本框？

【解决方案2】：

我访问文本框的方法（这被证明是一场噩梦）是使用您的保存按钮方法，并且在按钮的 Button_Click 函数中，我使用 sender 检索按钮的父项，转换为（在您的情况下）网格。然后您可以使用它来访问 .Children[0] 作为您的文本框的网格的子项。有点克鲁格，因为您的代码必须“知道”父文本框的类型和子文本框的索引，但这些不会改变。如有必要，纯粹主义者可以遍历子项以明确识别所需的子项。希望这对某人有所帮助。

【讨论】：