ComponentOne for WinUI
ノードの外観をカスタマイズする
コントロール > FlexDiagram > 概念 > ノードとエッジ > ノードの外観をカスタマイズする

Nodes represent the primary elements in a diagram. Their appearance can be customized using text, images, layout properties, and styling options.

Title Properties

The following properties customize the node title.

Property

Type

Description

Text

string

Specifies the primary text displayed in the node.

Title

string

Specifies the title content.

TitleAlignment

ContentAlignment

Specifies the alignment of the title within the node.

TitleDirection

Direction

Specifies the layout direction of the title content.

TitleOrder

LabelOrder

Specifies the display order of the title image and text.

TitleImageAlignment

ContentAlignment

Specifies the alignment of the title image.

TitleImageSize

Size

Specifies the size of the title image.

TitleImage

ImageSource

Specifies the image displayed in the node title.

TitleStyle

ChartStyle

Applies visual styling to the title.

Example

XAML
コードのコピー
<c1:Node
    Title="Server"
    TitleAlignment="MiddleCenter"
    TitleDirection="Horizontal"
    TitleOrder="ImageText"/>

Content Properties

The following properties customize the content area inside the node.

Property

Type

Description

Content

string

Specifies the content text displayed in the node.

ContentAlignment

ContentAlignment

Specifies the alignment of the content.

ContentDirection

Direction

Specifies the layout direction of the content.

ContentOrder

LabelOrder

Specifies the display order of the content image and text.

ContentImageAlignment

ContentAlignment

Specifies the alignment of the content image.

ContentImageSize

Size

Specifies the size of the content image.

ContentImage

ImageSource

Specifies the image displayed in the content area.

Example

XAML
コードのコピー
<c1:Node 
    Content="Database Server"
    ContentAlignment="MiddleCenter"/>

Node Identity and Metadata

The following properties define node identification and metadata.

Property

Type

Description

ID

string

Specifies the unique identifier for the node.

LegendItem

string

Specifies the legend text associated with the node.

Tooltip

string

Specifies the tooltip displayed for the node.

Shape and Appearance

The following properties customize node shape and rendering behavior.

Property

Type

Description

Shape

Shape

Specifies the node shape.

Appearance

NodeAppearance

Specifies how the node is rendered.

Styling

The following properties apply visual styling to nodes.

Property

Type

Description

NodeStyle

ChartStyle

Applies visual styling such as fill, stroke, and border thickness.

TitleStyle

ChartStyle

Applies styling to the node title.

Example

XAML
コードのコピー
<c1:Node>
    <c1:Node.NodeStyle>
        <c1:ChartStyle Stroke="Blue"/>
    </c1:Node.NodeStyle>
</c1:Node>