Search code examples
c#wpfxamlgraph-sharp

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?


Solution

  • 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>