How to custom style for ConnectorViewModel

[quanghoan]

Hi Team.

I am trying to implement custom ConnectorViewModel to decoration it with dual colors as attachments. Could you guide me how to achieve this

Attachment: Custom_Connector_1238b8fc.zip

[Deepa Thiruppathy]

Hi quanghoan

Requirement: How to apply dual colors to connector’s line

The SfDiagram connector, a line geometry, doesn't currently support dual stroke colors.  Could you provide the specific reason for needing dual colors on the connector's line? Based on that we will check the possibilities to create dual-colored connectors.

Regards,

Deepa Thiruppathy

[quanghoan]

Hi Deepa Thiruppathy,

Thank you for your response. I'm using SfDiagram to develop an application that simulates the structure and operational principles of electrical circuits. This educational tool aims to assist students in enhancing their skills related to understanding the structure of electrical devices. I attempted to use a linear stroke color for the connector's line to mimic actual electric wires, but unfortunately, it didn't work as intended. The connector lines need to accurately represent the appearance of real electrical wires.

Regards

[Deepa Thiruppathy]

Hi quanghoan,

Sorry for the inconvenience. We could not find any possibilities to achieve your requirement of Creating dual-colored connectors. But we can apply the dual colors to the straight-line connector using Linear gradient brush colors.

Code snippet:

<Style TargetType="Path" x:Key="ConnectorLine">

    <Setter Property="StrokeThickness" Value="10"/>

    <Setter Property="Stroke">

        <Setter.Value>

            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">

                <GradientStop Color="Red" Offset="0" />

                <GradientStop Color="Blue" Offset="0.75" />

            </LinearGradientBrush>

        </Setter.Value>

    </Setter>

</Style>