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

70 篇文章 4 订阅

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

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

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

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

一种解决思路:
正常显示用的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的显隐切换,实现界面效果后再添加数据的修改和上传逻辑。

WPF中,可以使用TextBlock控件来显示文本,并使文本居中显示。TextBlock控件本身没有VerticalContentAlignment属性,因为它会根据文字的高度自动调整控件的高度与宽度,并默认居中显示。所以,只要将TextBlock放置在整个布局容器中垂直居中,文字就会自动居中显示。例如,可以使用Grid布局容器将TextBlock放置在中心位置,如下所示: ```xaml <Grid Background="Beige"> <TextBlock FontSize="36" HorizontalAlignment="Center" VerticalAlignment="Center" Text="这里显示文本输出"></TextBlock> </Grid> ``` 这样,TextBlock中的文本就会在水平和垂直方向上都居中显示。相比之下,TextBox控件可以使用HorizontalContentAlignment和VerticalContentAlignment属性来实现文本的居中显示。例如,可以设置TextBox的HorizontalContentAlignment和VerticalContentAlignment属性为Center,如下所示: ```xaml <TextBox FontSize="36" Width="400" Height="100" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Text="这里显示文本输出"></TextBox> ``` 这样,TextBox中的文本也会在水平和垂直方向上都居中显示。 #### 引用[.reference_title] - *1* *2* *3* [VS编程,WPF中,关于TextBlockTextBox 控件文本垂直居中或者水平居中的说明](https://blog.csdn.net/qq_43307934/article/details/82969733)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值