Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding custom style to edge in Graphsharp

I'm using the GraphSharp framework which has very little documentation (http://graphsharp.codeplex.com/), and I'm trying to change the colors for certain edges.

Effectively something like this (to make this edge red).

g.AddEdge(new Edge<object>("A","B"), Color.Red);

Does anyone have any code snippets for this?

like image 608
Sam Avatar asked Oct 17 '12 13:10

Sam


1 Answers

here is the solution. You should create a custom edge type, and store the color information in the edge object itself, or be able to create a converter that can calculate the color from the edge object.

Also, you should customize the EdgeControl with some Style.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using GraphSharp;
using QuickGraph;
using GraphSharp.Controls;

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public IBidirectionalGraph<object, IEdge<object>> Graph { get; set; }

        public MainWindow()
        {
            var g = new BidirectionalGraph<object, IEdge<object>>();

            IList<Object> vertices = new List<Object>();
            for (int i = 0; i < 6; i++)
            {
                vertices.Add(i.ToString() );
            }

            for (int i = 0; i < 5; i++)
            {
                Color edgeColor = (i % 2 == 0) ? Colors.Black : Colors.Red;
                Console.WriteLine(edgeColor);

                g.AddVerticesAndEdge(new MyEdge(vertices[i], vertices[i+1]) { 
                    Id = i.ToString(),
                    EdgeColor = edgeColor
                });
            }

            Graph = g;

            Console.WriteLine(Graph.VertexCount);
            Console.WriteLine(Graph.EdgeCount);

            InitializeComponent();
        }
    }

    public class MyEdge : TypedEdge<Object>
    {
        public String Id { get; set; }

        public Color EdgeColor { get; set; }

        public MyEdge(Object source, Object target) : base(source, target, EdgeTypes.General) { }
    }

    public class EdgeColorConverter : IValueConverter
    {

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return new SolidColorBrush((Color) value);
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

XAML:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:graphsharp="clr-namespace:GraphSharp.Controls;assembly=GraphSharp.Controls"
        xmlns:my="clr-namespace:WpfApplication1"
        Title="MainWindow" Height="350" Width="525"
        Name="root">
    <Grid>
        <Grid.Resources>
            <my:EdgeColorConverter x:Key="edgeToEdgeColorConverter"/>
            <Style TargetType="{x:Type graphsharp:EdgeControl}">
                <Style.Setters>
                    <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Self},Path=Edge.EdgeColor,Converter={StaticResource edgeToEdgeColorConverter}}"/>
                </Style.Setters>
            </Style>
        </Grid.Resources>

        <graphsharp:GraphLayout x:Name="graphLayout" 
                                Graph="{Binding ElementName=root,Path=Graph}" 
                                OverlapRemovalAlgorithmType="FSA"
                                HighlightAlgorithmType="Simple"
                                LayoutAlgorithmType="FR"/>
    </Grid>
</Window>
like image 118
Palesz Avatar answered Nov 03 '22 05:11

Palesz