Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Create custom table node question (Read 3982 times)
Bekzod
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 3
Joined: Mar 4th, 2015
Create custom table node question
Mar 5th, 2015 at 2:44am
Print Post  
Hi, I created custom table node from inherited TableNode. I have some issue with scrolling and row anchor points. Please help me.
  

tablenode.png ( 5 KB | 69 Downloads )
tablenode.png
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Create custom table node question
Reply #1 - Mar 5th, 2015 at 8:36am
Print Post  
Hi,

Your table looks very nice in that image. What's the issue with scrolling exactly?

Stoyan
  
Back to top
 
IP Logged
 
Bekzod
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 3
Joined: Mar 4th, 2015
Re: Create custom table node question
Reply #2 - Mar 5th, 2015 at 9:48am
Print Post  
Thank you. I don't know it is possible or not, but I am trying to create like this TableNode. I used ScrollViewer for scrolling rows. How to manage AnchorPatterns for this model? Code sample here:

Model:

public class TableNodeModel :TableNode
{
private SourceTable _table;

public SourceTable SourceTable
{
get { return _table;}
set
{
_table=value;
if(_table!=null)
{
AddColumns();
}
}
}

private bool _isExpended;

public bool IsExpended
{
get { return _isExpended; }
set { _isExpended = value; }
}

public TableNodeModel()
{
InitCustomTableNode();
}

private void InitCustomTableNode()
{
AddColumn();
AddColumn();
AddColumn();
RowHeight = 24f;
CaptionHeight = 30f;
EnabledHandles = AdjustmentHandles.Move|AdjustmentHandles.BottomHandles|AdjustmentHandles.RightHa
ndles;
Columns[0].ColumnStyle =
Columns[1].ColumnStyle = ColumnStyle.FixedWidth;
Columns[0].Width =
Columns[1].Width = 30f;
Columns[2].ColumnStyle = ColumnStyle.AutoWidth;
}

private void AddColumns()
{
this.Rows.Clear();
foreach (var column in _table.Columns)
{
var index = AddRow();
var cell = this[2, index];
cell.Text = column.Alias;
cell.Tag = column;
}
}

}

and view here

<DataTemplate x:Key="TableRowTemplate">
<Grid Name="RowGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="24" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Image Name="Image"
Grid.Column="0"
Source="{Binding Path=DataContext, RelativeSource={RelativeSource Self}, Converter={StaticResource columnIconConverter},ConverterParameter=Icon}"
Width="16"
Height="16"
VerticalAlignment="Center"
HorizontalAlignment="Right"
Margin="4" />

<TextBlock Text="{Binding Alias}" Grid.Column="1" Height="15"/>

</Grid>
</DataTemplate>



<ControlTemplate x:Key="TableNodeTemplate" TargetType="ContentControl">
<Border Name="MainBorder" BorderThickness="2" Margin="-2">
<Grid Name="ContainerGrid">
<Grid.RowDefinitions>
<RowDefinition Height="{Binding CaptionHeight}" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle Name="HeaderBackground">
<Rectangle.Style>
<Style TargetType="Rectangle">
<Setter Property="Fill" Value="{StaticResource ActiveTableBrush}"/>
</Style>
</Rectangle.Style>
</Rectangle>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="24" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>

<Image Name="Image"
Grid.Column="0"
Source="{Binding SourceTable, Converter={StaticResource tableIconConverter}}"
Width="16"
Height="16"
VerticalAlignment="Center"
HorizontalAlignment="Right"
Margin="0" />

<TextBlock Grid.Column="1"
Text="{Binding SourceTable.Alias}"
TextAlignment="Left"
VerticalAlignment="Center"
Padding="5,0,0,0"
Foreground="White"/>
</Grid>
<Grid x:Name="RowsGrid" Grid.Row="1">

<ScrollViewer Name="ColumnScroll" CanContentScroll="True" >
<ScrollViewer.Style>
<Style TargetType="ScrollViewer">
<Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
</Style>
</ScrollViewer.Style>
<ItemsControl
ItemsSource="{Binding SourceTable.Columns}"
ItemTemplate="{StaticResource TableRowTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" Margin="0"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="FrameworkElement.Margin" Value="0"/>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
</ScrollViewer>
</Grid>
</Grid>
</Border>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding Path=Selected}" Value="True">
<Setter Property="BorderBrush" Value="{StaticResource SelectedTableBrush}" TargetName="MainBorder"/>
<Setter Property="Fill" Value="{StaticResource SelectedTableBrush}" TargetName="HeaderBackground"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>

  
Back to top
 
IP Logged
 
Meppy
God Member
*****
Offline


MindFusion support

Posts: 1783
Joined: Jul 20th, 2005
Re: Create custom table node question
Reply #3 - Mar 6th, 2015 at 7:56am
Print Post  
Hi,

You need to synchronize the TableNode's structure with your own presentation. That is, when you add table columns to your model, you need to add the same amount of rows to the TableNode. Additionally the size of the table rows must match the size of the items in your items control. This way when the user creates a link to one of the items in your table, MindFusion.Diagramming will properly anchor this link to the respective row in the TableNode's structure. Finally, you need to listen to changes to the ScrollViewer's scroll bar and update the value of the TableNode.CurrentScrollRow property accordingly. This will cause the links to follow their respective rows when the viewer is scrolled up and down.

The following sample illustrates some of these steps:
https://mindfusion.eu/_samples/_sample_CustomTable.zip

Let me know if this helps.

Regards,
Meppy
  
Back to top
 
IP Logged
 
Meppy
God Member
*****
Offline


MindFusion support

Posts: 1783
Joined: Jul 20th, 2005
Re: Create custom table node question
Reply #4 - Mar 6th, 2015 at 12:52pm
Print Post  
Hi,

A sample illustrating an alternative approach can be downloaded from the link below:
https://mindfusion.eu/_samples/_sample_CustomTable2.zip

This sample uses a custom DataTemplate as well. However, instead of completely replacing the presentation with a custom one, this template uses a NodeRenderer object for the standard node appearance and adds a custom header and a scroll bar on top of it.

Regards,
Meppy
  
Back to top
 
IP Logged
 
Bekzod
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 3
Joined: Mar 4th, 2015
Re: Create custom table node question
Reply #5 - Mar 9th, 2015 at 3:31am
Print Post  
Great solution for my issue. Thank you very much.
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint