Question

我有一张图片会根据4个checbox的状态而改变。我使代码工作，但它似乎太长而复杂，我是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构建的设计模式。

如果创建一个viewmodel类（实现INotifyPropertyChanged）并将其设置为控件的数据上下文，则可以将每个复选框的IsChecked属性绑定到viewmodel中的属性。您还可以将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（）之前在视图的构造函数中执行此操作：

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

然后，在您的视图的xaml中，您可以绑定以下各种内容：

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

wpf checbox和图像绑定

1 个答案: