Jak generować kod QR w .NET MAUI

Czym jest .NET MAUI?

.NET MAUI (Multi-platform App UI) to ewolucja frameworka Xamarin Forms, która pozwala programistom tworzyć natywne interfejsy użytkownika dla wielu platform przy użyciu jednego kodu źródłowego. Dzięki .NET MAUI możesz tworzyć aplikacje na Androida, iOS, macOS, Windows i inne platformy, skracając czas i wysiłek potrzebny do ich opracowania.

Przedstawiamy IronBarcode

IronBarcode to potężna biblioteka do generowania kodów kreskowych i kodów QR dla aplikacji .NET. Zapewnia łatwy w użyciu interfejs API do tworzenia różnych typów kodów kreskowych, w tym kodów QR, z możliwością dostosowania ustawień, takich jak rozmiar, korekcja błędów i opcje kodowania.

Konfiguracja projektu .NET MAUI

Aby rozpocząć, musimy utworzyć nowy projekt .NET MAUI w programie Microsoft Visual Studio 2022. Można również użyć programu Microsoft Visual Studio Code, ale kroki będą się różnić. Zaleca się jednak korzystanie z programu Visual Studio. Aby utworzyć projekt, wykonaj poniższe kroki.

Otwórz program Visual Studio 2022. Pojawi się następujący ekran, jak pokazano poniżej.

Kliknij opcję Utwórz nowy projekt i wyszukaj szablon MAUI, jak pokazano poniżej.

Wybierz szablon aplikacji .NET MAUI i kliknij przycisk Dalej. Pojawi się następujące okno.

Nadaj nazwę projektowi, wybierz lokalizację i kliknij przycisk Dalej. Pojawi się następujące okno, jak pokazano poniżej.

Wybierz .NET Framework. Wybrałem .NET 7, można również wybrać .NET 6.0. Projekt zostanie utworzony zgodnie z poniższym obrazkiem.

Ten samouczek skupia się przede wszystkim na początkowym wdrożeniu aplikacji .NET MAUI na lokalnym komputerze z systemem Windows. Możesz skonfigurować ją na symulatorze Androida lub iOS zgodnie z własnymi wymaganiami, korzystając z tej samej bazy kodu.

Aby wdrożyć aplikację .NET MAUI na lokalnym komputerze z systemem Windows, można wykonać następujące czynności w programie Visual Studio:

1. Upewnij się, że cel debugowania jest ustawiony na "Windows Machine". Jeśli tak nie jest, wybierz "Windows Machine" z menu rozwijanego na pasku narzędzi.

2. Kliknij przycisk "Start Debugging" lub naciśnij klawisz F5, aby skompilować i uruchomić aplikację na komputerze z systemem Windows.

   

Jeśli tryb programisty nie jest włączony na komputerze z systemem Windows, Visual Studio wyświetli monit o jego włączenie. Aby to zrobić, wykonaj następujące kroki:

1. W oknie dialogowym "Włącz tryb programisty dla systemu Windows" wyświetlanym przez Visual Studio znajdź link o nazwie "ustawienia dla programistów".

   

2. Kliknij link "ustawienia dla programistów". Spowoduje to otwarcie aplikacji Ustawienia na komputerze z systemem Windows.

3. Włącz przełącznik w sekcji Tryb programisty, jak pokazano poniżej.

   

Uruchom projekt po włączeniu trybu programisty. Pojawi się następujące okno:

Jest to szablon aplikacji, który jest automatycznie tworzony przez Visual Studio 2022 podczas tworzenia projektu. Teraz zainstalujemy IronBarcode i zmodyfikujemy kod zgodnie z naszymi wymaganiami.

Zainstaluj IronBarcode

Aby zainstalować IronBarcode, otwórz konsolę NuGet Package Manager Console. Aby otworzyć konsolę menedżera pakietów w programie Visual Studio, wykonaj następujące czynności:

1. Uruchom program Visual Studio na komputerze z systemem Windows.
2. Otwórz projekt, nad którym chcesz pracować, lub utwórz nowy projekt.
3. W menu Visual Studio przejdź do "Narzędzia".
4. Z menu rozwijanego wybierz opcję "NuGet Package Manager".
5. Pojawi się kolejne menu rozwijane, w którym należy wybrać opcję "Package Manager Console".

Otworzy się okno konsoli menedżera pakietów, udostępniające interfejs wiersza poleceń do zarządzania pakietami NuGet w projekcie. Wpisz następujące polecenie w konsoli menedżera pakietów, aby zainstalować IronBarcode.

Install-Package BarCode

Spowoduje to dodanie biblioteki IronBarcode do projektu i udostępnienie jej do użytku.

Generator kodów QR .NET MAUI wykorzystujący IronBarcode

Teraz napiszmy kod, aby stworzyć własną aplikację mobilną do generowania kodów QR. Aby wyświetlić wygenerowany kod QR na ekranie, wykorzystamy możliwości platformy .NET MAUI. Otwórz plik MainPage.xaml i zastąp go poniższym kodem.

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="QrCodeGeneratorMAUI.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Label
                Text="Hello!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />

            <Label
                Text="Welcome to QR Code Generator .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to QR Code Generator dot Net Multi platform App U I"
                FontSize="18"
                HorizontalOptions="Center" />

            <Entry x:Name="qrCodeText"
                   Placeholder="Enter QR Code"/>

            <Image
                x:Name="qrCodeImage"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Button
                x:Name="CounterBtn"
                Text="Generate QR Code"
                Clicked="OnButtonClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="QrCodeGeneratorMAUI.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Label
                Text="Hello!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />

            <Label
                Text="Welcome to QR Code Generator .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to QR Code Generator dot Net Multi platform App U I"
                FontSize="18"
                HorizontalOptions="Center" />

            <Entry x:Name="qrCodeText"
                   Placeholder="Enter QR Code"/>

            <Image
                x:Name="qrCodeImage"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Button
                x:Name="CounterBtn"
                Text="Generate QR Code"
                Clicked="OnButtonClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

Powyższy kod XAML przedstawia stronę .NET MAUI, która generuje kody QR. Oto proste wyjaśnienie komponentów .NET MAUI:

• <Label>: Wyświetla tekst na ekranie. W tej aplikacji służy do wyświetlania komunikatu powitalnego i nagłówka w celu przekazania użytkownikowi informacji i instrukcji.
• <Entry>: Udostępnia użytkownikowi pole do wprowadzania tekstu. W tej aplikacji użytkownik może wprowadzić treść, którą chce zakodować w kodzie QR.
• <Image>: Wyświetla obraz na ekranie. W tej aplikacji służy do wyświetlania wygenerowanego obrazu kodu QR użytkownikowi po kliknięciu przycisku generowania.
• <Button>: Oznacza przycisk, który można kliknąć. Pozwala użytkownikowi wywołać akcję po kliknięciu. W tej aplikacji przycisk służy do zainicjowania generowania kodu QR na podstawie treści wprowadzonej przez użytkownika w polu <Entry>.

Te komponenty razem tworzą interfejs, w którym użytkownik może wprowadzić tekst, kliknąć przycisk i zobaczyć odpowiedni kod QR wyświetlony na ekranie.

Teraz napiszmy kod zaplecza do generowania kodu QR. Otwórz plik MainPage.xaml.cs i zaktualizuj klasę kodową w następujący sposób:

using IronBarCode;

namespace QrCodeGeneratorMAUI
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void OnButtonClicked(object sender, EventArgs e)
        {
            // Get the text from the entry field
            string text = qrCodeText.Text;

            // Generate the QR code using the IronBarcode library
            var qrCode = QRCodeWriter.CreateQrCode(text);

            // Convert the QR code to binary JPEG data
            var qrCodeBytes = qrCode.ToJpegBinaryData();

            // Set the QR code image source to display the generated QR code on the UI
            qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
        }
    }
}

using IronBarCode;

namespace QrCodeGeneratorMAUI
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void OnButtonClicked(object sender, EventArgs e)
        {
            // Get the text from the entry field
            string text = qrCodeText.Text;

            // Generate the QR code using the IronBarcode library
            var qrCode = QRCodeWriter.CreateQrCode(text);

            // Convert the QR code to binary JPEG data
            var qrCodeBytes = qrCode.ToJpegBinaryData();

            // Set the QR code image source to display the generated QR code on the UI
            qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
        }
    }
}

Imports IronBarCode

Namespace QrCodeGeneratorMAUI
	Partial Public Class MainPage
		Inherits ContentPage

		Public Sub New()
			InitializeComponent()
		End Sub

		Private Sub OnButtonClicked(ByVal sender As Object, ByVal e As EventArgs)
			' Get the text from the entry field
			Dim text As String = qrCodeText.Text

			' Generate the QR code using the IronBarcode library
			Dim qrCode = QRCodeWriter.CreateQrCode(text)

			' Convert the QR code to binary JPEG data
			Dim qrCodeBytes = qrCode.ToJpegBinaryData()

			' Set the QR code image source to display the generated QR code on the UI
			qrCodeImage.Source = ImageSource.FromStream(Function() New MemoryStream(qrCodeBytes))
		End Sub
	End Class
End Namespace

Oto wyjaśnienie kodu.

1. Metoda OnButtonClicked jest procedurą obsługi zdarzenia kliknięcia przycisku. Po kliknięciu przycisku wykonywana jest ta metoda.
2. Wewnątrz metody OnButtonClicked tekst zawarty w polu wprowadzania qrCodeText jest przypisywany do zmiennej tekstowej.
3. QRCodeWriter.CreateQrCode(text) służy do tworzenia kodu QR na podstawie wprowadzonego tekstu.
4. qrCode.ToJpegBinaryData() konwertuje kod QR na binarne dane JPEG.
5. qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes)) ustawia źródło kontrolki qrCodeImage tak, aby wyświetlała wygenerowany obraz kodu QR.

private void OnButtonClicked(object sender, EventArgs e)
{
    // Get the text from the entry field
    string text = qrCodeText.Text;

    // Generate the QR code using the IronBarcode library
    var qrCode = QRCodeWriter.CreateQrCode(text);

    // Add the text of the QR code value below the generated barcode
    qrCode.AddBarcodeValueTextBelowBarcode();

    // Add an annotation text above the barcode
    qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App");

    // Convert the QR code to binary JPEG data
    var qrCodeBytes = qrCode.ToJpegBinaryData();

    // Set the QR code image source to display the generated QR code on the UI
    qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}

private void OnButtonClicked(object sender, EventArgs e)
{
    // Get the text from the entry field
    string text = qrCodeText.Text;

    // Generate the QR code using the IronBarcode library
    var qrCode = QRCodeWriter.CreateQrCode(text);

    // Add the text of the QR code value below the generated barcode
    qrCode.AddBarcodeValueTextBelowBarcode();

    // Add an annotation text above the barcode
    qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App");

    // Convert the QR code to binary JPEG data
    var qrCodeBytes = qrCode.ToJpegBinaryData();

    // Set the QR code image source to display the generated QR code on the UI
    qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}

Private Sub OnButtonClicked(ByVal sender As Object, ByVal e As EventArgs)
	' Get the text from the entry field
	Dim text As String = qrCodeText.Text

	' Generate the QR code using the IronBarcode library
	Dim qrCode = QRCodeWriter.CreateQrCode(text)

	' Add the text of the QR code value below the generated barcode
	qrCode.AddBarcodeValueTextBelowBarcode()

	' Add an annotation text above the barcode
	qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App")

	' Convert the QR code to binary JPEG data
	Dim qrCodeBytes = qrCode.ToJpegBinaryData()

	' Set the QR code image source to display the generated QR code on the UI
	qrCodeImage.Source = ImageSource.FromStream(Function() New MemoryStream(qrCodeBytes))
End Sub

Generator BarCode .NET MAUI

Możesz również stworzyć generator kodów kreskowych .NET MAUI przy pomocy biblioteki IronBarcode. Wystarczy wprowadzić niewielką zmianę w kodzie i wszystko będzie gotowe, jak pokazano w poniższym przykładzie kodu.

private void OnButtonClicked(object sender, EventArgs e)
{
    // Get the text from the entry field
    string text = barCodeText.Text;

    // Generate the barcode using the IronBarcode library with Code128 encoding
    var barCode = BarcodeWriter.CreateBarcode(text, BarcodeEncoding.Code128);

    // Add the text of the barcode value below the generated barcode
    barCode.AddBarcodeValueTextBelowBarcode();

    // Add an annotation text above the barcode
    barCode.AddAnnotationTextAboveBarcode("My Barcode Generated by .NET MAUI App");

    // Convert the barcode to binary JPEG data
    var qrCodeBytes = barCode.ToJpegBinaryData();

    // Set the barcode image source to display the generated barcode on the UI
    barCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}

private void OnButtonClicked(object sender, EventArgs e)
{
    // Get the text from the entry field
    string text = barCodeText.Text;

    // Generate the barcode using the IronBarcode library with Code128 encoding
    var barCode = BarcodeWriter.CreateBarcode(text, BarcodeEncoding.Code128);

    // Add the text of the barcode value below the generated barcode
    barCode.AddBarcodeValueTextBelowBarcode();

    // Add an annotation text above the barcode
    barCode.AddAnnotationTextAboveBarcode("My Barcode Generated by .NET MAUI App");

    // Convert the barcode to binary JPEG data
    var qrCodeBytes = barCode.ToJpegBinaryData();

    // Set the barcode image source to display the generated barcode on the UI
    barCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}

Private Sub OnButtonClicked(ByVal sender As Object, ByVal e As EventArgs)
	' Get the text from the entry field
	Dim text As String = barCodeText.Text

	' Generate the barcode using the IronBarcode library with Code128 encoding
	Dim barCode = BarcodeWriter.CreateBarcode(text, BarcodeEncoding.Code128)

	' Add the text of the barcode value below the generated barcode
	barCode.AddBarcodeValueTextBelowBarcode()

	' Add an annotation text above the barcode
	barCode.AddAnnotationTextAboveBarcode("My Barcode Generated by .NET MAUI App")

	' Convert the barcode to binary JPEG data
	Dim qrCodeBytes = barCode.ToJpegBinaryData()

	' Set the barcode image source to display the generated barcode on the UI
	barCodeImage.Source = ImageSource.FromStream(Function() New MemoryStream(qrCodeBytes))
End Sub

Wnioski

W tym artykułe dowiedzieliśmy się, jak stworzyć generator kodów QR i generator kodów kreskowych przy użyciu .NET MAUI i biblioteki IronBarcode. Omówiliśmy kroki niezbędne do zainstalowania IronBarcode, utworzenia kodów QR i wyświetlenia ich na ekranie przy użyciu kontrolki obrazu .NET MAUI.

.NET MAUI zapewnia potężny framework do tworzenia aplikacji wielopłatformowych, a IronBarcode upraszcza proces generowania kodów kreskowych i kodów QR. Łącząc te technologie, można tworzyć wszechstronne i wydajne aplikacje, które wykorzystują możliwości nowoczesnych urządzeń.