[How to] durch die Form "switchen" - design

    • Allgemein

    Es gibt 14 Antworten in diesem Thema. Der letzte Beitrag () ist von Jonas Jelonek.

      [How to] durch die Form "switchen" - design

      Hallöchen ;)

      heute möchte ich euch mein erstes (kleines) Tutorial vorstellen.

      Was werd ich euch jetzt zeigen?
      - Ich zeige euch, wie man mit (sehr) einfach mitteln ein schönes Design-Feature machen kann. Das ganze nenne ich Formswitcher ;)

      Was benötigt man?
      für mein Beispiel braucht ihr..
      - 2 Timer
      - 2 Groupboxen
      - 2 Buttons (oder andere "Knöpfe")

      Wie sieht das denn aus, wenn´s fertig ist?

      Projekt im Anhang ;)

      Gut, dann fangen wir mal an!

      1. Als erstes müsst ihr euch 2 Groupboxen auf die Form platzieren, am besten gleich groß.

      2. Um eine schönere Übersicht zu haben, könnt ihr die Form zu groß ziehen, wie es für euch am praktischten ist. Denn wir sagen dem Form_Load, das er nur so groß sein darf wie die Groupbox.

      VB.NET-Quellcode

      1. Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
      2. Me.width = GroupBox1.width +20
      3. Me.height = GroupBox1.height + 40
      4. End Sub


      3. In den Groupboxen kommen jetzt je 1 Button rein. Den ersten nenn wir mal "Switchen" und den zweiten "Zurück".

      4. Jetzt benötigen wir noch zwei timer.

      5. In dem Code des 1. Buttons wird gesagt, das beide timer stoppen sollen, um Fehler zu vermeiden, daraufhin wird der 1. Timer gestartet. Das gleiche beim 2. Button nur mit Timer 2.
      Button 1, "Switchen" :

      VB.NET-Quellcode

      1. Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
      2. Timer1.Start()
      3. Timer2.Stop()
      4. End Sub


      Button 2, "zurück":

      VB.NET-Quellcode

      1. Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
      2. Timer1.Stop()
      3. Timer2.Start()
      4. End Sub


      6. Nun muss den Timern noch gesagt werden, was sie tun sollen. Zuerst stellen wir den Interval auf 10 oder geringer. Damit bewirk man, dass das "Switchen" ruckelfrei abläuft.
      Code des 1. Timers:

      VB.NET-Quellcode

      1. Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick
      2. If GroupBox2.Location.X = 0 Then
      3. Timer1.Stop()
      4. End If
      5. GroupBox1.Location = New Point(GroupBox1.Location.X - 5, GroupBox1.Location.Y)
      6. GroupBox2.Location = New Point(GroupBox2.Location.X - 5, GroupBox1.Location.Y)
      7. End Sub

      Erklärung:
      Zuerst wird mit einer If-Abfrage überprüft, ob die Koordinate x der Groupbox auf 0 ist, denn wenn das so ist, ist die Groupbox am richtigem Ort.
      Daraufhin werden beide Groupboxen um 5 nach links verschoben, bis halt x = 0 ist.

      der Code des zweiten timers sieht eigentlich ähnlich aus:

      VB.NET-Quellcode

      1. Private Sub Timer2_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer2.Tick
      2. If GroupBox1.Location.X = 0 Then
      3. Timer2.Stop()
      4. End If
      5. GroupBox1.Location = New Point(GroupBox1.Location.X + 5, GroupBox1.Location.Y)
      6. GroupBox2.Location = New Point(GroupBox2.Location.X + 5, GroupBox1.Location.Y)
      7. End Sub


      Erklärung: Hier ist nur anders, das Groupbox1.x = 0 sein muss und die groupboxen werden nach rechts verschoben. ;)


      Fertig! So einfach ist das ;)
      Und wie ich finde, sieht das sehr schick aus.

      Im Anhang nochmal das komplette Projekt.
      Dateien
      • design.rar

        (65,96 kB, 218 mal heruntergeladen, zuletzt: )
      • design - 1.1.rar

        (66,16 kB, 300 mal heruntergeladen, zuletzt: )

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „MySide“ ()

      MySide schrieb:

      Und wie ich finde, sieht das sehr schick aus.

      Beim Effekt ist das Geschmackssache, beim Code eher nicht, da nein.

      Du schreibst:

      VB.NET-Quellcode

      1. Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
      2. Me.Size = GroupBox1.Size
      3. End Sub


      Aber im Code steht:

      VB.NET-Quellcode

      1. Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
      2. Me.Height = 250
      3. Me.Width = 415
      4. End Sub

      Ob das daran liegt, dass die Form zu KLEIN wäre, wenn sie die Größe der Groupbox hat? Denn die CLIENTAREA muss ja so groß wie die GB sein und nicht das Äußere der Form ...

      Ebenso ist die Verwendung von ZWEI Timern absolut unnötig.


      Noch nicht GANZ so schön, aber immerhin:
      Spoiler anzeigen

      VB.NET-Quellcode

      1. Public Class Form1
      2. Private WithEvents tm As New Timer With {.Interval = 30, .Enabled = False}
      3. Private _current As Integer = 0
      4. Private _target As Integer = 0
      5. Private _boxes As IEnumerable(Of GroupBox)
      6. Private _steps As Integer = 10
      7. Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
      8. Me.ClientSize = New Drawing.Size(GroupBox1.Width, GroupBox1.Height)
      9. _boxes = From b As GroupBox In Me.Controls.OfType(Of GroupBox)() Order By b.Name Select b
      10. End Sub
      11. Private Sub BtnForward_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles BtnForward.Click
      12. _target = 0 - GroupBox1.Width
      13. If Not tm.Enabled AndAlso _target <> _current Then tm.Start()
      14. End Sub
      15. Private Sub BtnBack_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles BtnBack.Click
      16. _target = 0
      17. If Not tm.Enabled AndAlso _target <> _current Then tm.Start()
      18. End Sub
      19. Private Sub tm_Tick(sender As Object, e As System.EventArgs) Handles tm.Tick
      20. If _target = _current Then
      21. ' safe bailout
      22. tm.Stop()
      23. Else
      24. Dim neu As Integer = If(_target < _current, -_steps, _steps)
      25. If neu < 0 Then
      26. If _current + neu < _target Then neu = _current - _target
      27. ElseIf neu > 0 Then
      28. If _current + neu > _target Then neu = _target - _current
      29. End If
      30. _current += neu
      31. For Each g In _boxes
      32. g.Left += neu
      33. Next
      34. End If
      35. End Sub
      36. End Class

      Zwei Buttonhandler sind eigentlich auch unnötig, aber so spät am Abend bin ich faul.
      Auf jeden Fall sieht man, dass man das ganze auf diese Art deutlich besser um mehr Boxen (oder wasauchimmer) ergänzen kann.
      Danke für den Tipp! ;)
      Ich hab ja auch nie behauptet, das der Code der beste ist ^^
      Bin halt noch kein profi, ich war einfach mit dem gesamtergebnis zufrieden und wollte euch nen anreiz geben, aber für die, die ´nen besseren Code haben wollen, ist ja jetzt dein Code zu verfügung :thumbsup:

      MySide schrieb:

      für die, die ´nen besseren Code haben wollen, ist ja jetzt dein Code zu verfügung

      Dies ist Dein Thread, Dein Tutorial.
      Vielleicht geht Dein Ehrgeiz so weit, selbst Deinen Code zu optimieren und uns dann vie Version 0.2 zu präsentieren. :thumbup:
      Falls Du diesen Code kopierst, achte auf die C&P-Bremse.
      Jede einzelne Zeile Deines Programms, die Du nicht explizit getestet hast, ist falsch :!:
      Ein guter .NET-Snippetkonverter (der ist verfügbar).
      Programmierfragen über PN / Konversation werden ignoriert!
      Vielleicht nutzt Du eine Liste von Group-Boxen, die dann per Index ausgewählt werden können.
      Beachte dabei aber, dass diese GroupBoxen unterschiedlich groß sein können (müssen), in Breite und Höhe.
      Vorschlag für das Vorgehen:
      Ist die neue Box breiter / höher -> erst switchen, dann breiter / höher machen (auch über Timer).
      Ansonsten erst breiter / höher machen, dann switchen. :thumbup:
      Falls Du diesen Code kopierst, achte auf die C&P-Bremse.
      Jede einzelne Zeile Deines Programms, die Du nicht explizit getestet hast, ist falsch :!:
      Ein guter .NET-Snippetkonverter (der ist verfügbar).
      Programmierfragen über PN / Konversation werden ignoriert!
      Starte das Studio, klicke auf Neues Projekt ...
      wähle Klassenbibliothek aus, gib ihr einen "anständigen" Namen
      und los.
      Sinnvoll ist es, wenn Du gleich eine Projektmappe erstellst mit einer Form-Anwendung, in der Du die DLL aufrufst und so testest.
      Bedenke:
      Alle Funktionen, die von außen gesehen werden sollen, müssen Public deklariert werden.
      Kompiliere die DLL und füge sie als Verweis Deiner Formanwendung hinzu.
      Importiere den NameSpace Deiner DLL und Du siehst die Liste der verfügbaren Klassen, Funktionen, Enums usw.
      Falls Du diesen Code kopierst, achte auf die C&P-Bremse.
      Jede einzelne Zeile Deines Programms, die Du nicht explizit getestet hast, ist falsch :!:
      Ein guter .NET-Snippetkonverter (der ist verfügbar).
      Programmierfragen über PN / Konversation werden ignoriert!
      Ich weiß, dass dieser Thread schon sehr alt ist, aber ich konnte nicht anders.
      Warum funktioniert dieser Effekt nur, wenn die Groupboxen im Beispielprojekt an der Position sind, wo sie standardmäßig sind.
      Wenn ich die nämlich verschiebe, laufen die groupboxen einfach aus der form raus und es hält nicht an. Warum?
      @Jonas Jelonek
      Schlampig programmiert. Es wird immer um 5 pixel verschoben und dann geprüft, ob sich die Groupbox genau an Stelle 0 befindet. Angenommen, die Groupbox befindet sich an X-Koordinate 2, dann wird sie um 5 Pixel verschoben und ist bei -3. Dann wird sie folglich niemals 0 erreichen.
      Da musst du halt ne Abfrage einbauen, ob die Groupbox weniger als 5 Pixel von 0 entfernt ist und wenn ja, dann setzt du sie gleich auf 0 und hällst den Timer an.