如何强制 TextBox 显示正在输入的内容？

Question

在我的 UWP 应用程序中，我在单击按钮 (btnCre8NewMap) 时调用 ContentDialog。这是相关的 XAML：

<Button x:Name="btnCre8NewMap" Content="Create New Map" ToolTipService.ToolTip="Create a new map" Margin="140,16,50,0" VerticalAlignment="Top" Click="btnCre8NewMap_Click"/>
. . .
<ContentDialog x:Name="cntDlgCre8Map"
Title="Create a New Map"
PrimaryButtonText="Save"
CloseButtonText="Cancel"
DefaultButton="Primary">
    <StackPanel>
    <TextBlock Text="Map Name: "/>
    <TextBox x:Name="txtbxMapName"
        Width="300" HorizontalAlignment="Left"/>
    <TextBlock Text="Default Zoom Level: "/>
    <ComboBox x:Name="cmbxCre8MapZoomLevels"
        Width="100" HorizontalAlignment="Left"/>
    <TextBlock Text="Map Notes: "/>
    <TextBox x:Name="txtbxMapNotes"
        Width="300" Height="300" HorizontalAlignment="Left"/>
    </StackPanel>
</ContentDialog>

...这是代码隐藏中的按钮单击事件：

private async void btnCre8NewMap_Click(object sender, RoutedEventArgs e)
{
    try
    {
        string mapName = string.Empty;
        string mapNotes = string.Empty;
        int defaultZoomLevel = 1;
        ClearLocations();
        // Popul8 the cmbx
        for (int i = 1; i < 20; i++)
        {
            cmbxCre8MapZoomLevels.Items.Add(i.ToString());
        }
        ContentDialogResult result = await cntDlgCre8Map.ShowAsync();

        if (result == ContentDialogResult.Primary)
        {    
            mapName = txtbxMapName.Text;
            mapNotes = txtbxMapNotes.Text;
            defaultZoomLevel = cmbxCre8MapZoomLevels.SelectedIndex + 1;
            InsertMapRecord(mapName, mapNotes, preferredZoomLevel);
        }
        // else do nothing (don't save)
    }
    catch (Exception ex)
    {
        MessageDialog exceptionMsgDlg = new MessageDialog(ex.Message, "btnCre8NewMap_Click");
        await exceptionMsgDlg.ShowAsync();
    }
}

这是我点击按钮时看到的，在txtbxMapName中输入“bla”，然后在txtbxMapNotes中输入一堆文字：

问题是，虽然 txtbxMapName 允许我输入一个值（屏幕截图中的“bla”），但 txtbxMapNotes 在我输入文本时什么也没有显示（注意中间的“x”）。一旦我退出 txtbxMapNotes 控件，我输入的内容最终会显示出来，但是...?!?

我需要做什么才能让 txtbxMapNotes 在输入时显示正在输入的内容（不仅仅是在离开控件之后）？

Answer 1

您可以在此处使用data-binding 在顶部TextBox 中键入时显示文本框中的文本。

像这样更改 ContentDialog Xaml：

  <StackPanel>
            <TextBlock Text="Map Name: "/>
            <TextBox x:Name="txtbxMapName" Width="300" HorizontalAlignment="Left" Text="{Binding InputString,Mode= TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
            <TextBlock Text="Default Zoom Level: "/>
            <ComboBox x:Name="cmbxCre8MapZoomLevels" Width="100" HorizontalAlignment="Left"/>
            <TextBlock Text="Map Notes: "/>
            <TextBox x:Name="txtbxMapNotes" Width="300" Height="300" HorizontalAlignment="Left" Text="{Binding InputString, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" />
        </StackPanel>

在后面的代码中，创建一个名为 ViewModel 的新类：

 public class ViewModel: INotifyPropertyChanged 
{
    private string _inputString;

    public string InputString
    {
        get { return _inputString; }
        set
        {
            _inputString = value;
            RaisePropertyChanged("InputString");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void RaisePropertyChanged(string name)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(name));
        }
    }
}

在代码隐藏中：

 public ViewModel viewModel { get; set; }
    public MainPage()
    {
        this.InitializeComponent();

        viewModel = new ViewModel();

        this.DataContext = viewModel;
    }

我使用 MainPage 进行测试。您可以将代码添加到应用中的真实页面。

您可能对INotifyPropertyChanged interface 和Binding markup extension 感到困惑。 请参阅这些文档以获取有关数据绑定的更多信息：Data binding overview 和 Data binding in depth。

更新：

将 TextWrapping="Wrap" 添加到 TextBox 以使清除所有按钮不可见。 像这样：

<TextBox x:Name="txtbxMapNotes" Width="300" Height="300" TextWrapping="Wrap" HorizontalAlignment="Left" Text="{Binding InputString, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" />