Windows 10 UWP 应用中的可编辑网格

本文关键字：编辑 网格 UWP 应用 Windows | 更新日期: 2023-09-27 18:32:10

我正在使用下面的列表视图来创建产品界面，如何使所选项目在此视图中可编辑。我想将所选行的每个单元格放在文本框而不是文本块中，以便用户可以编辑值。寻求社区的帮助。

<Grid>
    <StackPanel>
        <ListView Name="ItemsList" ItemsSource="{x:Bind products}">
         <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                    <Setter Property="ContentTemplate" Value="{StaticResource DefaultTemplate}" />
                </Style>
            </ListView.ItemContainerStyle>
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="data:Product">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Grid.Resources>
                        <Style TargetType="TextBlock">
                            <Setter Property="Margin" Value="5,0" />
                        </Style>
                    </Grid.Resources>
                    <TextBlock Grid.Column="0" Text="{x:Bind ProductId}" />
                    <TextBlock Grid.Column="1" Text="{x:Bind ProductName}" />                        
                    </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
    </StackPanel>
</Grid>

Windows 10 UWP 应用中的可编辑网格

@Jackie建议一直使用TextBox，在未选择项目时使其只读，这是一个很好的建议;它简化了逻辑和布局。（在可见TextBox和可见TextBlock之间切换很棘手，因为您希望文本位于完全相同的位置。

为了便于说明，我将使用这个简化的模型对象：

public sealed class Item : INotifyPropertyChanged
{
    private bool isReadOnly = true;
    public bool IsReadOnly
    {
        get
        {
            return isReadOnly;
        }
        set
        {
            isReadOnly = value;
            OnPropertyChanged();
        }
    }
    public string Value { get; set; }
    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

接下来，ListView：

<ListView SelectionChanged="OnSelectionChanged">
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextBox
                Text="{Binding Value}"
                IsReadOnly="{Binding IsReadOnly}" />
        </DataTemplate>
    </ListView.ItemTemplate>
    <ListView.Items>
        <local:Item Value="One" />
        <local:Item Value="Two" />
        <local:Item Value="Three" />
        <local:Item Value="Four" />
    </ListView.Items>
</ListView>

最后，代码隐藏，它切换Item的IsReadOnly属性：

private void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    Item removed = e.RemovedItems.FirstOrDefault() as Item;
    if (removed != null)
    {
        removed.IsReadOnly = true;
    }
    Item added = e.AddedItems.FirstOrDefault() as Item;
    if (added != null)
    {
        added.IsReadOnly = false;
    }
}
相关文章：