【C#/WPF】TextBlock/TextBox/Label编辑文字的问题

简介: 原文:【C#/WPF】TextBlock/TextBox/Label编辑文字的问题 标题有点描述不清,就当是为了方便自己用时易于搜索到。
原文: 【C#/WPF】TextBlock/TextBox/Label编辑文字的问题

标题有点描述不清,就当是为了方便自己用时易于搜索到。
总之需求是:显示用户信息(文字)时,允许用户编辑自己的信息。

效果图如下:
点击【编辑】按钮前:
这里写图片描述

点击【编辑】按钮后,允许编辑:
这里写图片描述

  • 别吐槽为甚性别还能再改。。。我就是意思意思这个效果
  • 使用了样式,但不是本文关注点,于是省略
  • 按钮的作用也不是本文关注点,省略

一种解决思路:
正常显示用的TextBlock,然后在它上面放一个TextBox并隐藏。点击【编辑】按钮后再显示TextBox,达到看起来像是编辑文字的效果!

前台代码:

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

这里【编辑】、【确认】、【取消】三个按钮的Command绑定到点击事件,就是控制这三个按钮组的显隐和TextBox的显隐切换,实现界面效果后再添加数据的修改和上传逻辑。

目录
相关文章
|
7月前
|
C# Windows
C#通过代码实现快捷键编辑
C#通过代码实现快捷键编辑
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(10) -- 在DataGrid上直接编辑保存数据
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(10) -- 在DataGrid上直接编辑保存数据
|
4月前
|
C# 开发者 Windows
WPF与PDF文档:解锁创建和编辑PDF文件的新技能——从环境配置到代码实践,手把手教你如何在WPF应用中高效处理PDF,提升文档管理效率
【8月更文挑战第31天】随着数字文档的普及,PDF因跨平台兼容性和高保真度成为重要格式。WPF虽不直接支持PDF处理,但借助第三方库(如iTextSharp)可在WPF应用中实现PDF的创建与编辑。本文通过具体案例和示例代码,详细介绍了如何在WPF中集成PDF库,并展示了从设计用户界面到实现PDF创建与编辑的完整流程。不仅包括创建新文档的基本步骤,还涉及在现有PDF中添加页眉页脚等高级功能。通过这些示例,WPF开发者可以更好地掌握PDF处理技术,提升应用程序的功能性和实用性。
154 0
|
4月前
|
C# 开发者 数据处理
WPF开发者必备秘籍:深度解析数据网格最佳实践,轻松玩转数据展示与编辑大揭秘!
【8月更文挑战第31天】数据网格控件是WPF应用程序中展示和编辑数据的关键组件,提供排序、筛选等功能,显著提升用户体验。本文探讨WPF中数据网格的最佳实践,通过DevExpress DataGrid示例介绍其集成方法,包括添加引用、定义数据模型及XAML配置。通过遵循数据绑定、性能优化、自定义列等最佳实践,可大幅提升数据处理效率和用户体验。
62 0
|
6月前
|
C#
技术经验分享:c#拆分字符串英文和数字(包括国外所以文字)
技术经验分享:c#拆分字符串英文和数字(包括国外所以文字)
35 0
技术经验分享:c#拆分字符串英文和数字(包括国外所以文字)
|
7月前
|
C# 开发工具 数据安全/隐私保护
C# 给图片添加文字水印
C# 给图片添加文字水印
|
7月前
|
开发框架 .NET C#
C# 自动填充文字内容到指定图片
C# 自动填充文字内容到指定图片
|
Web App开发 存储 C#
C# 10分钟入门基于WebOffice实现在线编辑文档,实时保存到服务器(所有office,兼容WPS)
C# 10分钟入门基于WebOffice实现在线编辑文档,实时保存到服务器(所有office,兼容WPS)
|
7月前
|
C#
[C#] 如何在子线程中显示编辑控件内容
[C#] 如何在子线程中显示编辑控件内容
54 0
|
C# Windows
WPF技术之TextBlock控件
WPF(Windows Presentation Foundation)的TextBlock控件是用于显示文本的控件。与Label控件相比,TextBlock提供了更多的灵活性和格式化选项。
500 1