WPF TsNodeをnugetに公開しました

TsNodeとは

TsNodeとはWPFから扱えるグラフエディター（ノードエディター）風のアプリが作れるカスタムコントールライブラリです。 今回、より簡単にいろんな人が使えるようにTsNodeをnugetに公開しました。 まずは、画面表示するまでのチュートリアルをやります。

チュートリアル(visual studio & nuget)

1.新しいWPFプロジェクト(csproj)の作成

2.nuget のPackageManagerから TsNodeをインストール

3.App.xamlのをApplication.Resourcesを編集

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <!--NetworkViewのテンプレートをインポート-->
                <ResourceDictionary Source="pack://application:,,,/TsNode;component/Template.xaml" />                
                <!--サンプルをインポート-->
                <ResourceDictionary Source="pack://application:,,,/TsNode;component/Preset/Presettemplate.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

4.MainWindow.xamlに参照を追加

xmlns:controls="clr-namespace:TsNode.Controls;assembly=TsNode"

5.MainWindow.xamlのGridに下記を追加

    <Grid>
        <controls:NetworkView
            Background="LightGray"
            Connections="{Binding Connections}"
            Nodes="{Binding Nodes}"/>
    </Grid>

6.MainWindowDataContextクラスの作成

    public class MainWindowDataContext
    {
        public ObservableCollection<INodeDataContext> Nodes { get; set; }
        public ObservableCollection<IConnectionDataContext> Connections { get; set; }

        public MainWindowDataContext()
        {
            Nodes = new ObservableCollection<INodeDataContext>();
            Connections = new ObservableCollection<IConnectionDataContext>();

            var node1 = new PresetNodeViewModel()
            {
                OutputPlugs = new ObservableCollection<IPlugDataContext>
                {
                    new PresentPlugViewModel(),
                }
            };
            
            var node2 = new PresetNodeViewModel()
            {
                X = 150,
                InputPlugs = new ObservableCollection<IPlugDataContext>
                {
                    new PresentPlugViewModel(),
                },
            };

            Nodes.Add(node1);
            Nodes.Add(node2);

            var connection = new PresetConnectionViewModel()
            {
                SourcePlug = node1.OutputPlugs[0],
                DestPlug = node2.InputPlugs[0],
            };

            Connections.Add(connection);
        }
    }

7.MainWindow.xaml.csのコンストラクタを編集

        public MainWindow()
        {
            DataContext = new MainWindowDataContext();
            InitializeComponent();
        }

8.実行すると下記の画面が表示されます。

※完成プロジェクトはこちらから取得できます。 .NET Core用 .NET Framework用