将 UserControl 中元素的属性绑定到 MyViewModel.cs 中的属性 [英] Bind the property of an element in UserControl to a property in MyViewModel.cs

问题描述

首先，我对 MVVM 的概念非常陌生.我什至不确定我在这里问的是什至是 MVVM 问题.所以请原谅我在这里可能犯的错误.

First of all, I'm very very new to the concept of MVVM. I'm even not sure what I'm asking here is even a MVVM question. So please forgive me for my mistakes I may make here.

我正在尝试将 UserControl 中 TextBlock 的 Foreground 属性Bind 到 MyViewModel.cs 中的 TextColor 属性.我还希望能够通过代码更改 TextColor 属性.例如通过单击按钮.我如何才能实现所有这些.

I'm trying to Bind the Foreground property of a TextBlock in a UserControl to TextColor property in MyViewModel.cs. I also want to be able to change the TextColor property via code. For example by clicking a button. How can I achieve all of these.

这是我到目前为止提供的完整的非工作无错误代码！

Here is the complete non-working error-free code I've put up so far!

主窗口:

<Window x:Class="WpfApplication23.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        xmlns:local="clr-namespace:WpfApplication23">
    <StackPanel>
        <local:UserControl1 x:Name="MyControl"/>
        <Button Content="Change Color" 
            Width="200" 
            Height="30" 
            Click="ButtonBase_OnClick"/>
    </StackPanel>
</Window> 

MainWindow.xaml.cs:

using System.Windows;    
namespace WpfApplication23
{
    public partial class MainWindow : Window
    {

        public MainWindow()
        {
            InitializeComponent();

            DataContext = new MyViewModel();

        }

        private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
        {
            // Change the `TextColor` property in `MyViewModel.cs`
        }
    }
}

用户控制:

<UserControl x:Class="WpfApplication23.UserControl1"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
    <Grid>
        <TextBlock Text="Sample Text" Foreground="{Binding TextColor}"/>
    </Grid>
</UserControl>

MyViewModel.cs:

public class MyViewModel
{
    public Brush TextColor;

    public MyViewModel()
    {
        TextColor = Brushes.Red;
    }
}

推荐答案

你的 MyViewModel 类应该声明一个公共的 TextColor 属性，而不是一个公共字段(你可以重命名TextBrush，因为它是一个画笔，而不是一个颜色).为了能够通知属性值的变化，它还应该实现 INotifyPropertyChanged 接口.

Your MyViewModel class should declare a public TextColor property, not a public field (and you may rename it to TextBrush, because it is a Brush, not a Color). In order to be able to notify about changes of the property value, it should also implement the INotifyPropertyChanged interface.

public class MyViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    private Brush textColor = Brushes.Red;
    public Brush TextColor
    {
        get { return textColor; }
        set
        {
            textColor = value;
            RaisePropertyChanged("TextColor");
        }
    }

    private void RaisePropertyChanged(string propertyName)
    {
        var handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

在您的按钮单击处理程序中，您现在可以将 DataContext 转换为 MyViewModel 类，并设置属性.

In your button click handler you may now cast the DataContext to your MyViewModel class, and set the property.

private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
    var vm = (MyViewModel)DataContext;
    vm.TextColor = Brushes.Blue;
}

更改颜色的更好解决方案是将按钮的 Command 属性绑定到视图模型中的 ICommand.您可以在 MSDN 上的命令概述文章中开始阅读相关内容.

An even better solution to change the color would be to bind the Button's Command property to an ICommand in your view model. You may start reading about this in the Commanding Overview article on MSDN.

这篇关于将 UserControl 中元素的属性绑定到 MyViewModel.cs 中的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！