如何在treeview wpf MVVM中分组复选框。

Question

I have made a tree View in wpf Using MVVM.

it is working fine but here is one problem that leaf node contains some checkboxes and user have only two options either to select one or none.

So here how i can restricted user to select maximum only one cold drink.

I did one trick but it didn't work that when i have already selected a drink and then i select another one than i set the last selected value in the observable collection to false but it doesn't affect on view and selected check boxes remains selected although in collection only one option's value is true.

I cant use radio button instedof checkbox becasue user can select none of the options and i cant give an additional option for none of the above.

If any one have any solution so please let me know I'll be very thankful.

updated question: i think i didn't define my problem in a proper way so i am giving my code snipperts here hope by this i'll get the solution of my problem...

My View Model Class

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");
        }
    }


}

}

View

<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

What about using a ListBox to display sub-items instead of a TreeView ? You can style that so the items contain a CheckBox to show IsSelected instead of highlighting the item.

Answer 2

I'd suggest your user interface is wrong. If the user can only pick one then it would be better to swap these for radio buttons and add a "None of the above" option. That'll then give you the behaviour you want for free and your UI will be more intuitive.

EDIT: Since you say you can't add a "None" option and want to use a checkbox (even though I strongly disagree on checkboxes where a radio button is more appropriate - a common UI error)...

The technical problem you are probably facing is that an ObservableCollection only raises notification events if the collection itself changes. ie Only if items are added or removed. It does not raised events when items within the collection change, therefore the changing the status of the checkbox in the code will not raise the event for the UI binding to act on.

One solution to this to write a custom class that extends ObservableCollection that does provide this behaviour

From MSDN :

If you need to know if someone has changed a property of one of the items within the collection, you'll need to ensure that the items in the collection implement the INotifyPropertyChanged interface, and you'll need to manually attach property changed event handlers for those objects. No matter how you change properties of objects within the collection, the collection's PropertyChanged event will not fire. As a matter of fact, the ObservableCollection's PropertyChanged event handler is protected—you can't even react to it unless you inherit from the class and expose it yourself. You could, of course, handle the PropertyChanged event for each item within the collection from your inherited collection

Answer 3

I upvoted Rachel's answer, it is a common way in WPF to databind sets of radio buttons or check boxes. If you still want to go the tree view way, below code works. All view related code is in the view, so below code follows MVVM principles. If you are a MVVM purist you can put the code behind and a TreeView control in a user control if you do not want any code behind.

XAML:

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

Code behind + 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

I did one trick but it didn't work that when i have already selected a drink and then i select another one than i set the last selected value in the observable collection to false but it doesn't affect on view and selected check boxes remains selected although in collection only one option's value is true.

Make sure that your child objects (AvailableProducts and SubProductTypes) also implement INotifyPropertyChanged, this will make sure that the UI receives changes when modify the object.

Once all of you objects update the UI properly you will be able to layer in, and test, whatever custom business logic you need.

So if you have a product type that can only have one sub chosen, you could add a property on ProductType called OnlyAllowOneChild. Whenever, a child object raises a IsAssigned changed event, the parent can set false all other children. This of course requires you to have the parent either register for the children's PropertyChangedEvent, or got grab an EventAggregator (MVVMLight Messenger, or PRISM EvenAggregator) and create a messaging system.

Answer 5

Finally i am succeeded to solve my problem.

on Is Assigned property i am updating my database values and calling a method in view using MVVM Light messaging and passing currently selected leaf's parent id in it as a parameter...

Added a property in class Product Types to expand the parent node of the last selected leaf..

In view's method i am refreshing data context's source and passing currently selected leaf's parent id tO the VM to set its Is Expanded property value to true...

By this my view is working perfectly as same as i want... If any body have solution better than this than I'll be happy to know.