Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
290
xamDataTree or other control for a simple ListView proof of concept
posted

Hello,

I'm a evaluating the controls for creating an advanced ListBox or ListView.  The ItemTemplate of that control must contain a checkbox, an editable TextBlock (for renaming in slow double click), and some command buttons (e.g Remove item, dublicate, edit, reorder). Each item must have drag n drop operation with indicator.  I saw the snippets given for the the xamDataTree control and implements many of these specifications but its a bit complex control but I'm not sure if this is the right control. Which control should be used for that reason? Any suggestion for this matther? Or a sample will be very appreciated!

Thanks

George 

  • 34510
    Verified Answer
    Offline posted

    Hi George,

    I think the XamDataTree is a perfect fit for what you are looking for.  For example, it already supports the use of checkboxes next to each item.  It also already includes editing functionality so you can edit the text displayed in the item.  It also already supports drag + drop and includes indicators to let you know where you are dropping the item.  The only thing you would need to do is provide an ItemTemplate which will contain the command buttons you need to display.

    Checkboxes:
    http://help.infragistics.com/doc/WPF/2015.2/CLR4.0/?page=xamDataTree_xamDataTree_Check_Boxes.html

    Editing:
    http://help.infragistics.com/doc/WPF/2015.2/CLR4.0/?page=xamDataTree_xamDataTree_Editing.html

    Drag and Drop:
    http://help.infragistics.com/doc/WPF/2015.2/CLR4.0/?page=xamDataTree_xamDataTree_Drag_and_Drop.html

    It is a tad bit more complicated to use than a ListView however.  The XamDataTree uses NodeLayouts in order to define what a certain level in the tree would be.  If all you want to display is flat data (non-hierarchical) then you only need one NodeLayout in order to define the single level.  Here is an example of what your tree might look like:

    <ig:XamDataTree ItemsSource="{Binding Path=DataInViewModel}" IsDraggable="True" IsDropTarget="True">
        <ig:XamDataTree.GlobalNodeLayouts>
            <ig:NodeLayout Key="MyRootLayout" TargetTypeName="MyDataItem" DisplayMemberPath="DisplayText" CheckBoxMemberPath="IsChecked"/>
        </ig:XamDataTree.GlobalNodeLayouts>
        
        <ig:XamDataTree.EditingSettings>
            <ig:TreeEditingSettings AllowEditing="True"/>
        </ig:XamDataTree.EditingSettings>
        
        <ig:XamDataTree.CheckBoxSettings>
            <ig:CheckBoxSettings CheckBoxVisibility="Visible"/>
        </ig:XamDataTree.CheckBoxSettings>
    </ig:XamDataTree>

    I have a single NodeLayout and the TargetTypeName is set to the name of the class that my "DataInViewModel" collection contains.  DisplayMemberPath is set to the property inside MyDataItem that I want the tree to display and CheckBoxMemberPath is set to the property that will track the checkbox.

    public class MyDataItem
    {
        public string DisplayText {get;set;}
        public bool IsChecked {get;set;}
    }
    
    public ObservableCollection<MyDataItem> DataInViewModel {get;set;}

    All that's left now is to add your custom ItemTemplate in order to add the command buttons.  The NodeLayout has an ItemTemplate property so this is where your DataTemplate will go.

    I attached a sample application which demonstrates this functionality.  Let me know if you have any questions.

    DataTreeExample.zip