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.
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 the quick reply it is appreciated. Below is an image of the current problem I am facing. Basically the 2 images on the right of the TreeNode should be about 5px away from the vertical scroll bar and if there isn't one then 5px off the width of the of the tree. Essentially what I am looking for is |Content | Fixed Images Pushed to right as close to edge as possible|
The issue seems to be that there is extra width being set that causes the horizontal scroll bar to show when it shouldn't and then when you actually scroll the images on the right are no longer all the way to the right. Hope this helps (image might explain better :P)
Could you please try to modify the sample I sent you, so it reproduces your issue and send it back. This way I would be able to investigate this further for you.
Looking forward for your reply.
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.