[.Net] WPF NodeNetwork 프로젝트 환경 구성 및 Hello World 만들기(예제 포함)

NodeNetwork에 대한 기초 설명은 아래 포스팅을 참고하세요.

[.Net] WPF NodeNetwork 기본 개념과 특징 알아보기

[.Net] WPF NodeNetwork 기본 개념과 특징 알아보기

소개

보통 프로그래밍을 처음 배우면 Hello world부터 시작을 하죠. 이는 맨 처음 어떻게 시작하는지 보여주는 것을 의미합니다. 본 포스팅은 NodeNetwork 라이브러리를 사용해서 어떻게 프로젝트를 구성하고 어떤 동작을 하는지 보여주고자 합니다. 우선 결과물은 아래와 같습니다.

Hello world 결과물

WPF 환경 구성하기

아래 그림과 같이 WPF 앱(.NET Framework)을 선택하고 ExamNodeUI 이름으로 프로젝트를 생성합니다.

WPF 프로젝트 생성

누겟 패키지에서 NodeNetwork를 설치하기 전에 프로젝트 속성에서 프레임워크를 4.7.2로 변경합니다. NodeNetwork v6.0.0은 .NET Framework 4.7.2 이상에서 사용 가능합니다.

프레임워크 버전 변경

누겟 패키지에서 NodeNetwork를 검색하고 프로젝트에 설치합니다.

NuGet Package 설치

Hello world 프로젝트 만들기

프로젝트의 App.xaml.cs 파일에 아래에 표시한 코드를 추가합니다.

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Threading.Tasks;
using System.Windows;
using NodeNetwork; //namespace 추가

namespace ExamNodeUI
{
    /// <summary>
    /// App.xaml에 대한 상호 작용 논리
    /// </summary>
    public partial class App : Application
    {
    	//OnStartup 추가
        protected override void OnStartup(StartupEventArgs e)
        {
            base.OnStartup(e);
            NNViewRegistrar.RegisterSplat();
        }
    }
}

프로젝트의 MainWindow.xaml 파일에 아래에 표시한 코드를 추가합니다.

<Window x:Class="ExamNodeUI.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ExamNodeUI"
        xmlns:nodenetwork="clr-namespace:NodeNetwork.Views;assembly=NodeNetwork" //추가
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <nodenetwork:NetworkView x:Name="networkView" /> //추가
    </Grid>
</Window>

NetworkView를 추가하면 MainWindow가 아래와 같이 변경됩니다.

NetworkView가 추가된 모습

이번에는 프로젝트의 MainWindow.xaml.cs 파일에서 아래의 네임스페이스를 추가합니다.

using NodeNetwork.ViewModels;
using DynamicData;

그리고 MainWindow() 함수에 아래의 코드를 추가합니다.

public MainWindow()
{
	InitializeComponent();

	//Create a new viewmodel for the NetworkView
	var network = new NetworkViewModel();

	//Create the node for the first node, set its name and add it to the network.
	var node1 = new NodeViewModel();
	node1.Name = "Node 1";
	network.Nodes.Add(node1);

	//Create the viewmodel for the input on the first node, set its name and add it to the node.
	var node1Input = new NodeInputViewModel();
	node1Input.Name = "Node 1 input";
	node1.Inputs.Add(node1Input);

	//Create the second node viewmodel, set its name, add it to the network and add an output in a similar fashion.
	var node2 = new NodeViewModel();
	node2.Name = "Node 2";
	network.Nodes.Add(node2);

	var node2Output = new NodeOutputViewModel();
	node2Output.Name = "Node 2 output";
	node2.Outputs.Add(node2Output);

	//Assign the viewmodel to the view.
	networkView.ViewModel = network;
}

이제 빌드하고 실행하면 아래와 같은 결과를 보여줍니다.

실행 화면

아주 간단한 예제였습니다. 프로그램은 아래 첨부 파일을 참고하세요. 첨부 파일 용량 문제로 패키지 파일은 제거했습니다.

ExamNodeUI.zip

0.01MB