Editable Button

Question

I have a datagrid with two column. first one is the button ID, the second one is button label. For the buttonLabel column i want them to have the appearance of a "button", when the user click on it, it will enable an edit mode.

This is what i have right now:

<ScrollViewer Grid.Row="2" Grid.ColumnSpan="2" Margin="0,3,0,0" VerticalScrollBarVisibility="Auto" HorizontalAlignment="Center" Height="Auto">

                    <DataGrid x:Name="dataGrid"
                              Grid.Row="0"
                              Height="Auto"
                              ItemsSource="{Binding Path=States}"
                              AutoGenerateColumns="False"
                              CanUserAddRows="False"
                              Focusable="False"
                              CanUserSortColumns="True"
                              KeyboardNavigation.TabNavigation="Continue"
                              EnableColumnVirtualization="True"
                              EnableRowVirtualization="True"
                              IsSynchronizedWithCurrentItem="True"
                              SelectionMode="Extended"
                              >
                        <DataGrid.Columns>
                            <DataGridTemplateColumn Header="Id" Width="*" MinWidth="100" 
                                        ClipboardContentBinding="{Binding Path=Id}">

                                <DataGridTemplateColumn.CellTemplate>
                                    <DataTemplate>
                                        <DockPanel LastChildFill="True">
                                            <TextBlock x:Name="textBlock" Margin="1" Text="{Binding Path=Id}"/>
                                        </DockPanel>
                                    </DataTemplate>
                                </DataGridTemplateColumn.CellTemplate>
                            </DataGridTemplateColumn>


                            <DataGridTemplateColumn Header="Label" Width="*" MinWidth="100" 
                                        ClipboardContentBinding="{Binding Path=Label}">

                                <DataGridTemplateColumn.CellTemplate>
                                    <DataTemplate>
                                        <DockPanel LastChildFill="True">
                                            <Button x:Name="textBlock" Margin="1"
                                                Content="{Binding Path=Label}"
                                                Foreground="{Binding Path=ForegroundColor, Converter={StaticResource ColorToSolidColorBrushValueConverter}}"
                                                Background="{Binding Path=BackgroundColor, Converter={StaticResource ColorToSolidColorBrushValueConverter}}"/>

                                        </DockPanel>
                                    </DataTemplate>
                                </DataGridTemplateColumn.CellTemplate>

                                <DataGridTemplateColumn.CellEditingTemplate>
                                    <DataTemplate>
                                        <TextBox Text="{Binding Path=Label, UpdateSourceTrigger=PropertyChanged}">
                                        </TextBox>
                                    </DataTemplate>
                                </DataGridTemplateColumn.CellEditingTemplate>

                            </DataGridTemplateColumn>

                        </DataGrid.Columns>

The issue i have with this code is when user want to edit the content of button, he will need to click on the "edge" of the cell to enable the edit mode.

How should i modify it so when the button is clicked the edit mode will be enable right away? (FYI i have a same implementation in the application where i used textblock instead of button, and it works perfectly)

Answer 1

Option one: Set the IsHitTestVisible property to false on the button.

Option two: Make the TextBlock look like a button by copying the XAML from the Button template.