Windows 10 UWP App中的可編輯網格

Question

我正在使用下面的列表視圖創建產品界面，如何在此視圖中使所選項目可編輯。 我想將選定行的每個單元格放在TextBox而不是TextBlock中，以便用戶可以編輯值。 從社區尋求幫助。

<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>

Answer 1

@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;
    }
}