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

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

El título es un poco confuso, pero es fácil de buscar cuando es para su propia conveniencia.
En resumen, el requisito es permitir a los usuarios editar su propia información al mostrar información del usuario (texto).

El diagrama de efectos es el siguiente:
Antes de hacer clic en el botón [Editar]:
Escriba una descripción de la imagen aquí

Después de hacer clic en el botón [Editar], se permite la edición:
Escriba una descripción de la imagen aquí

No vomites porque el sexo puede cambiarse nuevamente. . . Solo quiero decir este efecto
Se usa el estilo, pero no es el enfoque de este artículo, por lo que se omite
El papel del botón no es el foco de este artículo, omitido

Una solución:
mostrar el TextBlock normalmente, luego colocar un TextBox y ocultarlo. Haga clic en el botón [Editar] y luego muestre el cuadro de texto para lograr el efecto de verse como editar texto.

Código frontal:

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

Aquí [Editar], [Confirmar], [Cancelar] el comando de los tres botones está vinculado al evento de clic, que es controlar la visualización de los tres grupos de botones y la visualización del cuadro de texto. Para lograr el efecto de interfaz, agregue la modificación de datos y Subir lógica.

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

Supongo que te gusta