Skip to content

Latest commit

 

History

History
105 lines (84 loc) · 3.33 KB

data-binding-qrcode-net-maui.md

File metadata and controls

105 lines (84 loc) · 3.33 KB
title description type page_title slug tags res_type ticketid
Data Binding with QRCode in .NET MAUI Applications
Learn how to bind a QRCode to a property in the ViewModel in a .NET MAUI application using the Telerik Barcode component.
how-to
How to Implement Data Binding for QRCode in .NET MAUI
data-binding-qrcode-net-maui
barcode, qrcode, databinding, .net maui, viewmodel, bindingcontext
kb
1680174

Environment

Product Barcode for .NET MAUI
Version 9.0.0

Description

As with any other bindable property, you can bind the Value property of the RadBarcode to a property in the view model, allowing dynamic updates of the QR code in the UI.

Solution

To achieve dynamic updates of a QRCode in a .NET MAUI application, follow these steps:

  1. Ensure the RadBarcode is properly configured in your XAML with the correct binding to the view model property. Use the Value attribute to bind to the view model property.
<telerik:RadBarcode WidthRequest="160" HeightRequest="160"
                    HorizontalOptions="Center" VerticalOptions="Center"
                    Margin="0, 10, 0, 0" Value="{Binding SelectedCity}">
    <telerik:RadBarcode.Symbology>
        <telerik:QRCode SizingMode="Stretch" CodeMode="Byte"
                        ErrorCorrectionLevel="H" ECIMode="ISO8859_1"
                        FNC1Mode="SecondPosition" ApplicationIndicator="00"/>
    </telerik:RadBarcode.Symbology>
</telerik:RadBarcode>
  1. In your view model, implement the property to which the Barcode's Value is bound. Ensure this property notifies the UI of changes, typically by implementing the INotifyPropertyChanged interface.
public class MainPageViewModel : Telerik.Maui.Controls.NotifyPropertyChangedBase
{
    private string selectedCity;

    public ObservableCollection<string> Cities { get; set; }

    public string SelectedCity
    {
        get => selectedCity;
        set => UpdateValue(ref selectedCity, value);
    }

    public MainPageViewModel()
    {
        Cities = new ObservableCollection<string>
        {
            "Madrid", "Los Angeles", "Paris", "Beijing",
            "Singapore", "New Delhi", "Bangkok", "Berlin"
        };

        SelectedCity = Cities.FirstOrDefault();
    }
}
  1. Bind the view model to the View's BindingContext to establish the data binding.
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        BindingContext = new MainPageViewModel();
    }
}
  1. Optionally, use a control like RadComboBox to change the selected city and see the QRCode update in real-time.
<telerik:RadComboBox ItemsSource="{Binding Cities}" 
                     SelectedItem="{Binding SelectedCity, Mode=TwoWay}"
                     WidthRequest="200" HorizontalOptions="Center"
                     VerticalOptions="Center" Grid.Row="1"/>

See Also