How to Change the look of GraphSharp Vertices in XAML

Question

I am using GraphSharp in my project where I need to change the look of the vertices. I tried to create a custom vertex class which had only one property named Name. I then created a ViewModel class where I created the vertices and edges. To render this graph I created a DataTemplate for my custom vertex. The code is as follows:-

class MyVertex
{
    public string Name { get; set; }
}

class MainViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged([CallerMemberName]string name = "")
    {
        if (PropertyChanged == null) return;
        PropertyChanged(this, new PropertyChangedEventArgs(name));
    }

    public IBidirectionalGraph<MyVertex, IEdge<MyVertex>> Graph { get; private set; }

    public void CreateGraphToVisualize()
    {
        var g = new BidirectionalGraph<MyVertex, IEdge<MyVertex>>();

        //add the vertices to the graph
        MyVertex[] vertices = new MyVertex[5];
        for (int i = 0; i < 5; i++)
        {
            vertices[i] = new MyVertex { Name = "Vertex " + i.ToString() };
            g.AddVertex(vertices[i]);
        }

        //add some edges to the graph
        g.AddEdge(new Edge<MyVertex>(vertices[0], vertices[1]));
        g.AddEdge(new Edge<MyVertex>(vertices[1], vertices[2]));
        g.AddEdge(new Edge<MyVertex>(vertices[2], vertices[3]));
        g.AddEdge(new Edge<MyVertex>(vertices[3], vertices[1]));
        g.AddEdge(new Edge<MyVertex>(vertices[1], vertices[4]));

        Graph = g;
    }

    public MainViewModel()
    {
        CreateGraphToVisualize();
    }
}

<Window x:Class="GraphSharpBasic.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:graphsharp="clr-namespace:GraphSharp.Controls;assembly=GraphSharp.Controls"
        xmlns:zoom="clr-namespace:WPFExtensions.Controls;assembly=WPFExtensions"
        xmlns:local="clr-namespace:GraphSharpBasic"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <DataTemplate DataType="{x:Type local:MyVertex}">
            <Border BorderBrush="Beige" BorderThickness="2" Background="Gainsboro" MinWidth="50" MinHeight="10">
                <TextBlock Text="{Binding Name}"/>
            </Border>
        </DataTemplate>
    </Window.Resources>
    <Window.DataContext>
        <local:MainViewModel/>
    </Window.DataContext>
    <Grid>
        <zoom:ZoomControl>
            <graphsharp:GraphLayout x:Name="graphLayout"
                           Graph="{Binding Graph}"
                            LayoutAlgorithmType="ISOM"
                            OverlapRemovalAlgorithmType="FSA"
                            HighlightAlgorithmType="Simple"/>
        </zoom:ZoomControl>
    </Grid>
</Window>

But when I run it I just get the zoom control but no graph. So, I guess I am doing something wrong. Then I found this and created a new project and copied the code presented there. I had to use my judgement as to where to place the DataTemplate so I placed it in Window.Resources block just like the above code. I also made some changes to the code to use generic classes as the ones used in the site were apparently not available. But the end result was same as my own code. There was no graph. Am I missing something here? Thanks in advance for help.

Answer 1

The GraphLayout cannot be instantiated without the right combination of types.

Add something like this:

public class MyGraph : BidirectionalGraph<MyVertex, IEdge<MyVertex>>{}

public class MyGraphLayout : GraphLayout<MyVertex, IEdge<MyVertex>,MyGraph> 
    {
    };

then use the defined MyGraphLayout instead.

<local:MyGraphLayout x:Name="graphLayout"
                           Graph="{Binding Graph}"
                            LayoutAlgorithmType="ISOM"
                            OverlapRemovalAlgorithmType="FSA"
                            HighlightAlgorithmType="Simple"/>