BoldSign®Effortlessly integrate e-signatures into your app with the BoldSign® API. Create a sandbox account!
Based on the WPF Drawing Tools example for the SfDiagram, I've made a vector drawing application. But I've found myself stuck on how to change the Fill and Stroke color of dynamically added shapes at runtime. I want to use the PropertyGrid to effect the changes.
I've gone a step further to write a class for that to no avail. Please I need your assistance. Thanks.
using Syncfusion.UI.Xaml.Diagram;
using System.Windows;
using System.Windows.Media;
using System.Windows.Shapes;
namespace DesignerX.Demo.ViewModels
{
public class NodeEditor
{
private readonly SfDiagram diagram;
private readonly INode node;
public NodeEditor(SfDiagram diagram, INode node)
{
this.diagram = diagram;
this.node = node;
}
Setter? StrokeSetter => node.ShapeStyle?.Setters.OfType<Setter>().FirstOrDefault(s => s.Property == Shape.StrokeProperty);
Setter? FillSetter => node.ShapeStyle?.Setters.OfType<Setter>().FirstOrDefault(s => s.Property == Shape.FillProperty);
public double X
{
get => node.OffsetX;
set => node.OffsetX = value;
}
public double Y
{
get => node.OffsetY;
set => node.OffsetY = value;
}
public double MaxWidth
{
get => node.MaxWidth;
set => node.MaxWidth = value;
}
public double MinWidth
{
get => node.MinWidth;
set => node.MinWidth = value;
}
public double MaxHeight
{
get => node.MaxHeight;
set => node.MaxHeight = value;
}
public double MinHeight
{
get => node.MinHeight;
set => node.MinHeight = value;
}
public double UnitWidth
{
get => node.UnitWidth;
set => node.UnitWidth = value;
}
public double UnitHeight
{
get => node.UnitHeight;
set => node.UnitHeight = value;
}
public Brush? Stroke
{
get => StrokeSetter?.Value as Brush;
set
{
if (StrokeSetter == null)
{
var style = node.ShapeStyle ?? new Style();
style.Setters.Add(new Setter(Shape.StrokeProperty, value));
node.ShapeStyle = style;
}
else
StrokeSetter.Value = value;
diagram.InvalidateVisual();
}
}
public Brush? Fill
{
get => FillSetter?.Value as Brush;
set
{
if (FillSetter == null)
{
var style = node.ShapeStyle ?? new Style();
style.Setters.Add(new Setter(Shape.FillProperty, value));
node.ShapeStyle = style;
}
else
FillSetter.Value = value;
diagram.InvalidateVisual();
}
}
}
}
Hi Eniefiok,
Requirement: How to change the Fill and Stroke colors of the Node/Connector dynamically at runtime using PropertyGrid.
You can achieve this requirement in our SfDiagram control by creating a custom class for our NodeViewModel and ConnectorViewModel. In the custom class, you should define Fill and Stroke properties that are bound to the corresponding Fill and Stroke properties in the Style of the Node/Connector. Please refer to the KB link below for more information on how to use the PropertyGrid with our SfDiagram control.
KB link: How to use the property grid in the WPF Diagram (SfDiagram)? (syncfusion.com)
We have provided a simple example in the Knowledge Base (KB) that demonstrates how to change the Fill and Stroke colors of nodes created at runtime. Please follow the example and implement a custom class for the Connector based on the required properties.
Regards,
Arun Kumar S
