【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的顯隐切換，實作界面效果後再添加資料的修改和上傳邏輯。