C#:How更改MVVM中的按钮图标？

Question

我试图通过Button更改Click_Event图标，因此目前我的xaml如下所示：

<Button Content="{materialDesign:PackIcon LanDisconnect}" Command="{Binding Connect}" />

在ViewModel中：

public ICommand Connect
{
    get
    {
        _Connect = new RelayCommand(
            param => ConnectChip());
        return _Connect;
    }
}

如何将Button图标更改为命令Connect中的{MaterialDesign:PackIcon LanConnect}？谢谢!

Answer 1

可以将Button的Button属性绑定到在ConnectChip()方法中设置为新值的PackIcon属性。

XAML:

<Button Content="{Binding Icon}" Command="{Binding Connect}" />

视图模型：

public class ViewModel : INotifyPropertyChanged
{
    private ICommand _Connect;
    public ICommand Connect
    {
        get
        {
            _Connect = new RelayCommand(
                param => ConnectChip());
            return _Connect;
        }
    }

    private PackIcon _icon = new PackIcon { Kind = PackIconKind.LanDisconnect };
    public PackIcon Icon
    {
        get { return _icon; }
        set { _icon = value; NotifyPropertyChanged(); }
    }

    private void ConnectChip()
    {
        //change icon:
        Icon = new PackIcon { Kind = PackIconKind.Airballoon };
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

Answer 2

虽然有些评论建议了一些更高级的解决方案(例如使用DataTriggers)。我建议(至少从一开始)您只需要为按钮内容添加一个绑定。然后，您可以向视图模型添加一个属性，并通过命令更新它。

在您的例子中，您使用的是材料设计内容。

因此，在您的视图-模型中，您需要包含一个图标属性：

using MaterialDesignThemes.Wpf;

public PackIconKind IconKind
{
    get { return _IconKind; }
    set { SetField(ref _IconKind, value); }
}
private PackIconKind _IconKind = PackIconKind.LanDisconnect;

有关SetField方法，请参阅此参考

然后将按钮XAML更改为：

<Button Command="{Binding MyCommand}" Width="100" Height="32">
    <materialDesign:PackIcon Kind="{Binding IconKind}" />
</Button>

这将为按钮中的图标设置绑定。现在，视图模型可以随时更改这个Kind。我更喜欢在构造函数中设置命令。我首先有一个命令属性如下：

public ICommand MyCommand { get; }

在构造函数中：

MyCommand = new RelayCommand(UpdateIcon);

然后将UpdateIcon方法添加到视图模型中。然后可以从其他地方调用此方法(而不仅仅是按钮命令)。

protected void UpdateIcon()
{
    IconKind = MaterialDesignThemes.Wpf.PackIconKind.LanConnect;
}