A graph layout panel for Avalonia cross-platform UI framework
Each individual graph is displayed through the GraphPanel control included in the assembly
<Window xmlns:agc="clr-namespace:AvaloniaGraphControl;assembly=AvaloniaGraphControl">
<agc:GraphPanel Graph="{Binding MyGraph}" LayoutMethod="SugiyamaScheme" />
</Window>The layout is internally implemented with MSAGL (Microsoft Automatic Graph Layout).
The following layout methods are available in MSAGL and can be set in the GraphPanel control independently of the graph model:
- SugiyamaScheme
- MDS
- Ranking
- IncrementalLayout
The GraphPanel control and the MSAGL assemblies are bundled in a nuget package. The existing MSAGL nuget packages are dedicated to the .NET Framework and do not include any netstandard assembly.
The GraphPanel control leverages the MVVM pattern used by AvaloniaUI. Each node of the graph view can be customized according to the underlying view model in the graph definition.
<Window xmlns:agc="clr-namespace:AvaloniaGraphControl;assembly=AvaloniaGraphControl">
<agc:GraphPanel Graph="{Binding MyGraph}" LayoutMethod="SugiyamaScheme" />
<agc:GraphPanel.DataTemplates>
<DataTemplate DataType="{x:Type local:StandardItem}">
<agc:TextSticker Text="{Binding Name}" Shape="Ellipse" Padding="30,10" />
</DataTemplate>
<DataTemplate DataType="{x:Type local:InteractiveItem}">
<ToggleButton Content="{Binding Name}" Padding="20,5" />
</DataTemplate>
</agc:GraphPanel.DataTemplates>
</agc:GraphPanel>
</Window>As shown in the demo, this graph panel can be used in cross-platform AvaloniaUI applications. It was successfully tested on Linux Desktop, Windows Desktop, Android and Browser (web assembly) environments.
No new feature is planned for this project.
Contributions shall be limited to:
- Bug fixes (add a graph sample that reproduces the issue)
- Avalonia versions upgrades
- .NET versions upgrades
Before submitting any pull request, make sure that all AvaloniaGraphControl samples work as expected on all supported platforms.
This project uses a custom version of MSAGL on purpose.
Additional pre-requisites to move to a standard MSAGL version:
- Fixing this issue on MSAGL to make ordered layout on a subgraph work as expected.
public static Graph MyGraph
{
get
{
var graph = new Graph();
graph.Edges.Add(new Edge("A", "B"));
graph.Edges.Add(new Edge("A", "D"));
graph.Edges.Add(new Edge("A", "E"));
graph.Edges.Add(new Edge("B", "C"));
graph.Edges.Add(new Edge("B", "D"));
graph.Edges.Add(new Edge("D", "A"));
graph.Edges.Add(new Edge("D", "E"));
return graph;
}
}
