Question

我试图了解MVVM的基础知识。

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

如何使用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，因为Page只能包含1个内容元素）在我的计算机上无效，并添加了INotifyPropertyChanged代码，它的工作原理。

奖励：如果您想对所有绑定使用x:Bind，则必须在Mode=OneWay绑定上设置TextBlock，因为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>

使用ViewModels通过Button将文本框绑定到Textblock

1 个答案: