20

提案された GUI に示すように、いくつかのカスタム ボタンまたはユーザー コントロールを作成しようとしています。機能は次のとおりです。

グラフまたは構成はグラフィカルに作成されます。

コントロールは、ツールバーからドラッグするか、マウスの右クリック/ドロップダウンで挿入できます

あるコントロールから別のコントロールにドラッグすることで、それらを線で接続する必要があります

トグルは、ビューをオプション付きのコントロールからシンプルなビューにシフトする必要があります

GUI ビュー - オプション付きのコントロール: オプション付きの GUI ビュー コントロール

GUI ビュー - 最小化: ここに画像の説明を入力

接続線を作成するために使用できる Windows フォームの機能はどれですか?

線を描画する機能を使用して作成された場合、コントロールが線に確実にスナップするようにするにはどうすればよいですか? ..

Visual Studio 2010 Express を使用して C# でプログラミングしています。

4

2 に答える 2

33

Ok。これは、同様の要件のために作成した例を少し変更したものです。

私の意図は、本格的な UI を必要とする人にとって、winforms がもはや選択肢ではないことを示すことです。元のサンプルは 3 工数で作成されました。

これらすべてのアイテム (ノードとコネクタの両方) を保持するコンテナが実際にはListBox.

注目すべき点:

  • 「NodeXX」テキストはThumbコントロール内に含まれており、クリックとドラッグが可能です。
  • コネクタを選択することもでき、選択すると素敵なアニメーションが表示されます。
  • 左パネルでは、現在選択されているオブジェクトの値を編集できます。
  • UI の機能は、UI を構成するデータから完全に切り離されています。したがって、このすべてのノードとコネクタは、DB またはその他のデータ ソースからロード/保存できる単純なプロパティをint持つ単純なクラスです。double
  • クリック シーケンスの実行方法が気に入らない場合は、ノードとコネクタを描画します。これは、ニーズに完全に適合させることができます。
  • WPF ルール。

編集：

2 番目のバージョン。今回は元のスクリーンショットにかなり似ています。

ここに画像の説明を入力

ここに画像の説明を入力

  • の概念をSnapSpot方程式に追加しました。これらは、ノードの周りに表示される小さな赤い半円で、実際にはConnectors が関連付けられています。

  • また、に基づいConnectorて使用するように DataTemplate を変更しましたQuadraticBezierSegment

    Connector.Start.Location,
Connector.MidPoint, and 
Connector.End.Location

これにより、直線だけでなく、曲線をコネクタとして使用できます。

  • Thumbを選択 (クリック) すると表示される小さな赤い四角形(スクリーンショットで表示) があり、曲線のConnectorを移動できます。MidPoint
  • TextBoxes左パネルの「中間点」の下にカーソルを置いたときにマウス ホイールを回転させて、その値を操作することもできます。
  • スクリーンショットに示すように、 [すべて折りたたむ]CheckBoxを使用すると、完全なボックスと小さいボックスを切り替えることができます。
  • には、親に対する相対的な位置に対応する 0 ～ 1 の値SnapSpotがあります。これらは 4 つに限定されず、実際には ごとに任意の数にすることができます。OffsetX OffsetYNodeNode
  • ComboBoxesとにはButtons機能がありませんが、関連するプロパティとコマンドをNodeクラスに作成し、それにバインドするだけです。

編集2:

より優れたバージョンのダウンロード リンクを更新しました。

編集 10/16/2014 : 多くの人がこれに興味を持っているようなので、ソースをGitHubにアップロードしました。

于 2013-04-04T20:57:55.240 に答える
0

これはグラフタイプの問題だと思います。ノードは部屋で、エッジは部屋を結ぶ線です。ノードをエッジに接続する方法を記述する別のクラス (接続クラスなど) を導入できます。たとえば、あなたのホールは寝室につながっていますが、必ずしも直線を使用しているわけではありません。Graphics.DrawBezier を使用すると曲線を描くことができますが、点の配列が必要です。これが Connection クラスの出番です。いくつかのコードが役立つかもしれません...

   class Room
   {
     public Room(String name, Point location);
     public void Draw(Graphics g);
   }

   class Connection
   {
     public void Add(Point ptConnection);
     public void Add(Point[] ptConnection);

     // Draw will draw a straight line if only two points or will draw a bezier curve
     public void Draw(Graphics g);
   }

   class House // basically a graph
   {
     public void Add(Room room);
     public void AddRoomConnection(Room r1, Room r2, Connection connector);

     // draw, draw each room, then draw connections.
     public void Draw(Graphics g);
   }

   void Main()
   {
      House myHouse = new House();
      Room hall = new Room("Hall", new Point(120,10);
      Room bedroom1 = new Room("Bedroom1", Point(0, 80));
      Connection cnHallBedroom = new Connection();
      cn.Add(new Point());  // add two points to draw a line, 3 or more points to draw a curve.
      myHouse.AddRoomConnection(hall, bedroom1, cnHallBedroom);
   }

これは基本的なアプローチであり、最善ではないかもしれませんが、出発点として役立つ可能性があります。

于 2013-04-04T19:24:51.820 に答える