I want to create a Tree View with right aligned delete icon on each node. Alignment of all delete icon should be proper for each node. Also i need checboxes in each and every node.
Till now i have developed below code. But in that delete icon is not aligned properly.
<ig:XamDataTree x:Name="MyTree" Margin="2,40,2,2" Grid.Row="0" Grid.Column="0" ActiveNodeChanged="MyTree_ActiveNodeChanged" NodeExpansionChanged="MyTree_NodeExpansionChanged" NodeCheckedChanged="MyTree_NodeCheckedChanged" KeyDown="MyTree_KeyDown" KeyUp="MyTree_KeyUp" > <ig:XamDataTree.SelectionSettings> <ig:TreeSelectionSettings NodeSelection="Single"/> </ig:XamDataTree.SelectionSettings> <!-- Enable Check Boxes--> <ig:XamDataTree.CheckBoxSettings> <ig:CheckBoxSettings CheckBoxVisibility="Visible" IsCheckBoxThreeState="True"/> </ig:XamDataTree.CheckBoxSettings> <ig:XamDataTree.GlobalNodeLayouts> <ig:NodeLayout Key="RegionLayout" TargetTypeName="Region" DisplayMemberPath="Name" CheckBoxMemberPath="isChecked"> <ig:NodeLayout.ItemTemplate> <DataTemplate> <DockPanel Width="200"> <Button Tag="{Binding Data.Name}" Background="Transparent" HorizontalAlignment="Right" DockPanel.Dock="Left" BorderBrush="Transparent" BorderThickness="0" Padding="-4" Click="Button_Click_1"> <StackPanel> <Image Source="/Images/trash.png" Height="15" Width="15" /> </StackPanel> </Button> <TextBlock Width="5"></TextBlock> <TextBlock FontWeight="Bold" Text="{Binding Data.Name}"/>
</DockPanel> </DataTemplate> </ig:NodeLayout.ItemTemplate> </ig:NodeLayout> <ig:NodeLayout Key="Zone" TargetTypeName="Zone" DisplayMemberPath="Name" CheckBoxMemberPath="isChecked"> <ig:NodeLayout.ItemTemplate> <DataTemplate> <DockPanel Width="200"> <Button Tag="{Binding Data.Name}" Background="Transparent" HorizontalAlignment="Right" DockPanel.Dock="Left" BorderBrush="Transparent" BorderThickness="0" Padding="-4" Click="Button_Click_2"> <StackPanel> <Image Source="/Images/trash.png" Height="15" Width="15" /> </StackPanel> </Button> <TextBlock Width="5"></TextBlock> <TextBlock FontWeight="Bold" Text="{Binding Data.Name}"/>
</DockPanel> </DataTemplate> </ig:NodeLayout.ItemTemplate> <!-- Disable Check Boxes at the Product Level --> <ig:NodeLayout.CheckBoxSettings> <ig:CheckBoxSettingsOverride CheckBoxVisibility="Visible"/> </ig:NodeLayout.CheckBoxSettings> </ig:NodeLayout> </ig:XamDataTree.GlobalNodeLayouts> <ig:XamDataTree.EditingSettings> <ig:TreeEditingSettings AllowDeletion="True"/> </ig:XamDataTree.EditingSettings> </ig:XamDataTree>
Please suggest if we can achive it in a different way. But mostly i want to to do it with XamDataTree only not with XAMGrid.
I have attached an problem image also. PFA.
Hello Vikas,
I am just checking if you got this worked out or you still require any assistance or clarification on the matter.
I have modified the sample, so now it works as you want. Basically I added a Style for the ScrollBar and handle its Loaded event. In the handler I check if the orientation is Horizaontal and if yes I set the ScrollBar's Height and MinHeight Properties to 0. Please let me know if you need further clarification on this matter.
Looking forward for your reply.
Thanks a lot. Finally I got the proper solution. Thanks
Thank you for your feedback. I am glad that you resolved your issue and I believe that other community members may benefit from this as well.
Thanks again.
Hi,
I have you the solution in this post as i need the same behaviour. One problem i have with it though is that if the is a vertical scroll that occurs the icons/buttons that are aligned to the right do not move instead stay at there original position as before the scroll. Is there a way to fix this?
Also how do i make the whole row the selection/highlight area? At the moment the space between the text and the button on the right does not register as selection area?
Thanks
Hello Hagashen,
Thank you for your post. I have been looking into it and I modified the sample I uploaded before, so now it has the functionalities you want. Basically I added Style for the XamDataTreeNodeControl and handled its PreviewMouseLeftButtonDown event. In the handler I check or uncheck the clicked node. As for the scrollbar visibility, I set the Tag Property of the XamDataTree to be the VerticalScrtollBar and added a Binding to its Visibility in the DockPanel's Width. This way I was able to change the width based on the visibility.
Hope this helps you.
Thanks for all your help Stefan, appreciate it. I will log the idea.
After investigating further it turns out that the XamDataTree is not designed for a scenario like yours and the best workaround is to hide the horizontal scrollbar. The thing you can do is logging a Product idea for auto fitting of the nodes. You can do this here:
http://ideas.infragistics.com/
Hi Stefan,
I am sorry must of been a dull moment of mine, did not mean to confuse things. Are you able to now see the problem I am facing?
In some of your previous posts you said that you don't want a horizontal scroll bar to appear, this is why I used this code - to disable the horizontal scrollbar.
In your sample simply change the MainWindow.xaml.cs method
private void ScrollBar_Loaded(object sender, RoutedEventArgs e) { if ((sender as ScrollBar).Orientation == Orientation.Horizontal) { //(sender as ScrollBar).MinHeight = 0; //(sender as ScrollBar).Height = 0; } else xamDataTree1.Tag = sender; }
i.e. allow the horizontal scrollbars. Then expand one of the parents, notice that the horizontal scrollbars appear even though there no need for them space wise.