当选择范围为 [0,1] 时，如何对树视图 wpf mvvm 中的复选框进行分组

Question

我使用 MVVM 在 wpf 中制作了一个树视图。

它工作正常，但有一个问题，叶节点包含一些复选框，并且用户只有两个选项，要么选择一个，要么不选择。

那么这里我如何限制用户最多只能选择一种冷饮。

我做了一个技巧，但它不起作用，当我已经选择了一种饮料，然后选择另一种饮料时，我将可观察集合中的最后一个选定值设置为 false，但它不会影响视图，并且选定的复选框仍然存在尽管集合中只有一个选项的值是 true，但已选择。

我无法使用单选按钮插入复选框，因为用户无法选择任何选项，并且我无法为上述任何选项提供附加选项。

如果有人有任何解决方案，请告诉我，我将非常感激。

更新的问题： 我认为我没有以正确的方式定义我的问题，所以我在这里给出我的代码片段，希望通过这个我能得到我的问题的解决方案...

我的视图模型类

namespace TestViewModels
{
 public class ViewModel :ViewModelBase

{

    private ObservableCollection<AvailableProducts> _MyTreeViewProperty

    public ObservableCollection<AvailableProducts> MyTreeViewProperty
    {
        get { return _MyTreeViewProperty
        set { _MyTreeViewProperty value; 
        RaisePropertyChanged("MyTreeViewProperty");}
    }

}

public class AvailableProducts

{

     private string _BrandName;

    public string BrandName
    {
        get { return _BrandName
        set { _BrandName = value; }
    }


    private bool _IsExpanded;
    public bool IsExpanded
    {
        get
        {
            return _IsExpanded;

        }
        set
        {
            _IsExpanded = value;

        }
    }

    private ObservableCollection<ProductTypes> _MyProductTypes

    public ObservableCollection<ProductTypes> MyProductTypes
    {
        get { return _MyProductTypes}
        set { _MyProductTypes= value; }
    }


}

public class ProductTypes
{
    private string _ProductTypeName;

    public string ProductTypeName
    {
        get { return _ProductTypeName;
        set { _ProductTypeNamevalue; }
    }



    private ObservableCollection<ProductSubTypes> _ProdSubTypes;

    public ObservableCollection<ProductSubTypes> ProdSubTypes
    {
        get { return _ProdSubTypes;}
        set { _ProdSubTypes;= value; }
    }


}


public class ProductSubTypes
{
    private string _ProductSubTypeName;

    public string ProductSubTypeName
    {
        get { return _ProductSubTypeName;
        set { _ProductSubTypeName;}
    }

    private int _ParentID;

    public int ParentID
    {
        get { return _ParentID;}
        set { _ParentID;= value; }
    }


    private bool _IsAssigned;

    public bool IsAssigned
    {
        get { return _IsAssigned; }
        set
        {
            _IsAssigned = value;

            if _ParentID;!= 0)
            {
               //updating data in database
               //Calling and setting new collection value in property

              //issue : updated collection sets in setter of MyTreeViewProperty but before calling getter
            // it comes to IsAssigned getter so view doesnt get updated  collection of MyTreeViewProperty 

            }
            RaisePropertyChanged("IsAssigned");
        }
    }


}

}

<强>查看

<Page x:Class="ShiftManagerViews.Pages.ProductTreeSelection
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
  DataContext="{Binding ProductsTree, Source={StaticResource Locator}}"
  mc:Ignorable="d"  Width="870" Height="665"

>

     <TreeView  Margin="10,10,0,13" ItemsSource="{Binding MyTreeViewProperty, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"  HorizontalAlignment="Left"

VerticalAlignment="Top" Width="800" Height="Auto" MinHeight="400" MaxHeight="800">
                <TreeView.ItemContainerStyle>

                    <Style TargetType="{x:Type TreeViewItem}">
                        <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
                     </Style>
                </TreeView.ItemContainerStyle>

                <TreeView.Resources>

                        <HierarchicalDataTemplate DataType="{x:Type local:AvailableProducts}"
                                      ItemsSource="{Binding MyProductTypes}"> 
                        <WrapPanel>
                            <Image Width="20" Height="20" Source="/ShiftManagerViews;component/Images/12.bmp"/>
                            <Label Content="{Binding BrandName}" FontSize="14"/>
                        </WrapPanel>
                    </HierarchicalDataTemplate>

                        <HierarchicalDataTemplate DataType="{x:Type local:ProductTypes}"
                                      ItemsSource="{Binding ProdSubTypes}">
                        <WrapPanel>
                            <Image Width="18" Height="15" Source="/ShiftManagerViews;component/Images/12.bmp"/>
                            <Label Content="{Binding ProductTypeName}" FontSize="13"/>
                        </WrapPanel>
                    </HierarchicalDataTemplate>
                        <!-- the template for showing the Leaf node's properties-->
                        <DataTemplate DataType="{x:Type local:ProductSubTypes}">
                            <StackPanel>

                                <CheckBox IsChecked="{Binding IsAssigned, Mode=TwoWay}" Content="{Binding ProductSubTypeName}" Height="25">

                            </CheckBox>
                            </StackPanel>
                        </DataTemplate>
                    </TreeView.Resources>
                </TreeView>

Answer 1

使用 ListBox 代替 TreeView 显示子项怎么样？您可以设置样式，以便项目包含 CheckBox 以显示 IsSelected 而不是突出显示该项目。

Answer 2

我建议你的用户界面是错误的。如果用户只能选择一个，那么最好将它们替换为单选按钮并添加“以上都不是”选项。然后，这将免费为您提供您想要的行为，并且您的用户界面将更加直观。

编辑：既然你说你不能添加“无”选项并且想要使用复选框（尽管我强烈不同意单选按钮更合适的复选框 - 常见的 UI 错误）。 ..

您可能面临的技术问题是 ObservableCollection 仅在集合本身发生更改时才会引发通知事件。即仅当添加或删除项目时。当集合中的项目发生更改时，它不会引发事件，因此更改代码中复选框的状态不会引发 UI 绑定操作的事件。

解决此问题的一种方法是编写一个扩展 ObservableCollection 的自定义类，该类确实提供此行为

来自 MSDN ：

如果您需要知道某人是否更改了其中一个的属性
集合中的项目，您需要确保项目
该集合实现 INotifyPropertyChanged 接口，并且
您需要手动附加属性更改事件处理程序
那些物体。无论你如何改变内部对象的属性
集合，集合的 PropertyChanged 事件将不会触发。
事实上，ObservableCollection 的 PropertyChanged 事件
处理程序受到保护——除非继承，否则您甚至无法对其做出反应
从课堂上摘下来，然后自己揭露出来。当然，你可以处理
集合中每个项目的 PropertyChanged 事件
您继承的收藏

Answer 3

我赞成 Rachel 的回答，这是 WPF 中对单选按钮或复选框集进行数据绑定的常见方法。如果您仍然想采用树视图方式，下面的代码可以工作。所有与视图相关的代码都在视图中，因此下面的代码遵循 MVVM 原则。如果您是 MVVM 纯粹主义者，则可以将代码放在后面，如果您不希望后面有任何代码，则可以将 TreeView 控件放在用户控件中。

XAML：

<TreeView ItemsSource="{Binding Path=Drinks}">
    <TreeView.ItemTemplate>
        <DataTemplate>
            <CheckBox Content="{Binding .}" Checked="OnCheckBoxChecked" Unchecked="OnCheckBoxUnchecked" Loaded="OnCheckBoxLoaded" />
        </DataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

代码隐藏 + VM：

public partial class Window1
{
    public Window1()
    {
        InitializeComponent();

        DataContext = new VM();
    }

    private void OnCheckBoxChecked(object sender, System.Windows.RoutedEventArgs e)
    {
        foreach (CheckBox checkBox in _checkBoxes.Where(cb => cb != sender))
        {
            checkBox.IsChecked = false;
        }

        (DataContext as VM).CurrentDrink = (sender as CheckBox).Content.ToString();
    }

    private void OnCheckBoxUnchecked(object sender, System.Windows.RoutedEventArgs e)
    {
        (DataContext as VM).CurrentDrink = null;
    }

    private void OnCheckBoxLoaded(object sender, System.Windows.RoutedEventArgs e)
    {
        _checkBoxes.Add(sender as CheckBox);
    }

    private List<CheckBox> _checkBoxes = new List<CheckBox>();
}

public class VM
{
    public List<string> Drinks
    {
        get
        {
            return new List<string>() { "Coffee", "Tea", "Juice" };
        }
    }

    public string CurrentDrink { get; set; }
}

Answer 4

我做了一个技巧，但当我已经选择了一个时，它不起作用
喝，然后我选择另一个而不是我设置的最后选择的值
在可观察集合中设置为 false 但不影响视图
尽管仅在集合中，但选定的复选框仍保持选中状态
一个选项的值为 true。

确保您的孩子反对（可用产品
和 SubProductTypes) 还实现 INotifyPropertyChanged，这将确保 UI 在修改对象时收到更改。

一旦所有对象正确更新 UI，您将能够分层并测试您需要的任何自定义业务逻辑。

因此，如果您的产品类型只能选择一个子类型，则可以在 ProductType 上添加一个名为 OnlyAllowOneChild 的属性。每当子对象引发 IsAssigned 已更改事件时，父对象都可以将所有其他子对象设置为 false。当然，这需要您让父级注册子级的 PropertyChangedEvent，或者获取 EventAggregator（MVVMLight Messenger 或 PRISM EvenAggregator）并创建消息系统。

Answer 5

最后我成功解决了我的问题。

在“已分配”属性上，我正在更新数据库值并使用 MVVM Light 消息传递调用视图中的方法，并将当前选定的叶子的父 id 作为参数传递给其中...

在类产品类型中添加了一个属性以展开最后一个的父节点选定的叶子..

在视图的方法中，我正在刷新数据上下文的源并将当前选定的叶子的父ID传递给VM以将其Is Expanded属性值设置为true...

通过此，我的视图与我想要的完全一样...
如果有人有比这更好的解决方案，我会很高兴知道。