Mathema.Graph.MAUI.Visualization 1.0.4

Mathema.Graph.MAUI.Visualization Library

Welcome to the Mathema.Graph.MAUI.Visualization library for .NET MAUI! This library provides a powerful and flexible graph visualization control that allows you to display any graph with ease.

Features and Usage Guidelines

Versatile Graph Display

The control supports the visualization of any graph, offering flexibility in the representation of graph elements.

Object-Oriented Graph Elements

Nodes and edges within the graph can hold arbitrary objects, granting users freedom in data representation. Just convert your graph like this:

using Graph.MAUI.Visualization.Models;

var graph = new Graph();
var a = new DataNode() { DataItem = new YourObject() };
var b = new DataNode() { DataItem = new YourObject() };
var c = new DataNode() { DataItem = new YourObject() };
var d = new DataNode() { DataItem = new YourObject() };

graph.Edges.Add(new DataEdge(a, b) { DataItem = new YourObject() });
// Add more edges...

MSAGL Integration:

Microsoft MSAGL is utilized for efficient graph layout calculations, ensuring a visually appealing presentation.

XAML Integration:

Easily insert the control into your XAML layouts, thanks to seamless integration with SkiaSharp.

Customizable Binding Properties:

Layout Settings: Choose from various layout algorithms (e.g., Sigma algorithm or MDS) through the LayoutSetting property. Interactive Elements: Define actions using ICommand for both edge and vertex interactions through OnEdgeClicked and OnVertexClicked. Much more...

Usage Example (with CommunityToolkit.Mvvm):

Here's an example of how to use the control in your XAML:

<control:VisualizationControlView
    BackgroundColor="Transparent"
    HorizontalOptions="FillAndExpand"
    VerticalOptions="FillAndExpand"
    LayoutSetting="SugiyamaScheme"
    Graph="{Binding GraphData}"
    OnEdgeClicked="{Binding EdgeClickedCommand}"
    OnVertexClicked="{Binding NodeClickedCommand}"
    EdgeThickness="2"
    VertexHeight="45.0"
    VertexWidth="80.0"
    VertexShape="Ellipse">
</control:VisualizationControlView>

public partial class GraphsViewModel : BaseViewModel
{
    [ObservableProperty]
    Graph graphData;

    public GraphsViewModel()
    {
        var graph = new Graph();
	var a = new DataNode() { DataItem = new YourObject() };
	var b = new DataNode() { DataItem = new YourObject() };
	var c = new DataNode() { DataItem = new YourObject() };
	var d = new DataNode() { DataItem = new YourObject() };

	graph.Edges.Add(new DataEdge(a, b) { DataItem = new YourObject() });
	// Add more edges...
	GraphData = graph;
    }

    [RelayCommand]
    async Task NodeClicked(Node vm)
    {
	// Handle individual node "clicked" event
    }

    [RelayCommand]
    async Task EdgeClicked(Edge vm)
    {
	// Handle individual edge "clicked" event
    }
}

Feel free to explore the various properties and customize the control to suit your specific graph visualization needs. Thank you for choosing Mathema's GraphVisualizationControl library! If you have any questions or feedback, please don't hesitate to reach out.