WPF - Making selected listview column editable on button click

Question

I have a listView with a gridview presentation and TextBlocks in each column. I would like to make the selected line editable by replacing the textblocks with TextBoxes and ComboBoxes when the user clicks on an edit button. I tried to do this by setting styles that toggles the visibility of the controls like this :

<Style x:Name="ItemDisplayStyle" TargetType="{x:Type TextBlock}" x:Key="ItemDisplayStyle">
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="Visibility" Value="{Binding Path=dislayMode}" />
    </Style>
    <Style x:Name="ItemEditStyle" TargetType="{x:Type FrameworkElement}" x:Key="ItemEditStyle">
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="Visibility" Value="{Binding Path=editMode}" />
    </Style>

displayMode and editMode are Visibility properties set in the code-behind. And lower in the xaml :

<GridViewColumn Header="Date de début" Width="80">
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <Grid>
                                <TextBlock Margin="-6,0"
                                           HorizontalAlignment="Stretch" TextAlignment="Center"
                                           Text="{Binding Path=DateDebut, Mode=TwoWay}"
                                           Style="{StaticResource ItemDisplayStyle}" />
                                <TextBox   x:Name="tbDateDebut" Margin="-6,0"
                                           HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" 
                                           Text="{Binding Path=DateDebut, Mode=TwoWay}"
                                           Style="{StaticResource ItemEditStyle}" />
                            </Grid>
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>

My problem is that changing 'editMode' and 'displayMode' in the code-behind does not seem to be detected at the UI level.

Also, even if I get this to work, I don't have any idea of how to apply it only to the selected line. I can do this separately by binding the visibility value with the ListView so that when the user selects a line, she/he gets the editable controls on that line but I really want to allow this only when they click on a button.

Answer 1

Have you Refreshed the contents of the Grid after making changes? You can use the Grid.GetColumn method and send the sender object i.e. edit button(which i suppose would be separate for each column) and then probably use the VisualTreeHelper to get the textbox and combobox in that column.

Hope this helps.

Also, Why dont you use the 'IsReadOnly' property of the TextBox instead of replacing the TextBlock? Make it true or false as per your requirement.