wpf 复选框和图像绑定

Question

我有一张图片会根据 4 个复选框的状态而变化。我使代码有效，但它看起来太长太复杂，我是 wpf 的新手，无法绑定以使用这 4 个复选框。您可以提供的任何帮助来源或示例都很棒。这是我现在拥有的：

    private void chcbox1_Click(object sender, RoutedEventArgs e)
    {
        if (chcbox1.IsChecked == true)
        {
            chcbox2.IsChecked = false;
            var02 = true;
            var01 = false;
            if (var03)
                img01.Source = new BitmapImage(new Uri("Images/Image04.png", UriKind.Relative));
            else
                img01.Source = new BitmapImage(new Uri("Images/Image03.png", UriKind.Relative));
        }
        else
        { 
            chcbox2.IsChecked = true;
            var02 = false;
            var01 = true;
            if (var03)
                img01.Source = new BitmapImage(new Uri("Images/Image02.png", UriKind.Relative));
            else
                img01.Source = new BitmapImage(new Uri("Images/Image01.png", UriKind.Relative));
        }                
    }

    private void chcbox2_Click(object sender, RoutedEventArgs e)
    {
        if (chcbox2.IsChecked == true)
        {
            chcbox1.IsChecked = false;
            var02 = false;
            var01 = true;
            if (var03)
                img01.Source = new BitmapImage(new Uri("Images/Image02.png", UriKind.Relative));
            else
                img01.Source = new BitmapImage(new Uri("Images/Image01.png", UriKind.Relative));
        }
        else
        {
            chcbox1.IsChecked = true;
            var02 = true;
            var01 = false;
            if (var03)
                img01.Source = new BitmapImage(new Uri("Images/Image04.png", UriKind.Relative));
            else
                img01.Source = new BitmapImage(new Uri("Images/Image03.png", UriKind.Relative));
        }
    }

    private void chcbox3_Click(object sender, RoutedEventArgs e)
    {
        if (chcbox3.IsChecked == true)
        {
            chcbox4.IsChecked = false;
            var04 = true;
            var03 = false;
            if (var01)
                img01.Source = new BitmapImage(new Uri("Images/Image01.png", UriKind.Relative));
            else
                img01.Source = new BitmapImage(new Uri("Images/Image03.png", UriKind.Relative));                
        }
        else
        {
            chcbox4.IsChecked = true;
            var04 = false;
            var03 = true;
            if (var01)
                img01.Source = new BitmapImage(new Uri("Images/Image02.png", UriKind.Relative));
            else
                img01.Source = new BitmapImage(new Uri("Images/Image04.png", UriKind.Relative));   
        }
    }

    private void chcbox4_Click(object sender, RoutedEventArgs e)
    {
        if (chcbox4.IsChecked == true)
        {
            chcbox3.IsChecked = false;
            var04 = false;
            var03 = true;
            if (var01)
                img01.Source = new BitmapImage(new Uri("Images/Image02.png", UriKind.Relative));
            else
                img01.Source = new BitmapImage(new Uri("Images/Image04.png", UriKind.Relative)); 
        }
        else
        {
            chcbox3.IsChecked = true;
            var04 = true;
            var03 = false;
            if (var01)
                img01.Source = new BitmapImage(new Uri("Images/Image01.png", UriKind.Relative));
            else
                img01.Source = new BitmapImage(new Uri("Images/Image03.png", UriKind.Relative));  
        }
    }

checkbox1 和 checkbox2 互斥，checkbox3 和 checkbox4 也是如此所以从所有 4 种组合中我得到 4 种不同的图像。

感谢您的帮助。爱德华多

Answer 1

我可以想到两种方法来简化这个。

使用辅助方法

在所有点击处理程序中，您唯一需要做的就是处理选项的互斥性方面。更新图像似乎总是基于相同的条件。因此，例如，复选框 1 的处理程序可能如下所示：

private void chcbox1_Click(object sender, RoutedEventArgs e)
{
    if (chcbox1.IsChecked) chcbox2.IsChecked = false;
    UpdateImage();
}

所有处理程序都可以遵循相同的模式，然后您的 UpdateImage 方法将根据复选框的状态确定要显示的图像。

使用 MVVM（和辅助方法）

如果您不了解 MVVM，您应该阅读它。这是构建 WPF 的设计模式。

如果创建视图模型 class（实现 INotifyPropertyChanged）并将其设置为控件的数据上下文，则可以将每个复选框的 IsChecked 属性绑定到视图模型中的属性。您还可以将 Image 控件的 Source 属性绑定到视图模型中的属性。

下面是视图模型的部分实现示例：

internal class ViewModel : INotifyPropertyChanged
{
    public bool Option1
    {
        get { return _option1; }
        set
        {
            if (_option1 != value)
            {
                _option1 = value;
                OnPropertyChanged();

                if (value) Option2 = false;
                UpdateImage();
            }
        }
    }
    private bool _option1;

    // Options 2, 3 and 4 basically the same as 1

    public Uri ImageUri
    {
        get { return _imageUri; }
        set
        {
            if (_imageUri != value)
            {
                _imageUri = value;
                OnPropertyChanged();
            }
        }
    }
    private Uri _imageUri;

    private void UpdateImage()
    {
        // Do logic to determine image path and set ImageUri property
    }

    #region INotifyPropertyChanged
    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        var handler = PropertyChanged;
        if (handler != null)
        {
            handler.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
    #endregion
}

您可以通过几种不同的方式将其设置为视图的数据上下文。可能最简单的方法是在调用 InitializeComponent():

之前 before 在视图的构造函数中执行此操作

public View()
{
    DataContext = new ViewModel();
    InitializeComponent();
}

然后，在您的视图 xaml 中，您可以像这样绑定各种东西：

<CheckBox Content="Option 1" IsChecked="{Binding Option1}" />
<Image Source="{Binding ImageUri}" />

wpf 复选框和图像绑定

wpf checbox and image binding

wpf

checkbox

binding