使用 ViewModels 通过按钮将文本框绑定到文本块

Question

我正在尝试了解 MVVM 的基础知识。

现在我有一个基本的 UWP 应用程序，我想在 TextBox 中输入文本，然后在按下 Button 后在 TextBlock 中显示该文本。

如何使用 MVVM 来做到这一点？

XAML

<Page.DataContext>
    <vm:MainPageViewModel x:Name="ViewModel" />
</Page.DataContext>

<StackPanel>
    <TextBox Width="200" Height="40" Text="{Binding FirstName, Mode=TwoWay}" ></TextBox>
    <Button  Content="Add" Click="{x:Bind ViewModel.Add}" ></Button>
    <TextBlock FontSize="30" Text="{Binding OutPut}" ></TextBlock>
</StackPanel>

MainPageViewModel：（C#）

public class MainPageViewModel : ViewModelBase
{
    public MainPageViewModel()
    {

    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void RaisePropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    private string _OutPut;
    public string OutPut
    {
        get
        {
            return _OutPut;
        }
        set
        {
            _OutPut = value;
            RaisePropertyChanged(nameof(OutPut));
        }
    }

    private string _FirstName;
    public string FirstName
    {
        get
        {
            return _FirstName;
        }
        set
        {
            _FirstName = value;
            RaisePropertyChanged(nameof(FirstName));
        }
    }


    public void Add()
    { 
        OutPut = FirstName;
        // Debug.WriteLine(Output);
    }
}

当我按下按钮时，输入文本显示在输出窗口中，但我怎样才能让它显示在Textblock中？

Answer 1

您的MainPageViewModel 或ViewModelBase 必须实现INotifyPropertyChanged。仅仅添加PropertyChangedEventHandler 是不够的。

public class MainPageViewModel : ViewModelBase, INotifyPropertyChanged

或

public class ViewModelBase : INotifyPropertyChanged

没有INotifyPropertyChanged，您提供的代码（我在控件周围添加了StackPanel，因为页面只能有1 个内容元素）在我的机器上不起作用，在代码中添加INotifyPropertyChanged，它可以工作。

---

奖励：如果您想对所有绑定使用x:Bind，则必须在TextBlock 绑定上设置Mode=OneWay，因为x:Bind 的默认值是OneTime。

<Page.DataContext>
    <local:MainViewModel x:Name="ViewModel" />
</Page.DataContext>

<StackPanel>
    <TextBox Width="200" Height="40" Text="{x:Bind ViewModel.FirstName, Mode=TwoWay}" ></TextBox>
    <Button  Content="Add" Click="{x:Bind ViewModel.Add}" ></Button>
    <TextBlock FontSize="30" Text="{x:Bind ViewModel.OutPut, Mode=OneWay}" ></TextBlock>
</StackPanel>