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.
Hi,
Thanks for all your help Stefan, appreciate it. I will log the idea.
Thanks
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.