[C # / WPF] TextBlock / TextBox / Label edit text problem

Original: [C # / WPF] TextBlock / TextBox / Label edit text problem

The title is a bit unclear, but it is easy to search when it is for your own convenience.
In short, the requirement is to allow users to edit their own information when displaying user information (text).

The effect diagram is as follows:
Before clicking the [Edit] button:

After clicking the [Edit] button, editing is allowed:

• Don't vomit that sex can be changed again. . . I just mean this effect
• The style is used, but it is not the focus of this article, so it is omitted
• The role of the button is not the focus of this article, omitted

---

A solution:
display the TextBlock normally, then put a TextBox on it and hide it. Click the [Edit] button and then display the TextBox to achieve the effect of looking like editing text!

Front code:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="60"/>
        <ColumnDefinition Width="200"/>
        <ColumnDefinition Width="60"/>
        <ColumnDefinition Width="200"/>
    </Grid.ColumnDefinitions>

    <!-- 用户名 -->
    <TextBlock Grid.Row="0" Grid.Column="0" Text="用户名：" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Left"/>
    <Grid Grid.Row="0" Grid.Column="1" Margin="5" Grid.ColumnSpan="2" Height="30" VerticalAlignment="Center" HorizontalAlignment="Left">
        <Label x:Name="userId" FontSize="16" Width="180"/>
        <TextBox x:Name="editUserId" FontSize="16" Width="180" Visibility="Collapsed"/>
    </Grid>

    <!-- 编辑 -->
    <Grid Grid.Row="0" Grid.Column="3" Margin="10,0,10,0" VerticalAlignment="Center" HorizontalAlignment="Right">
        <Button x:Name="editBtn" Command="{Binding EditCommand}" Style="{StaticResource myButton1}" Content="编辑" Width="60" Height="25"/>
        <Button x:Name="editConfirmBtn" Command="{Binding EditConfirmCommand}" Style="{StaticResource myButton1}" Content="确定" Width="60" Height="25" Margin="0,0,0,1" Visibility="Collapsed"/>
        <Button x:Name="editCancelBtn" Command="{Binding EditCancelCommand}" Style="{StaticResource myButton1}" Content="取消" Width="60" Height="25" Margin="-70,0,70,0" Visibility="Collapsed"/>
    </Grid>

    <!-- 昵称 -->
    <TextBlock Grid.Row="1" Grid.Column="0" Text="昵称：" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Left"/>
    <Grid Grid.Row="1" Grid.Column="1" Margin="5" Grid.ColumnSpan="2" Height="30" VerticalAlignment="Center" HorizontalAlignment="Left">
        <Label x:Name="nickName" FontSize="16" Width="180"/>
        <TextBox x:Name="editNickName" FontSize="16" Width="180" Visibility="Collapsed"/>
    </Grid>
    <!-- 性别 -->
    <TextBlock Grid.Row="1" Grid.Column="2" Text="性别：" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Left"/>
    <Grid Grid.Row="1" Grid.Column="3" Margin="5" Height="30" VerticalAlignment="Center" HorizontalAlignment="Left">
        <Label x:Name="sex" FontSize="16" Width="180"/>
        <StackPanel Orientation="Horizontal">
            <RadioButton x:Name="editSexMale" GroupName="sex" Content="男" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="0" Visibility="Collapsed"/>
            <RadioButton x:Name="editSexFemale" GroupName="sex" Content="女" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="30,0,0,0" Visibility="Collapsed"/>
        </StackPanel>
    </Grid>
</Grid>

Here [Edit], [Confirm], [Cancel] the Command of the three buttons is bound to the click event, which is to control the display of the three button groups and the display box of the TextBox. Upload logic.