web-dev-qa-db-ja.com

Windowsフォームを使用してカスタムユーザーボタン/コントロールを作成して行に接続する方法

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

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

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

あるコントロールから別のコントロールにドラッグすることで、それらは線で接続されます。

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

GUIビュー-オプション付きのコントロール： GUI view controls with options

GUIビュー-最小化： enter image description here

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

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

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

c#winformscustom-controls
18
Eirik

OK。これは私が作成した例のわずかな変更です 同様の要件

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

これらすべてのアイテム（ノードとコネクタの両方）を保持するコンテナが実際にはListBoxであることを知って驚くかもしれません。

注目に値すること：

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

編集：

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

enter image description here

enter image description here

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

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

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

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

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

Edit2：

ダウンロードリンクをより良いバージョンに更新しました。

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

30
Federico Berasategui

これはグラフタイプの問題だと思います。ノードは部屋であり、エッジは部屋を結ぶ線です。ノードをエッジに接続する方法を記述する別のクラス（たとえば、接続クラス）を導入できます。たとえば、ホールは寝室に接続しますが、必ずしも直線を使用する必要はありません。 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);
   }

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

0
user2225284