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.
Hi,
Problem is horizontal scroll bar is coming in tree view. Can you please provide me solution to avoid horizontal scroll bar. Vertical scroll bar is fine.
Thanks
Vikas
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.
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 for all your help Stefan, appreciate it. I will log the idea.
Hello Hagashen,
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.