MVVM在点击时更改网格的背景颜色

Che*_*fty 5 c# wpf xaml mvvm visual-studio

我是MVVM模式的真正初学者.我正试图在按钮的点击上更改网格的背景.我有一个包含按钮的网格的xaml,以及一个ViewModel .cs,我希望在按钮点击时更改网格的背景.直到我点击时才能成功显示MessageBox ...

.xaml代码:

<Window x:Class="WpfSimple.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfSimple"
    Title="MainWindow" Height="150" Width="370">
<Window.DataContext>
    <local:MainWindowViewModel/>
</Window.DataContext>
    <Grid>
    <Button Content="Click" 
            Height="23" 
            HorizontalAlignment="Left"
            Background="Gray"
            Margin="75.944,47.465,0,0" 
            Name="btnClick" 
            VerticalAlignment="Top" 
            Width="203"
            Command="{Binding ButtonCommand}"/>
        <!--What is necessary to add for changing grid color ? Commandparameter ?-->
</Grid>
Run Code Online (Sandbox Code Playgroud)

MainWindowViewModel.cs代码:

namespace WpfSimple
{
    class MainWindowViewModel
    {
        private ICommand m_ButtonCommand;
        public ICommand ButtonCommand
        {
            get
            {
                return m_ButtonCommand;
            }
            set
            {
                m_ButtonCommand = value;
            }
        }

        public MainWindowViewModel()
        {
            ButtonCommand=new RelayCommand(new Action<object>(ChangeBgColor));
        }

        public void ChangeBgColor(object obj)
        {
            /*HERE I WANT TO CHANGE GRID COLOR*/
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

对不起,我的英语不好.

最好的祝福.

Vad*_*nov 2

最重要的是,您应该在 ViewModel 中实现INotifyPropertyChanged :

public class MainWindowViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    // This method is called by the Set accessor of each property.
    // The CallerMemberName attribute that is applied to the optional propertyName
    // parameter causes the property name of the caller to be substituted as an argument.
    private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

然后,将 NotifyPropertyChanged() 添加到属性设置器中。

好的。接下来,将带有网格背景颜色的新属性添加到 ViewModel 中:

private Brush _gridBackground;
public Brush GridBackground
{ 
    get { return _gridBackground; }
    set
    {
        _gridBackground = value;
        NotifyPropertyChanged();
    }
}
Run Code Online (Sandbox Code Playgroud)

并将网格的背景绑定到您的属性:

<Grid Background="{Binding GridBackground}">
Run Code Online (Sandbox Code Playgroud)

最后,您可以在命令处理程序中更改 GridBackground:

public void ChangeBgColor(object obj)
{
    GridBackground = Brushes.Blue;
}
Run Code Online (Sandbox Code Playgroud)

您应该记住,将 Brush 等 WPF 类添加到代码中是一种不好的做法。更好的方法是在 XAML 代码中使用IValueConverter并在 ViewModel 中使用 BCL 类。例如,您可以在ViewModel中使用枚举,并在ValueConverter中将其转换为画笔。

  1. 为您的 ViewModel 属性添加新的枚举:

    public enum GridState { Valid, Invalid }
    
    Run Code Online (Sandbox Code Playgroud)
  2. 更改属性类型:

    private GridState _gridBackground;
    public GridState GridBackground
    { 
        get { return _gridBackground; }
        set
        {
            _gridBackground = value;
            NotifyPropertyChanged();
        }
    }
    
    Run Code Online (Sandbox Code Playgroud)
  3. 使用值转换器添加新类

    public class GridStateToBackgroundColorConverter : IValueConverter
    {
        #region IValueConverter Members
    
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            GridState val = (GridState) value;
            if(val == GridState.Valid)
                return Brushes.Green;
            return Brushes.Red;
        }
    
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotSupportedException();
        }
    
        #endregion
    }
    
    Run Code Online (Sandbox Code Playgroud)
  4. 将新的静态资源添加到您的控件中

    public class MainWindowViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
    
        // This method is called by the Set accessor of each property.
        // The CallerMemberName attribute that is applied to the optional propertyName
        // parameter causes the property name of the caller to be substituted as an argument.
        private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
    
    Run Code Online (Sandbox Code Playgroud)
  5. 更新对您的属性的绑定

    private Brush _gridBackground;
    public Brush GridBackground
    { 
        get { return _gridBackground; }
        set
        {
            _gridBackground = value;
            NotifyPropertyChanged();
        }
    }
    
    Run Code Online (Sandbox Code Playgroud)