### Minimal NodifyEditor Setup in XAML

Source: https://context7.com/maklith/nodifym.avalonia/llms.txt

This XAML demonstrates the basic setup for NodifyEditor, binding essential collections and commands. It includes templates for grid lines, connections, pending connections, and nodes.

```xml
<controls:NodifyEditor
    x:Name="Editor"
    ItemsSource="{Binding Nodes}"
    Connections="{Binding Connections}"
    PendingConnection="{Binding PendingConnection}"
    SelectedItems="{Binding SelectedNodes}"
    Zoom="{Binding CurrentZoom, Mode=TwoWay}"
    DisconnectConnectorCommand="{Binding DisconnectConnectorCommand}"
    ConnectionCompletedCommand="{Binding ConnectionCompletedCommand}">

    <!-- Grid background -->
    <controls:NodifyEditor.GridLineTemplate>
        <DataTemplate>
            <controls:LargeGridLine
                Width="{Binding $parent[controls:NodifyEditor].Bounds.Width}"
                Height="{Binding $parent[controls:NodifyEditor].Bounds.Height}"
                OffsetX="{Binding $parent[controls:NodifyEditor].OffsetX}"
                OffsetY="{Binding $parent[controls:NodifyEditor].OffsetY}"
                Zoom="{Binding $parent[controls:NodifyEditor].Zoom}"
                Spacing="30"
                Thickness="0.5"
                Brush="Gray"
                ZIndex="-2" />
        </DataTemplate>
    </controls:NodifyEditor.GridLineTemplate>

    <!-- Wire template -->
    <controls:NodifyEditor.ConnectionTemplate>
        <DataTemplate DataType="{x:Type vm:ConnectionViewModelBase}">
            <controls:Connection
                Source="{Binding Source.Anchor}"
                Target="{Binding Target.Anchor}"
                Text="{Binding Text}"
                TextPoint="50%,50%"
                SplitCommand="{Binding SplitConnectionCommand}"
                DisconnectCommand="{Binding DisconnectConnectionCommand}" />
        </DataTemplate>
    </controls:NodifyEditor.ConnectionTemplate>

    <!-- Pending wire template -->
    <controls:NodifyEditor.PendingConnectionTemplate>
        <DataTemplate DataType="{x:Type vm:PendingConnectionViewModelBase}">
            <controls:PendingConnection
                StartedCommand="{Binding StartCommand}"
                CompletedCommand="{Binding FinishCommand}"
                EnablePreview="True"
                EnableSnapping="True"
                PreviewTarget="{Binding PreviewTarget, Mode=OneWayToSource}">
                <TextBlock Text="{Binding PreviewText}" />
            </controls:PendingConnection>
        </DataTemplate>
    </controls:NodifyEditor.PendingConnectionTemplate>

    <!-- Node template -->
    <controls:NodifyEditor.ItemTemplate>
        <DataTemplate DataType="{x:Type vm:NodeViewModelBase}">
            <controls:Node
                Location="{Binding Location, Mode=TwoWay}"
                Input="{Binding Input}"
                Output="{Binding Output}">
                <controls:Node.Header>
                    <TextBlock Text="{Binding Title}" />
                </controls:Node.Header>
            </controls:Node>
        </DataTemplate>
    </controls:NodifyEditor.ItemTemplate>
</controls:NodifyEditor>
```

--------------------------------

### NodifyEditor XAML Setup

Source: https://context7.com/maklith/nodifym.avalonia/llms.txt

This snippet shows a minimal XAML setup for the NodifyEditor, demonstrating how to bind essential properties like ItemsSource, Connections, and Zoom, and how to define templates for grid lines, connections, pending connections, and nodes.

```APIDOC
## NodifyEditor XAML Setup

### Description
This is a minimal XAML setup for the `NodifyEditor` control. It demonstrates binding to node and connection collections, handling pending connections, and configuring visual elements like grid lines, connections, pending connections, and nodes through `DataTemplate` definitions.

### XAML
```xml
<controls:NodifyEditor
    x:Name="Editor"
    ItemsSource="{Binding Nodes}"
    Connections="{Binding Connections}"
    PendingConnection="{Binding PendingConnection}"
    SelectedItems="{Binding SelectedNodes}"
    Zoom="{Binding CurrentZoom, Mode=TwoWay}"
    DisconnectConnectorCommand="{Binding DisconnectConnectorCommand}"
    ConnectionCompletedCommand="{Binding ConnectionCompletedCommand}">

    <!-- Grid background -->
    <controls:NodifyEditor.GridLineTemplate>
        <DataTemplate>
            <controls:LargeGridLine
                Width="{Binding $parent[controls:NodifyEditor].Bounds.Width}"
                Height="{Binding $parent[controls:NodifyEditor].Bounds.Height}"
                OffsetX="{Binding $parent[controls:NodifyEditor].OffsetX}"
                OffsetY="{Binding $parent[controls:NodifyEditor].OffsetY}"
                Zoom="{Binding $parent[controls:NodifyEditor].Zoom}"
                Spacing="30"
                Thickness="0.5"
                Brush="Gray"
                ZIndex="-2" />
        </DataTemplate>
    </controls:NodifyEditor.GridLineTemplate>

    <!-- Wire template -->
    <controls:NodifyEditor.ConnectionTemplate>
        <DataTemplate DataType="{x:Type vm:ConnectionViewModelBase}">
            <controls:Connection
                Source="{Binding Source.Anchor}"
                Target="{Binding Target.Anchor}"
                Text="{Binding Text}"
                TextPoint="50%,50%"
                SplitCommand="{Binding SplitConnectionCommand}"
                DisconnectCommand="{Binding DisconnectConnectionCommand}" />
        </DataTemplate>
    </controls:NodifyEditor.ConnectionTemplate>

    <!-- Pending wire template -->
    <controls:NodifyEditor.PendingConnectionTemplate>
        <DataTemplate DataType="{x:Type vm:PendingConnectionViewModelBase}">
            <controls:PendingConnection
                StartedCommand="{Binding StartCommand}"
                CompletedCommand="{Binding FinishCommand}"
                EnablePreview="True"
                EnableSnapping="True"
                PreviewTarget="{Binding PreviewTarget, Mode=OneWayToSource}">
                <TextBlock Text="{Binding PreviewText}" />
            </controls:PendingConnection>
        </DataTemplate>
    </controls:NodifyEditor.PendingConnectionTemplate>

    <!-- Node template -->
    <controls:NodifyEditor.ItemTemplate>
        <DataTemplate DataType="{x:Type vm:NodeViewModelBase}">
            <controls:Node
                Location="{Binding Location, Mode=TwoWay}"
                Input="{Binding Input}"
                Output="{Binding Output}">
                <controls:Node.Header>
                    <TextBlock Text="{Binding Title}" />
                </controls:Node.Header>
            </controls:Node>
        </DataTemplate>
    </controls:NodifyEditor.ItemTemplate>
</controls:NodifyEditor>
```
```

--------------------------------

### Full Node Usage with Customization

Source: https://context7.com/maklith/nodifym.avalonia/llms.txt

Example of a Node control with a custom header, input/output connectors, and resize enabled. This demonstrates how to bind properties like Location, Input, and Output, and how to define custom templates for connectors.

```xml
<!-- Full Node usage with header, input/output connectors, and resize -->
<controls:Node
    Location="{Binding Location, Mode=TwoWay}"
    Input="{Binding Input}"
    Output="{Binding Output}"
    IsResize="True"
    HeaderBrush="#222">

    <!-- Custom header with two columns -->
    <controls:Node.Header>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="0" Text="{Binding Title}" FontWeight="Bold" />
            <TextBlock Grid.Column="1" Text="{Binding NodeType}" Opacity="0.6" />
        </Grid>
    </controls:Node.Header>

    <!-- Input connector template -->
    <controls:Node.InputConnectorTemplate>
        <DataTemplate DataType="{x:Type vm:ConnectorViewModelBase}">
            <controls:NodeInput
                IsConnected="{Binding IsConnected}"
                Anchor="{Binding Anchor, Mode=OneWayToSource}">
                <controls:NodeInput.Header>
                    <TextBlock Text="{Binding Title}" />
                </controls:NodeInput.Header>
            </controls:NodeInput>
        </DataTemplate>
    </controls:Node.InputConnectorTemplate>

    <!-- Output connector template -->
    <controls:Node.OutputConnectorTemplate>
        <DataTemplate DataType="{x:Type vm:ConnectorViewModelBase}">
            <controls:NodeOutput
                IsConnected="{Binding IsConnected}"
                Anchor="{Binding Anchor, Mode=OneWayToSource}">
                <controls:NodeOutput.Header>
                    <TextBlock Text="{Binding Title}" />
                </controls:NodeOutput.Header>
            </controls:NodeOutput>
        </DataTemplate>
    </controls:Node.OutputConnectorTemplate>
</controls:Node>
```

--------------------------------

### ConnectorViewModelBase Properties and Static Flags

Source: https://context7.com/maklith/nodifym.avalonia/llms.txt

Provides an example of a custom ConnectorViewModelBase implementation and demonstrates setting static flags on the Connector type to enable specific behaviors like sticky connections and cancellation.

```csharp
// Connector properties on ConnectorViewModelBase
public partial class MyConnectorVm : ConnectorViewModelBase
{
    // Anchor is updated automatically by the Connector control
    // IsConnected controls visual state and whether Disconnect fires
    // Flow drives the connection direction converter
}

// Static flags on the Connector type
Connector.EnableStickyConnections = true;   // two-click connect mode
Connector.AllowPendingConnectionCancellation = true; // right-click cancels drag
```

--------------------------------

### PendingConnectionViewModelBase Implementation

Source: https://context7.com/maklith/nodifym.avalonia/llms.txt

The ViewModelBase for PendingConnection handles the logic for starting and finishing connection drags. It requires an IEditor instance to perform connection operations.

```csharp
// Corresponding view model (provided by PendingConnectionViewModelBase)
public partial class PendingConnectionViewModelBase : ObservableObject
{
    [ObservableProperty] private ConnectorViewModelBase? _source;
    [ObservableProperty] private object? _previewTarget;   // bound OneWayToSource
    [ObservableProperty] private string? _previewText;

    [RelayCommand] public void Start(ConnectorViewModelBase item) => Source = item;

    [RelayCommand] public void Finish(ConnectorViewModelBase? target)
    {
        if (target == null || target == Source) return;
        _editor.Connect(Source, target);
    }
}
```

--------------------------------

### Programmatic KnotNode Creation and Connection

Source: https://context7.com/maklith/nodifym.avalonia/llms.txt

Shows how to create a KnotNodeViewModel programmatically, add it to the Nodes collection, and establish connections through its connector. This also illustrates splitting an existing connection.

```csharp
// Creating a KnotNode programmatically and connecting through it
var knot = new KnotNodeViewModel { Location = new Point(200, 150) };
Nodes.Add(knot);
knot.Connector.IsConnected = true;

// Split an existing connection at a point
// (ConnectionViewModelBase.SplitConnectionCommand does this automatically)
Connections.Add(new ConnectionViewModelBase(this, sourceConnector, knot.Connector));
Connections.Add(new ConnectionViewModelBase(this, knot.Connector, targetConnector));
```

--------------------------------

### Programmatic NodeGroup Construction

Source: https://context7.com/maklith/nodifym.avalonia/llms.txt

Illustrates the programmatic creation of a NodeGroupViewModel, setting its initial properties such as Location, Header, Size, and CanResize, and adding it to the Nodes collection.

```csharp
// Programmatic NodeGroup construction
var group = new NodeGroupViewModel   // implement BaseNodeViewModel
{
    Location = new Point(0, 0),
    Header   = "Processing Stage",
    Size     = new Size(400, 300),
    CanResize = true
};
Nodes.Add(group);
```

--------------------------------

### Create ConnectionViewModelBase Instance

Source: https://context7.com/maklith/nodifym.avalonia/llms.txt

Instantiate ConnectionViewModelBase directly to represent a wire between two connectors. This class manages connection data and exposes commands for manipulation.

```csharp
// Direct construction
var conn = new ConnectionViewModelBase(editorVm, sourceConnector, targetConnector, "Data flow");

// Splitting a connection at a point (creates a KnotNode automatically)
// Triggered in XAML via: SplitCommand="{Binding SplitConnectionCommand}"
// Parameter passed by BaseConnection is the Point where the doubleclick occurred

// Removing a connection
// Triggered via: DisconnectCommand="{Binding DisconnectConnectionCommand}"
// or from the editor: RemoveConnectionCommand="{Binding RemoveConnectionCommand}"
```

--------------------------------

### Toggle Theme at Runtime

Source: https://context7.com/maklith/nodifym.avalonia/llms.txt

Switches the application's theme between dark and light variants programmatically. Ensure `Application.Current` is not null.

```csharp
// Toggle theme at runtime
private void ToggleTheme()
{
    Application.Current!.RequestedThemeVariant =
        Application.Current.ActualThemeVariant == ThemeVariant.Dark
            ? ThemeVariant.Light
            : ThemeVariant.Dark;
}
```

--------------------------------

### Applying Dark Theme in App.axaml

Source: https://context7.com/maklith/nodifym.avalonia/llms.txt

Applies the built-in dark theme for NodifyM. Avalonia styles are automatically loaded via compiled bindings.

```xml
<!-- App.axaml: include NodifyM styles -->
<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="MyApp.App"
             RequestedThemeVariant="Dark">
    <Application.Styles>
        <FluentTheme />
        <!-- NodifyM styles are automatically loaded via compiled bindings -->
    </Application.Styles>
</Application>
```

--------------------------------

### Create ConnectorViewModelBase Instances

Source: https://context7.com/maklith/nodifym.avalonia/llms.txt

Define ConnectorViewModelBase objects to represent input and output pins on nodes. The 'Anchor' property is automatically managed by the Connector control.

```csharp
var outputPin = new ConnectorViewModelBase
{
    Title       = "Result",
    Flow        = ConnectorViewModelBase.ConnectorFlow.Output,
    IsConnected = false,
    // Anchor is set automatically by the Connector control
};

var inputPin = new ConnectorViewModelBase
{
    Title = "Value",
    Flow  = ConnectorViewModelBase.ConnectorFlow.Input
};
```

--------------------------------

### Smooth Bézier Connection with Label

Source: https://context7.com/maklith/nodifym.avalonia/llms.txt

Use Connection to draw a smooth cubic Bézier curve between two anchors. Supports labels, arrowheads, and commands for splitting or disconnecting.

```xml
<controls:Connection
    Source="{Binding Source.Anchor}"
    Target="{Binding Target.Anchor}"
    Text="{Binding Label}"
    TextPoint="50%,50%"
    TextBrush="White"
    Direction="{Binding ., Converter={StaticResource FlowToDirectionConverter}}"
    ArrowEnds="End"
    ArrowShape="Arrowhead"
    Spacing="10"
    SplitCommand="{Binding SplitConnectionCommand}"
    DisconnectCommand="{Binding DisconnectConnectionCommand}">
    <controls:Connection.Stroke>
        <SolidColorBrush Color="#FF4455" Opacity="0.8" />
    </controls:Connection.Stroke>
</controls:Connection>
```

--------------------------------

### Subscribe to BaseNode Events

Source: https://context7.com/maklith/nodifym.avalonia/llms.txt

Demonstrates how to subscribe to LocationChanged and IsSelectChanged events on a BaseNode instance. Programmatically setting the Location property will trigger the LocationChanged event.

```csharp
// Subscribing to location changes on a BaseNode instance
baseNode.LocationChanged += (sender, e) =>
{
    // e.Location contains the new Point
    Console.WriteLine($"Node moved to {e.Location}");
};

baseNode.IsSelectChanged += (sender, e) =>
{
    Console.WriteLine($"Node selected: {e.IsSelected}");
};

// Setting location programmatically triggers the LocationChanged event
baseNode.Location = new Point(200, 150);
```

--------------------------------

### NodeInput with Label

Source: https://context7.com/maklith/nodifym.avalonia/llms.txt

Use NodeInput to define an input point for a node, optionally including a header with a label and icon.

```xml
<!-- NodeInput with label -->
<controls:NodeInput
    IsConnected="{Binding IsConnected}"
    Anchor="{Binding Anchor, Mode=OneWayToSource}">
    <controls:NodeInput.Header>
        <StackPanel Orientation="Horizontal" Spacing="4">
            <PathIcon Data="..." Width="12" Height="12" />
            <TextBlock Text="{Binding Title}" />
        </StackPanel>
    </controls:NodeInput.Header>
</controls:NodeInput>
```

--------------------------------

### Configure PendingConnection in XAML

Source: https://context7.com/maklith/nodifym.avalonia/llms.txt

Use PendingConnection to display a visual indicator while dragging a connection. Configure its appearance and behavior through XAML properties.

```xml
<controls:PendingConnection
    StartedCommand="{Binding StartCommand}"
    CompletedCommand="{Binding FinishCommand}"
    EnablePreview="True"
    EnableSnapping="True"
    AllowOnlyConnectors="True"
    Direction="Forward"
    PreviewTarget="{Binding PreviewTarget, Mode=OneWayToSource}">
    <controls:PendingConnection.Stroke>
        <SolidColorBrush Color="Orange" Opacity="0.9" />
    </controls:PendingConnection.Stroke>
    <TextBlock Text="{Binding PreviewText}" />
</controls:PendingConnection>
```

--------------------------------

### Custom GraphViewModel Implementation

Source: https://context7.com/maklith/nodifym.avalonia/llms.txt

Subclass NodifyEditorViewModelBase to create a custom graph view model. Override the Connect method for custom validation logic, such as preventing self-connections. The DisconnectConnector method can also be overridden for custom actions.

```csharp
using NodifyM.Avalonia.ViewModelBase;
using System.Collections.ObjectModel;
using Avalonia;

public partial class GraphViewModel : NodifyEditorViewModelBase
{
    public GraphViewModel()
    {
        // Create connectors
        var outA = new ConnectorViewModelBase { Title = "Out", Flow = ConnectorViewModelBase.ConnectorFlow.Output };
        var inB  = new ConnectorViewModelBase { Title = "In",  Flow = ConnectorViewModelBase.ConnectorFlow.Input  };

        // Create nodes
        Nodes.Add(new NodeViewModelBase
        {
            Title    = "Node A",
            Location = new Point(50, 100),
            Output   = new ObservableCollection<object> { outA }
        });
        Nodes.Add(new NodeViewModelBase
        {
            Title    = "Node B",
            Location = new Point(300, 100),
            Input    = new ObservableCollection<object> { inB }
        });

        // Pre-connect
        Connect(outA, inB);
    }

    public override void Connect(ConnectorViewModelBase source, ConnectorViewModelBase target)
    {
        // Custom guard: no self-connections
        if (source == target) return;
        base.Connect(source, target);
    }

    public override void DisconnectConnector(ConnectorViewModelBase connector)
    {
        base.DisconnectConnector(connector);
        Console.WriteLine($"Disconnected: {connector.Title}");
    }
}
```

--------------------------------

### NodeOutput with Custom Label Layout

Source: https://context7.com/maklith/nodifym.avalonia/llms.txt

NodeOutput defines an output point for a node. Customize the header's layout and alignment for the label.

```xml
<!-- NodeOutput with custom label layout -->
<controls:NodeOutput
    IsConnected="{Binding IsConnected}"
    Anchor="{Binding Anchor, Mode=OneWayToSource}">
    <controls:NodeOutput.Header>
        <TextBlock Text="{Binding Title}" HorizontalAlignment="Right" />
    </controls:NodeOutput.Header>
</controls:NodeOutput>
```

--------------------------------

### LargeGridLine Control

Source: https://context7.com/maklith/nodifym.avalonia/llms.txt

Renders an infinite-feeling grid with evenly-spaced lines that track editor pan and zoom. Used for visual reference in node placement.

```xml
<controls:LargeGridLine
    Width="{Binding $parent[controls:NodifyEditor].Bounds.Width}"
    Height="{Binding $parent[controls:NodifyEditor].Bounds.Height}"
    OffsetX="{Binding $parent[controls:NodifyEditor].OffsetX}"
    OffsetY="{Binding $parent[controls:NodifyEditor].OffsetY}"
    Zoom="{Binding $parent[controls:NodifyEditor].Zoom}"
    Spacing="30"
    Thickness="0.5"
    Brush="#33FFFFFF"
    ZIndex="-2" />
```

--------------------------------

### NodeTemplateSelector for Custom Node Rendering

Source: https://context7.com/maklith/nodifym.avalonia/llms.txt

A custom IDataTemplate selector for NodifyEditor.ItemTemplate that dispatches to the first DataTemplate whose DataType matches the item type.

```xml
<controls:NodifyEditor.ItemTemplate>
    <controls:NodeTemplateSelector>
        <DataTemplate DataType="{x:Type vm:NodeViewModelBase}">
            <controls:Node Location="{Binding Location, Mode=TwoWay}"
                           Input="{Binding Input}" Output="{Binding Output}" />
        </DataTemplate>
        <DataTemplate DataType="{x:Type vm:KnotNodeViewModel}">
            <controls:KnotNode Location="{Binding Location, Mode=TwoWay}"
                               Content="{Binding Connector}" />
        </DataTemplate>
        <DataTemplate DataType="{x:Type controls:NodeGroup}">
            <controls:NodeGroup Header="{Binding Header}" Size="{Binding Size}" />
        </DataTemplate>
    </controls:NodeTemplateSelector>
</controls:NodifyEditor.ItemTemplate>
```

--------------------------------

### FlowToDirectionConverter for Connection Direction

Source: https://context7.com/maklith/nodifym.avalonia/llms.txt

Maps a connector to a ConnectionDirection enum for automatic arrow direction. Connections from output connectors point 'Forward', and from input connectors point 'Backward'.

```xml
<controls:NodifyEditor.Resources>
    <converters:FlowToDirectionConverter x:Key="FlowToDirectionConverter" />
</controls:NodifyEditor.Resources>

<!-- Usage on a Connection -->
<controls:Connection
    Direction="{Binding ., Converter={StaticResource FlowToDirectionConverter}}" ... />

<!-- Usage on a PendingConnection -->
<controls:PendingConnection
    Direction="{Binding Source.Flow, Converter={StaticResource FlowToDirectionConverter}}" ... />
```

--------------------------------

### Standalone Connector XAML

Source: https://context7.com/maklith/nodifym.avalonia/llms.txt

Shows a XAML definition for a standalone Connector, typically used within other controls like KnotNode. It binds IsConnected and Anchor properties, and specifies a DisconnectCommand.

```xml
<!-- Standalone Connector (e.g. inside a KnotNode) -->
<controls:Connector
    IsConnected="{Binding IsConnected}"
    Anchor="{Binding Anchor, Mode=OneWayToSource}"
    DisconnectCommand="{Binding DisconnectCommand}" />
```

--------------------------------

### Integrate NodifyEditorMinimap in XAML

Source: https://context7.com/maklith/nodifym.avalonia/llms.txt

Embed NodifyEditorMinimap within a Border control to provide a scaled overview of the graph. Link it to the main editor instance using the 'Editor' property.

```xml
<!-- Minimap panel placed over the editor -->
<Border VerticalAlignment="Bottom" HorizontalAlignment="Right"
        Width="200" Height="150"
        Margin="12" Padding="6"
        CornerRadius="6" BorderThickness="1"
        BorderBrush="#55FFFFFF">
    <controls:NodifyEditorMinimap
        Editor="{Binding #MyEditor}"
        MapBackground="#CC1E1E1E"
        MapBorderBrush="#DCDCDC"
        NodeBrush="#AA96BEFF"
        NodeBorderBrush="#DC628AD2"
        ViewportBrush="#46FFFFFF"
        ViewportBorderBrush="#DCFFFFFF" />
</Border>
```

--------------------------------

### PCB-Style Circuit Connection

Source: https://context7.com/maklith/nodifym.avalonia/llms.txt

CircuitConnection extends LineConnection to create PCB-style connections with a single diagonal bend. The bend angle is configurable.

```xml
<controls:CircuitConnection
    Source="{Binding Source.Anchor}"
    Target="{Binding Target.Anchor}"
    Angle="45"
    Spacing="12"
    Stroke="LimeGreen"
    StrokeThickness="2" />
```

--------------------------------

### Subscribe to NodifyEditor ZoomChanged Event

Source: https://context7.com/maklith/nodifym.avalonia/llms.txt

This event fires when the zoom level of the NodifyEditor changes. It provides details about the new zoom scale and offset.

```csharp
NodifyEditor.ZoomChanged += (sender, args) =>
{
    Console.WriteLine($"ScaleX={args.Zoom} OffsetX={args.OffsetX} OffsetY={args.OffsetY}");
};
```

--------------------------------

### Straight Line Connection

Source: https://context7.com/maklith/nodifym.avalonia/llms.txt

LineConnection draws a straight line between two anchors, suitable for simple connections. Spacing can be applied at the endpoints.

```xml
<controls:LineConnection
    Source="{Binding Source.Anchor}"
    Target="{Binding Target.Anchor}"
    Spacing="8"
    ArrowEnds="End"
    Stroke="CornflowerBlue"
    StrokeThickness="1.5" />
```

--------------------------------

### NodeGroup XAML DataTemplate

Source: https://context7.com/maklith/nodifym.avalonia/llms.txt

Defines a XAML DataTemplate for NodeGroup, binding its properties like Location, Header, HeaderBrush, Size, and CanResize to a view model.

```xml
<DataTemplate DataType="{x:Type controls:NodeGroup}">
    <controls:NodeGroup
        Location="{Binding Location, Mode=TwoWay}"
        Header="{Binding Header}"
        HeaderBrush="#AA4466AA"
        Size="{Binding Size}"
        CanResize="True" />
</DataTemplate>
```

--------------------------------

### KnotNode in ItemTemplate

Source: https://context7.com/maklith/nodifym.avalonia/llms.txt

Defines a DataTemplate for KnotNodeViewModel, specifying how a KnotNode should be rendered in XAML, including its content template for a Connector.

```xml
<!-- KnotNode in ItemTemplate -->
<DataTemplate DataType="{x:Type vm:KnotNodeViewModel}">
    <controls:KnotNode
        Location="{Binding Location, Mode=TwoWay}"
        Content="{Binding Connector}">
        <controls:KnotNode.ContentTemplate>
            <DataTemplate DataType="{x:Type vm:ConnectorViewModelBase}">
                <controls:Connector
                    IsConnected="{Binding IsConnected}"
                    Anchor="{Binding Anchor, Mode=OneWayToSource}" />
            </DataTemplate>
        </controls:KnotNode.ContentTemplate>
    </controls:KnotNode>
</DataTemplate>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.