Editable Grid In Windows 10 UWP App

Question

I am using the below listview to create the product interface, how can i make the selected item editable in this view. I want to put each cell of selected row in TextBox instead of TextBlock, so that user can edit the values. Looking for help from community.

<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's suggestion to use a TextBox all the time, making it read-only when the item is not selected, is a good one; it simplifies logic and layout. (Switching between a visible TextBox and a visible TextBlock is tricky, because you want the text to be in exactly the same place.)

For illustration purposes I'll use this simplified model object:

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

Next, the 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>

Finally, the code-behind, which toggles the IsReadOnly property of the Item :

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