How to create node like Grid

GoXam
1

HI

How to create node like Grid with some data on it.
Like we see in ERP...
2

Do you mean like the nodes in the Entity Relationship sample (“ER Diagram”)?

3

Yes

4

I have placed a datagrid inside the node…

have a look at the below datatemplate...Problem which am facing is when ever the items in the grid increases which overlapps either node above to that or node below to that..how to avoid the overlapping when the datagrid item increases
<DataTemplate x:Key="CustomGroup">
<go:SpotPanel Background="{x:Null}"
DataContext="{Binding}" go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}" MouseEnter="Node_MouseEnter" MouseLeave="Node_MouseLeave" MouseLeftButtonUp="SpotPanel_MouseLeftButtonUp" Style="{StaticResource SpotPanelStyle}"> <go:NodePanel go:SpotPanel.Main="True" Sizing="Auto" > <Path x:Name="Shape" go:NodePanel.Figure="{Binding Path=Data.Figure}" Stroke="{Binding Path=Data.Highlight, Converter={StaticResource theStrokeColorConverter}}" StrokeThickness="{Binding Path=Data.Highlight, Converter={StaticResource theStrokeThicknessConverter}}" Style="{StaticResource NodeShapeStyleAll}" /> <Grid DataContext="{Binding}"> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <StackPanel Orientation="Vertical"> <TextBlock Width="Auto" Height="25" HorizontalAlignment="Center" VerticalAlignment="Top" Text="{Binding Path=Data.Text, Mode=TwoWay}" /> <Image Source="/iCore.UI.RuleConfigurator;component/Assets/Note.PNG" Visibility="{Binding Path=Data.HasAdditionalInfo, Mode=TwoWay, Converter={StaticResource AddInfoValueConvertor}}" /> </StackPanel> <ScrollViewer Grid.Row="1" MaxWidth="300" MaxHeight="150" HorizontalAlignment="Left" VerticalAlignment="Bottom" DataContext="{Binding}" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto"> <StackPanel DataContext="{Binding}" Orientation="Vertical"> <toolkit:DataGridDragDropTarget x:Name="DataGridCGdgDropTarget" AllowDrop="True" DataContext="{Binding}" Drop="CommandCG_Drop" ItemDragStarting="CommandCG_ItemDragStarting" Visibility="{Binding Path=Data, Mode=TwoWay, Converter={StaticResource EditSplitVisibilityConvertor}}"> <sdk:DataGrid Name="DgCGItems" HorizontalAlignment="Stretch" VerticalAlignment="Top" AllowDrop="True" AreRowDetailsFrozen="True" AutoGenerateColumns="True" AutoGeneratingColumn="DgCGItems_AutoGeneratingColumn" BorderBrush="SkyBlue" FontSize="10" HorizontalContentAlignment="Stretch" ItemsSource="{Binding Path=Data.Items}" SelectionMode="Extended"> <sdk:DataGrid.Columns> <sdk:DataGridTemplateColumn Header="Selected"> <sdk:DataGridTemplateColumn.CellTemplate> <DataTemplate> <CheckBox IsChecked="{Binding IsSelected, Mode=TwoWay}" /> </DataTemplate> </sdk:DataGridTemplateColumn.CellTemplate> </sdk:DataGridTemplateColumn> </sdk:DataGrid.Columns> </sdk:DataGrid> </toolkit:DataGridDragDropTarget> </StackPanel> </ScrollViewer> </Grid> </go:NodePanel> </go:SpotPanel> </DataTemplate> ***********************
<DataTemplate x:Key="Item">
<go:SpotPanel Background="{x:Null}" DataContext="{Binding}" go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}" MouseEnter="Node_MouseEnter" MouseLeave="Node_MouseLeave" MouseLeftButtonUp="SpotPanel_MouseLeftButtonUp" MouseRightButtonUp="SpotPanel_MouseRightButtonUp" Style="{StaticResource SpotPanelStyle}"> <go:NodePanel go:SpotPanel.Main="True" Sizing="Auto"> <Path x:Name="Shape" go:NodePanel.Figure="{Binding Path=Data.Figure}" Stroke="{Binding Path=Data.Highlight, Converter={StaticResource theStrokeColorConverter}}" StrokeThickness="{Binding Path=Data.Highlight, Converter={StaticResource theStrokeThicknessConverter}}" Style="{StaticResource NodeShapeStyleAll}" /> <Grid DataContext="{Binding}"> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <Image Margin="0,5,0,0" Source="/iCore.UI.RuleConfigurator;component/Assets/Note.PNG" Visibility="{Binding Path=Data.HasAdditionalInfo, Mode=TwoWay, Converter={StaticResource AddInfoValueConvertor}}" /> <ScrollViewer Grid.Row="1" MaxWidth="300" MaxHeight="150" HorizontalAlignment="Left" VerticalAlignment="Bottom" DataContext="{Binding}" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto"> <StackPanel DataContext="{Binding}" Orientation="Vertical"> <toolkit:DataGridDragDropTarget x:Name="DataGridCGdgDropTarget" AllowDrop="True" DataContext="{Binding}" Drop="CommandCG_Drop" ItemDragStarting="CommandCG_ItemDragStarting" Visibility="{Binding Path=Data, Mode=TwoWay, Converter={StaticResource EditSplitVisibilityConvertor}}"> <sdk:DataGrid Name="DgCGItems" HorizontalAlignment="Stretch" VerticalAlignment="Top" AllowDrop="True" AreRowDetailsFrozen="True" AutoGenerateColumns="True" AutoGeneratingColumn="DgCGItems_AutoGeneratingColumn" BorderBrush="SkyBlue" FontSize="10" HorizontalContentAlignment="Stretch" ItemsSource="{Binding Path=Data.Items}" SelectionMode="Extended"> <sdk:DataGrid.Columns> <sdk:DataGridTemplateColumn Header="Selected"> <sdk:DataGridTemplateColumn.CellTemplate> <DataTemplate> <CheckBox IsChecked="{Binding IsSelected, Mode=TwoWay}" /> </DataTemplate> </sdk:DataGridTemplateColumn.CellTemplate> </sdk:DataGridTemplateColumn> </sdk:DataGrid.Columns> </sdk:DataGrid> </toolkit:DataGridDragDropTarget> </StackPanel> </ScrollViewer> </Grid> </go:NodePanel> </go:SpotPanel> </DataTemplate>
5

If you are using a specific Diagram.Layout, you can set its Conditions or ConditionsFlags to include the NodeSizeChanged flag:

WPF: Conditions=“Standard NodeSizeChanged”
Silverlight: ConditionFlags=“Standard NodeSizeChanged”