Mathema.Graph.MAUI.Visualization 1.1.9

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:

var graph = new Graph();
var a = new DataNode() { DataItem = new YourObject() };
var b = new DataNode() { DataItem = new YourObject() };
graph.AddNode(a);
graph.AddNode(b);
// add more nodes

var c = new DataEdge(a, b) { DataItem = new YourObject() };
graph.AddEdge(c);
// 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:

1. Install latest version of https://www.nuget.org/packages/Mathema.Graph.MAUI.Visualization/
2. Install and add latest version of https://www.nuget.org/packages/SkiaSharp/

C#:

using SkiaSharp.Views.Maui.Controls.Hosting;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder.UseMauiApp<App>().UseSkiaSharp();
	return builder.Build();
    }
}

3. Add your graph to your viewmodel

// Add using statement
using Mathema.Graph.MAUI.Visualization.Models;

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() };
        graph.AddNode(a);
        graph.AddNode(b);
	// add more nodes

	var c = new DataEdge(a, b) { DataItem = new YourObject() });
        graph.AddEdge(c);
	// add more edges...

        // set property
	GraphData = graph;
    }

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

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

4. Add your customizable control in xaml

XAML:

controls:ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:graph="clr-namespace:Mathema.Graph.MAUI.Visualization.Controls;assembly=Mathema.Graph.MAUI.Visualization"
             x:Class="YourPage">
    <graph: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">
    </graph:VisualizationControlView>
</controls:ContentPage>

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.

Project status

If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers.