Schritt für Schritt - So gestalten Sie ein Rechnungs-Dashboard

In diesem Artikel werfen wir einen Blick auf das von Hrvoje Grubisic entworfene Rechnungs-Dashboard, während wir ein Modell davon mit dem schönen und flotten Bunifu-UI-Framework entwerfen.

Bevor wir mit dem Designprozess beginnen, werfen wir einen Blick auf das Endergebnis…

Gutschrift: Invoices Dashboard von Hrvoje Grubisic - https://dribbble.com/shots/3101891-Invoices-Dashboard

Ein kurzer Blick (Steuerelemente und Komponenten)

Lassen Sie uns alle Steuerelemente und Komponenten zuordnen, die für die Neugestaltung des Rechnungs-Dashboards erforderlich sind.

Alle Bedienelemente und Komponenten

Jetzt kann es losgehen ...

Designprozess

Bevor wir beginnen, benötigen Sie eine Kopie der Bunifu UI Framework-Bibliothek. Sie können die einwöchige kostenlose Testversion herunterladen. Halten Sie ebenfalls eine Kopie der Icons8-Software für „Alles-in-allem-Symbole“ und des Dienstprogramms Just Color Picker bereit, um Farben aus einem beliebigen Bereich der Benutzeroberfläche auszuwählen. Mit diesen Tools können Sie dieses Dashboard entwerfen.

Öffnen Sie zunächst Visual Studio und erstellen Sie eine Windows Form-Anwendung mit einem Namen Ihrer Wahl. Klicken Sie anschließend auf OK.

  • Zuerst müssen wir die BunifuElipse-Komponente zu unserem neu erstellten Formular hinzufügen, um Rahmen zu entfernen:
Ein Formular mit BunifuElipse-Komponente
  • Fügen Sie nun zwei Bedienfelder hinzu, docken Sie eines oben und das andere links mit der Dock-Eigenschaft an.
Panel mit weißer Hintergrundfarbe (links), Panel mit RGB (111, 109, 216) oben
  • Fügen Sie als Nächstes 9 BunifuCustomLabels hinzu und setzen Sie die Eigenschaft forecolor auf Weiß und Texte, wie unten gezeigt:
BunifuCustomLabel (s)
  • Jetzt können Sie BunifuTileButtons hinzufügen und die Symbole wie gezeigt einstellen. Diese werden auf dem Navigationsfeld hinzugefügt, das wir links angedockt haben.
Für die verwendeten Symbole können Sie sie mit Icons8 kostenlos herunterladen!
BunifuTileButtons
  • Fügen Sie ein beliebiges Steuerelement hinzu, dessen Größe geändert werden kann, z. B. das PictureBox-Steuerelement, das als Indikator fungiert, wenn ein Benutzer durch die Symbole navigiert, und setzen Sie die Farbe auf rgb (122,117,195). Verwenden Sie die Location-Eigenschaft, um die X- und Y-Position des Steuerelements gleichzeitig festzulegen. Die Ergebnisse werden unten angezeigt.
  • Fügen Sie dem Formular BunifuCustomLabel, Link Label und BunifuSeperator hinzu, und legen Sie im Abschnitt Eigenschaften den folgenden Text fest:
Gesamtes Formular
  • Fügen Sie nun zwei Panels hinzu, setzen Sie die Hintergrundfarbe auf Weiß und fügen Sie dem Panel auf der linken Seite BunifuCustomLabels hinzu. Der vollständige Abschnitt sollte folgendermaßen aussehen:
Gesamtes Formular
  • Fügen Sie dies dem Panel auf der rechten Seite hinzu. Fügen Sie für die grünen und blauen Aufzählungszeichen BunifuCustomLabels hinzu, und fügen Sie in der Eigenschaft text das Unicode-Zeichen mit dem Aufzählungszeichen "." Hinzu.
  • Fügen Sie die Bunifu DataViz-Komponente in das rechte Bedienfeld ein und schreiben Sie den folgenden Code, um das Diagramm zu zeichnen (Bunifu Stacked AreaChart). Sie können rennen, um die Ergebnisse zu sehen. Sie bemerken, dass es Standardfarben für das Diagramm gibt.
  • Ändern Sie nun den Farbsatz mit dem folgenden Code in die gewünschten Farben.
  • Der vollständige Abschnitt sieht folgendermaßen aus:
DataViz-Komponente
  • Jetzt, da wir mit dem oberen Abschnitt fertig sind, können wir mit dem unteren Abschnitt fortfahren. Hier verwenden wir ein anderes Benutzersteuerelement mit BunifuCustomDataGrid. Wir werden Daten mit Zeilen und Spalten in das DataGrid laden.
  • Gehen Sie zu Projekt> Benutzerkontrolle hinzufügen. Fügen Sie 2 BunifuFlatButtons hinzu und stellen Sie in der Eigenschaft text Folgendes ein: Ziehen Sie das BunifuCustomDataGrid-Steuerelement auf das Benutzersteuerelement.
  • Zuletzt fügen wir unserem BunifuCustomDataGrid Daten hinzu. Klicken Sie mit der rechten Maustaste auf das BunifuCustomDataGrid und wählen Sie Spalte hinzufügen. Fügen Sie fünf Spalten hinzu und stellen Sie sicher, dass Sie den ColumnType auf DataGridViewTextBoxColumn festlegen, mit Ausnahme der ersten Spalte (Status), deren Typ DataGridViewButtonColumn ist.
  • Kehren Sie nun zum Formularentwurfsteil zurück und ziehen Sie die Benutzersteuerung in den unteren Bereich des Formulars. Führen Sie das Projekt aus, und überprüfen Sie, ob das unten gezeigte Ergebnis vorliegt.
  • Nun besteht der letzte Schritt darin, die Zeilen unserem BunifuCustomDataGrid hinzuzufügen. Doppelklicken Sie auf das Benutzersteuerelement und fügen Sie in usercontrol.cs (Load event) den unten gezeigten Code hinzu.
  • Speichern Sie nun die Änderungen und führen Sie das Projekt aus. Wenn Sie das unten gezeigte Ergebnis erhalten haben, gratulieren Sie, dass Sie es richtig gemacht haben.

Ressourcen-Link

  • Quellcode: https://github.com/bunifu-framework/invoice-dashboard

Fazit

Visuelles Design ist der Prozess der Umwandlung Ihrer Drahtgitter-Ideen in Mock-Ups. Genau das haben wir hier getan. Anfangs schien dies eine Herausforderung zu sein, aber mit Hilfe des Bunifu-UI-Frameworks war dies nicht schwer zu erreichen. Hoffentlich inspiriert Sie dies dazu, mehr Modelle mit dem Bunifu UI Framework zu erstellen.

Viel Spaß beim Programmieren und Gestalten!