GUI Realisierung

[Threin]

Hey,

ich würde gerne sowas in der Richtung hier als grafische Oberfläche enwtickeln und ich hätte ein paar Fragen zur Realisierung.
Ich habe bis jetzt nur Windows Forms verwendet, wird das eigentlich in der Praxis auch noch eingesetzt? WPF wird aber deutlich mehr genutzt oder?
Concept.jpg

Nun zu den eigentlichen Fragen:
Oben soll sich dann ja die Navigation befinden und eigentlich habe ich das ganze Code-technisch schon fertig aber ich wollte halt noch einmal eine bessere Oberfläche basteln, denn die aktuelle setzt auch auf mehrere Forms, was ja in der Praxis auch nicht wirklich gemacht wird oder?
Könnte man das denn mit dieser Navigation oben am besten mit Buttons oder einer Tabcontrol realisieren? Ich habe dann ja auch nachher warscheinlich ziemlich viele Elemente in dem Hauptfenster und wenn man dann nicht mit der Tabcontrol arbeitet, dann kleben die ja auch alle übereinandner oder? Wobei ich ja auch noch in, oder unter diesem Hauptfenster einen weiteren Bereich haben will, den mit Copyright usw und zwischem dem Hauptfenster und der Navigation soll auch noch ein kleiner Bereich mit einer anderen Farbe sein.
Könnte man eigentlich auch irgendwie abgerundete Buttons erstellen oder geht das mit einer Tabcontrol?

Links soll dann ja ein weiterer Bereich mit zusätzlichen Informationen oder dergleichen sein aber eigentlich sollte der dann von dem Bereich unten und von dem Hauptfenster abgetrennt sein, dann könnte ich ja schon nicht mehr mit einer Tabcontrol arbeiten? Das ganze soll ja nachher so ganz grob gesehen, wie auf dem Bild aussehen.

[luker]

Ich kann nicht für andere sprechen, aber hier in der Firma funktionieren Forms ziemlich gut.

So wie Du es gezeichnet hast, wirst Du TabControl nicht verwenden können, da IIRC die Buttons immer fest am Tabkörper dran sind. Also musst Du die Logik in etwas eigenes verpacken. Ich würde Buttons und UserControls nehmen. Je nach gedrücktem Button wird ein UserControl eingeblendet. Die für die anderen Buttons stehen auf Control.Visible=false

Die Verteilung in mehrere UserControls behebt das Problem, dass viele Controls "übereinander" im Hauptfenster kleben.

Die Aufteilung in verschiedene Bereiche kannst Du mit einem TableLayoutPanel hinbekommen.

[Threin]

Naja, ich habe auch nicht gesagt, das Forms nicht funktionieren, sondern nur das diese wohl nicht so häufig genutzt werden, weil es ja auch ebend Tabcontrols, Splitcontainer, UserControls usw. gibt.

Wie kann ich denn im TableLayoutPanel, wie oben im Bild gezeigt zwei Bereiche zusammenfügen oder zumindest die Grenze dazwischen entfernen. Ich habe mich jetzt erst einmal ein wenig mit dem TableLayoutPanel beschäftigt und jetzt sieht das ganze (in Miniaturausgabe) so aus:

layout.png

Ich habe auch mittlerweile ein paar Usercontrols reingezogen und das passt ja soweit schon einmal aber das ganze soll ja so aussehen, also mit den Spalten und Zeilen: (Die Überzeichneten Bereiche sollten zusammengehören)

layoutFertig.png

Aber anscheinend kann man sowieso nur in diese TableLayoutPanels Usercontrols oder einzelene Elemente einfügen oder? Sobald ich z.B versucht habe, ein paar Buttons nebeneinander zu platzieren, wurde der Button in einen der anderen freien Bereiche verschoben oder sonst ebend außerhalb. Dann müsste ich also die Navigation und das Hauptfenster usw. mit einer UserControl erstellen?

[Ralf Jansen]

WPF und Winforms haben beides auf dem Desktop ihre Berechtigung man muss nur überlegen was man erreichen will und dann das passende wählen. Wenn man neu in der Umgebung ist ohne irgendwelche ~Vorschäden~ dann ist die Wahl von WPF natürlicher einfach weil es die aktuellere Technik ist. Das heißt aber nicht das es für die jede Art der UI die bessere Wahl wäre. Man kann mit beiden Techniken fast alles machen, je nach Ziel ist das eine oder andere eben geeigneter.
Dein gewünschter Aufbau ist doch eigentlich der Standard und läßt sich in beiden Techniken umsetzen. Wenn es sich dem Windows Standard anpassen soll, also im Look wie eine übliche Windowsanwendung aussehen soll wäre Winforms eine gute Wahl. Wenn du an weitere UI Spielereien denkst die vom Windows Look abweichen dann eher WPF. Wenn du weitere Dinge berücksichtigen musst dann solltest du die Entscheidung davon abhängig machen(DPI Awareness, Accessability etc.). Dort gibt es tatsächliche Unterschiede.

TableLayoutPanel (oder jede andere Art von Layoutpanel) halte ich für überflüssig in deinem gezeigtes Beispiel scheint ja jede Dynamic zu fehlen. Da sollte man mit Splittern (wenn überhaupt nötig) und ein paar UserControls auskommen. Was spricht bei der Navigation gegen eine übliche Toolbar bzw. einem Ribbon? Dann wärst du Designtechnik bei deinem Aufbau genau da wo der Explorer z.B. schon ist.

[Threin]

Bis jetzt habe ich nur mit Windows Forms gearbeitet, lohnt sich eigentlich auch das Erlernen von WPF? Ist das nicht auch sehr für Websachen geeignet?
Kann wohl sein, das es der Standard ist aber ich bin auch noch nicht unbedingt der, der schon an ganz großen Sachen gearbeitet hat und bis jetzt ist das ganze eh eher ein Hobby.
Von DPI Awareness, Accessability etc. habe ich allerdings noch nie etwas gehört. Gehört das auch nativ dazu oder ist das eine Art Addon?

Das ganze soll nicht nur statisch sein, denn der Menübereich oben soll sich auch schon je nach Seite ändern, also Bearbeitung, Hinzufügen usw.
Der Inhaltsbereich(Hauptfenster) soll sich auch je nachdem natürlich ändern. Der Bereich links soll sich auch ändern aber dieser Trennbereich und die "Fußzeile" bleiben so, wie Sie sind.
Eignet sich dafür denn dann ein TableLayoutPanel? Dann bräuchte ich ja auch für jede Möglichkeit jeweils eine UserControl für die Fußzeile, eine für die Trennung und eine für das jeweilige Menü des einzelnen Bereiches?

Von einem Ribbon oder einer Toolbar habe ich noch nie was gehört? Gehört das auch zu den Windows Forms oder ist das etwas von WPF? Ich kenne wohl das Menustrip und die Tabcontrol für eine Art Menü.

Die Frage bleibt ja auch noch die von meinem Beitrag über diesem. Wie kriege ich bei dem TableLayoutPanel die Überlappungen weg, sodass es wie in dem Bild in dem Beitrag aussieht?

[Ralf Jansen]

Bis jetzt habe ich nur mit Windows Forms gearbeitet, lohnt sich eigentlich auch das Erlernen von WPF? Ist das nicht auch sehr für Websachen geeignet?

Das weißt du nachdem du es ausprobiert hast ob es sich für das was du machen willst eignet oder nicht. Sei neugierig.

Von DPI Awareness, Accessability etc. habe ich allerdings noch nie etwas gehört. Gehört das auch nativ dazu oder ist das eine Art Addon?

Das gehört zu Windows. Aber Anwendung machen das nicht einfach von selbst. Es geht um so Dinge ob deine Anwendung mit anderen DPI Einstellungen sauber mit skaliert wenn jemand die DPI Einstellungen in Windows hochdreht weil er schlecht sieht. Bzw. darum ob deine Anwendung auch von Personen mit diversen Handycaps (Blinde) verwendet werden können. Es gibt spezielle Schnittstellen(Läuft bei Microsoft unter dem Namen Accessability) damit alternative Darstellungsgeräte(z.B. ein Braille Display für Blinde) funktionieren. Wenn du das für dich als Hobby programmierst wohl eher irrelevant

Von einem Ribbon oder einer Toolbar habe ich noch nie was gehört? Gehört das auch zu den Windows Forms oder ist das etwas von WPF? Ich kenne wohl das Menustrip und die Tabcontrol für eine Art Menü.

Toolbar ist der allgemeine Name für eine Menüleiste mit Buttons so wie du die wahrscheinlich die ganze Zeit in Visual Studio verwendest. In Winforms würde man dafür einen Toolstrip nehmen.
Ribbon ist das Menükonzept das Microsoft mit Office 2007 eingeführt hat und mittlerweile auch z.B. vom Explorer (ab Windows 8?) verwendet wird. In Winforms müßte man zu einem Third Party Hersteller greifen. In WPF ist das Standardmäßig vorhanden.

Der Inhaltsbereich(Hauptfenster) soll sich auch je nachdem natürlich ändern.

Aber die einzelnen Bereiche (die die du z.B. Navigation, Hauptfenster, Anderes genannt hast) sollen nicht ihre Position ändern das meinte ich. Der Aufbau ist statisch (oder wird maximal mit einem Splitter anders geteilt) nur der Inhalt der einzelnen Bereiche ändert sich. Oder?

[Threin]

Ich denke auch, dass das erst einmal irrelevant ist aber trotzdem danke für die Erklärung.

Ehrlich gesagt scheint mir WPF sowieso schon fast unumgänglich zu sein, vor allem wenn man etwas grafisch anspruchsvolleres? machen will. In WPF scheint es ja auch so schon nativ mehr Steuerelemente usw. zu geben.

Das ganze sollte schon erst einmal statisch sein, also zumindest vom Aufbau her aber es kann durchaus oben mal sein, das ein Menüpunkt weniger da ist oder dergleichen.
Wie würde man das überhaupt machen, wenn z.B der linke Bereich komplett verschwinden soll? Das wäre vielleicht noch etwas, worüber ich nachdenken müsste.

[Ralf Jansen]

Ehrlich gesagt scheint mir WPF sowieso schon fast unumgänglich zu sein, vor allem wenn man etwas grafisch anspruchsvolleres? machen will. In WPF scheint es ja auch so schon nativ mehr Steuerelemente usw. zu geben.

Ich würde nicht von anspruchsvoller reden sondern von mehr Freiheit. Wenn du eine Windowsanwendung im Windowslook mit Windowsbedienkonzepten (und nach meiner Meinung damit etwas das sofort jeder versteht der Windows kennt) möchtest ist Winforms pasyend. Es ist einfach ein Kapselung der Windows StandardControls. Wenn du irgendwas davon abweichendes möchtest wird dir WPF mehr Möglichkeiten geben. Hat aber natürlich einen gewissen Lernoverhead es richtig zu verwenden. Darum sprach ich oben mal von ~Vorschäden~. Winforms folgt einfach dem Funktionsprinzip von Windows UIs die man seit mindestens Mitte der 90er so kennt. Wenn man schon Erfahrung mit Windowsprogrammierung hat wird einem diese Vorerfahrung in Winforms helfen. WPF ist da anders und spricht in seiner Philosophie eher Leute an die einen Webhintergrund haben. Es ist aber keine Technik (mehr) fürs Web sondern für den Desktop.

[luker]

Die Überlappungen machst Du nicht im TableLayoutPanel. Stattdessen plazierst Du in einer der Zellen ein Control, das daraufhin neue Eigenschaften bekommt. Mit ColumnSpan und RowSpan stellst Du ein, wie viele Spalten bzw Zeilen das Control überspannt.

Die erwähnten Splitter (SplitContainer) sind prima, wenn der Benutzer die Grenze zwischen zwei Bereichen verschieben können soll.

Menüpunkte kann man zur Laufzeit ein- und ausblenden, wenn man sich irgendwo eine Referenz auf das Menüelement aufhebt. Ebenso kann man Splitter per Programm verschieben oder Spalten/Zeilen des TableLayoutPanels vergrößern/verkleinern (TableLayoutPanel.RowStyles[i].Height).

[Threin]

Ich bin grade dabei das ganze aufzubauen aber wie kann ich denn mehrere UserControls in einen Bereich schieben? Dann hätte ich aber doch auch wieder das Problem, das mehrere Sachen übereinander sind oder?
Man kann diese UserControls ja nicht erst zur Laufzeit hinzufügen, sondern diese müssen sich schon in einem Container befinden? Ich will ja in einem Bereich, z.B den Main Bereich je nach ausgewählten Button ein anderes UserControl einblenden oder ist das so richtig?

private UserControl5 userControl5;
private UserControl1 userControl1;

public MainForm()
{
    InitializeComponent();
    userControl5 = new UserControl5();
    userControl1 = new UserControl1();
}

private void toolStripButton_File_Click(object sender, EventArgs e)
{
    this.tableLayoutPanel1.Controls.Add(this.userControl5, 0, 0);
}

Das habe ich auch mal probiert und das funktioniert auch aber müsste da dann nicht noch eine Abfrage hin, ob sich das userControl schon auf der Form befindet und falls es schon vorhanden ist, visible auf false setzen? Kann man denn dann auch mehrere UserControls zu einem Bereich hinzufügen, ohne das es Probleme gibt oder müsste man die UserControl dann irgendwie entfernen?

Verstehe ich das auch richtig, das ich also kein UserControl über mehrere Zellen eines TableLayoutPanels spannen kann, sondern nur einzelne Controls der UserControls?

@Ralf Jansen
Danke für die Erklärung, dasselbe liest man auch Online. Ich denke, das ich mir trotz der stärkeren Lernkurve nach diesem kleinem Projekt mal mit WPF beschäftigen werde. Da sollen ja auch ein wenig grafisch anspruchsvollere Sachen und Animationskram mit integriert sein.

[luker]

Mehrere UserControls in derselben Zelle oder dem selben Zellenbereich verlangen danach,

Remove(Control);
Add(Control, int, int); // wie von Dir erwähnt

in den EventHandlern Deiner Ein/Ausblendebuttons zu verwenden.
Man kann sehrwohl UserControls zur Laufzeit dem Panel hinzufügen. Du hast es vorgemacht.

Nicht Visible, sondern Add/Remove. Sonst werden durch Add die Controls der folgenden Zellen nach hinten verschoben. Daher erst das alte Control entfernen, bevor das gewollte zu TableLayoutPanel.Controls hinzugefügt wird.

Wenn ich Deine Frage richtig verstehe, dann ist es ganau andersherum: Du kanns nur das UserControl über mehrere Zellen spannen. Das TableLayoutPanel hat nämlich überhaupt keine Ahnung von den Controls innerhalb Deines UserControls.

[Threin]

Dann sollte das ganze ja doch so funktionieren, wie ich mir das vorgestellt habe.
Könnte man denn auch ein oder mehrere UserControls in einer Zelle des TableLayoutPanels einblenden, also ohne dabei eines erst zu entfernen oder müsste man das ganze dann irgendwie in ein UserControl packen, bzw. dafür dann ebend noch eine Zelle hinzufügen?

Ist das ganze denn dann so richtig?

private UserControl5 userControl5;
private UserControl1 userControl1;

private bool wasPressed;

public MainForm()
{
    InitializeComponent();
    userControl5 = new UserControl5();
    userControl1 = new UserControl1();

    wasPressed = false;
}

private void toolStripButton_File_Click(object sender, EventArgs e)
{
    wasPressed = !wasPressed;

    if(wasPressed)
        this.tableLayoutPanel1.Controls.Add(this.userControl5, 0, 0);
    else
        this.tableLayoutPanel1.Controls.Remove(this.userControl5);
}

Man brauch ja trotzdem noch eine Instanz der UserControl, nehme ich mal an?
Allerdings müsste ich dann auch eine bool Variable hinzufügen, die dann je nachdem gesetzt wird, also ob der Button gedrückt wurde oder nicht, wie oben dargestellt oder gibt es dafür schon was?
Ansonsten könnte man ja auch den ToolStripDropDownButton überschreiben und eine Variable hinzufügen und das dann zum Event beim Click hinzufügen? Man müsste sich ja auch, da man ja bei mir durch das Obere Menü erst einmal auf eine andere Ebene kommt merken, wo man grad ist, bzw. welche Ebene (Button) grad aktiviert ist. Eventuell könnte man dann sogar am besten ein Event an diese Eigenschaft anknüpfen, sodass sich, wenn eine anderer Button aktiviert wird direkt die zughehörige UserControl schließt?