<\/p>\n
QR-Codes sind praktische Helfer in der heutigen Zeit der Smartphones und ihren Kameras. Man kann damit wichtige Informationen so codieren, dass man diese mit der Kamera erkennen und weiterverarbeiten kann – standardmäßig so, dass der Code eine URL zu einer Webseite erhält und man diese dann im Browser des Smartphones aufrufen und die Inhalte konsumieren kann. Dieser Artikel zeigt, wie Du QR-Codes mit .NET-Anwendung erstellen kannst. Dreh- und Angelpunkt ist dabei ein NuGet-Paket, das die Funktionen für die Erstellung von QR-Codes auf Basis verschiedener Informationen bereitstellt. Der Artikel zeigt, wie wir dieses Paket in ein .NET-Projekt einbinden und es dann nutzen können.<\/b><\/p>\nQR-Codes und ihre Anwendung<\/h2>\n
Kennst Du eigentlich die Bedeutung der Abkürzung QR? Ich habe sie lustigerweise zum ersten Mal bewusst wahrgenommen, als ich für diesen Artikel recherchiert habe. QR steht für Quick Response.<\/p>\n
Für QR-Codes gibt es mittlerweile sehr viele Anwendungsfälle. Hier sind nur einige von ihnen:<\/p>\n
Im Beispiel wollen wir eine WPF-Anwendung nutzen, um Texte eingeben und daraus QR-Codes zu erzeugen.<\/p>\n
Dazu erstellen wir eine neue Anwendung auf Basis der Vorlage WPF-App (.NET Framework) <\/b>– siehe Bild 1.<\/p>\n
![\"Erstellen](\"..\/fileadmin\/_temp_\/2023_02\/pic_364_001.png\")
<\/p>\n
Bild 1: Erstellen eines WPF-Projekts<\/span><\/b><\/p>\n Nach dem Erstellen des Projekts erscheint das Hauptfenster von Visual Studio .NET und zeigt die WPF-Seite im Entwurf und mit dem Beschreibungscode im XAML-Format an. Diese Seite wird nach dem Starten der Anwendung angezeigt. Deshalb platzieren wir hier die Steuerelemente für die Daten, auf deren Basis der QR-Code erzeugt wird.<\/p>\n Hier passen wir den Code im unteren Bereich so an, dass wir später den Entwurf aus Bild 2 erhalten.<\/p>\n Bild 2: Unsere angehende Lösung im WPF-Entwurf<\/span><\/b><\/p>\n Dazu verwenden wir den Code aus Listing 1. Im oberen Teil passen wir gegenüber der Vorlage die Höhe und die Breite des Window<\/b>-Elements so an, dass die Eigenschaften Height <\/b>und Width <\/b>jeweils den Wert 550 <\/b>erhalten.<\/p>\n Listing 1: Code für die Gestaltung des Fensters und der enthaltenen Steuerelemente<\/span><\/b><\/p>\n Für das darunter liegende Grid<\/b>-Element legen wir ein Raster fest, das aus drei Spalten und vier Zeilen besteht.<\/p>\n Das erledigen wir für die Spalten mit dem Element Grid.ColumnDefinitions<\/b>, dem wir drei ColumnDefinition<\/b>-Elemente unterordnen, die jeweils die Breite der Spalten angeben – die ersten beiden sollen an die enthaltenen Steuerelemente angepasst werden (Width=”Auto”<\/b>), die letzte die restliche Breite im Fenster einnehmen (Width=”*”<\/b>).<\/p>\n Für die Zeilen verfahren wir analog und legen im Grid.RowDefinitions <\/b>vier RowDefinition<\/b>-Elemente fest.<\/p>\n Diese Zeilen und Spalten geben wir mit den Eigenschaften Grid.Column <\/b>und Grid.Row <\/b>der nachfolgend hinzugefügten Steuerelemente so an, dass festgelegt ist, welches Steuerelement in welcher Zelle landet.<\/p>\n Für das erste Label<\/b>-Element fehlen diese beiden Eigenschaften, da wir hier den Standardwert 0 <\/b>verwenden, damit das Bezeichnungsfeld in der linken, oberen Spalte landet. Die nachfolgend definierte TextBox <\/b>soll in der zweiten Spalte der ersten Zeile landen, daher stellen wir hier Grid.Column <\/b>auf den Wert 1<\/b> ein (der Index für die Zeilen und Spalten ist 0-basiert). Für die Textbox stellen wir eine entsprechende Höhe und Breite und einen Abstand zum umgebenden Grid ein. Außerdem legen wir mit TextWrapping=”Wrap” <\/b>fest, dass wir mehrzeilige Texte eingeben können. Der Name des Textfeldes ist txtQRCodeErstellen<\/b>.<\/p>\n Die nächste Zeile enthält in der zweiten Spalte eine Schaltfläche namens btnQRCodeErstellen<\/b>. Die dadurch aufzurufende Prozedur definieren wir gleich.<\/p>\n Darunter zeigen wir ein Image<\/b>-Steuerelement an, welches den erzeugten QR-Code schließlich anzeigen soll. Dieses Element nennen wir imgQRCode<\/b>.<\/p>\n Damit man es überhaupt sieht, haben wir um dieses Element herum noch ein Border<\/b>-Element mit der Dicke 1 <\/b>und der Farbe DarkGray <\/b>gelegt.<\/p>\n Damit wir beim Anklicken der Schaltfläche eine Prozedur ausführen können, stellen wir für diese das Attribut Click <\/b>ein.<\/p>\n Um die Prozedur schnellstmöglich anzulegen und bearbeiten zu können, geben wir nach dem Attribut Click <\/b>ein Gleichheitszeichen ein, woraufhin der IntelliSense-Eintrag Bild 3: Anlegen des Ereignishandlers<\/span><\/b><\/p>\n Außerdem finden wir durch das anschließende Betätigen der Taste F12 <\/b>(während sich die Einfügemarke auf dem Attribut befindet) die neu angelegte Prozedur im Codefenster des Klassenmoduls des WPF-Fensters vor (siehe Bild 4).<\/p>\n Bild 4: Der neue Ereignishandler<\/span><\/b><\/p>\n Damit kann der eigentliche Spaß beginnen!<\/p>\n Möchten Sie weiterlesen? Dann lösen Sie Ihr Ticket!<\/span>![\"Unsere](\"..\/fileadmin\/_temp_\/2023_02\/pic_364_002.png\")
<\/p>\n<Window x:Class=\"MainWindow\" ... Title=\"MainWindow\" Height=\"550\" Width=\"550\">\r\n <Grid>\r\n <Grid.ColumnDefinitions>\r\n <ColumnDefinition Width=\"Auto\"><\/ColumnDefinition>\r\n <ColumnDefinition Width=\"Auto\"><\/ColumnDefinition>\r\n <ColumnDefinition Width=\"*\"><\/ColumnDefinition>\r\n <\/Grid.ColumnDefinitions>\r\n <Grid.RowDefinitions>\r\n <RowDefinition Height=\"Auto\"><\/RowDefinition>\r\n <RowDefinition Height=\"Auto\"><\/RowDefinition>\r\n <RowDefinition Height=\"Auto\"><\/RowDefinition>\r\n <RowDefinition Height=\"*\"><\/RowDefinition>\r\n <\/Grid.RowDefinitions>\r\n <Label>Text für den QR-Code:<\/Label>\r\n <TextBox x:Name=\"txtQRCode\" Grid.Column=\"1\" Width=\"400\" Height=\"100\" Margin=\"5\" TextWrapping=\"Wrap\" ><\/TextBox>\r\n <Button x:Name=\"btnQRCodeErstellen\" Grid.Column=\"1\" Grid.Row=\"1\" Width=\"120\" Height=\"30\" Margin=\"5\" \r\n HorizontalAlignment=\"Left\">QR-Code erstellen<\/Button>\r\n <Label Grid.Row=\"2\">QR-Code:<\/Label>\r\n <Border BorderThickness=\"1\" BorderBrush=\"DarkGray\" Grid.Column=\"1\" Grid.Row=\"2\" Margin=\"5\" Width=\"300\" \r\n Height=\"300\" HorizontalAlignment=\"Left\">\r\n <Image x:Name=\"imgQRCode\" Margin=\"5\" Stretch=\"Fill\"><\/Image>\r\n <\/Border>\r\n <\/Grid>\r\n<\/Window><\/pre>\n
Ereignisprozedur hinzufügen<\/h2>\n
![\"Anlegen](\"..\/fileadmin\/_temp_\/2023_02\/pic_364_003.png\")
<\/p>\nClick=\"btnQRCodeErstellen_Click\"<\/pre>\n
![\"Der](\"..\/fileadmin\/_temp_\/2023_02\/pic_364_005.png\")
<\/p>\nHinzufügen einer Bibliothek mit QR-Code-Funktionen<\/h2>\n
\nHier geht es zur Bestellung des Jahresabonnements des Magazins Visual Basic Entwickler<\/strong>:<\/span>
\nZur Bestellung ...<\/a><\/span>
\nDanach greifen Sie sofort auf alle rund 200 Artikel<\/strong> unseres Angebots zu - auch auf diesen hier!<\/span>
\nOder haben Sie bereits Zugangsdaten? Dann loggen Sie sich gleich hier ein:<\/span><\/p>\n<\/div>\n\n\t\n\t