Add elements to Zxing barcode Xaml content page, Xamarin.forms

Question

I am using Zxing.Net.Mobile.Forms to display a barcode. I'm not sure how to add other elements along with the barcode on one page. I've tried adding it in both c# and xaml but my additional elements do not show. I want to add a label after the barcode and a picture above the barcode.

Barcode.xaml.cs

public partial class BarCode : ContentPage
    {
        ZXingBarcodeImageView barcode;
        public BarCode()
        {
            InitializeComponent();

            barcode = new ZXingBarcodeImageView
            {
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,         
                };

                barcode.BarcodeFormat = ZXing.BarcodeFormat.CODE_128;
                barcode.BarcodeOptions.Width = 300;
                barcode.BarcodeOptions.Height = 150;
                barcode.BarcodeOptions.Margin = 10;
                barcode.BarcodeValue = Helpers.Settings.CardNumber;


                Content = barcode;

            }   
    }

Barcode.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="LoyaltyWorx.BarCode"
             BackgroundImage="NewBg.jpg">
    <ContentPage.Content>
        <StackLayout>
        </StackLayout>
    </ContentPage.Content>


</ContentPage>

Answer 1

You are assigning Content with barcode. Hence, anything in the XAML will be overwritten.

You could do this instead. Add the ZXingBarcodeImageView to your XAML like:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:zxing="clr-namespace:ZXing.Net.Mobile.Forms;assembly=ZXing.Net.Mobile.Forms"
             x:Class="LoyaltyWorx.BarCode"
             BackgroundImage="NewBg.jpg">
    <ContentPage.Content>
        <StackLayout>
            <zxing:ZXingBarcodeImageView x:Name="Barcode"
                BarcodeFormat="CODE_128"
                HorizontalOptions="Fill" VerticalOptions="Fill"
                WidthRequest="300" HeightRequest="150" Margin="10" />

            <!-- add other stuff here -->
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Then you can remove your code in the constructor so it looks something like:

public partial class BarCode : ContentPage
{
    public BarCode()
    {
        InitializeComponent();

        Barcode.BarcodeValue = Helpers.Settings.CardNumber;
    }   
}

Bonus: If you are using the MVVM pattern, you could also bind BarcodeValue to a ViewModel and eliminate all the code behind by adding BarcodeValue="{Binding CardNumber}" to the ZXingBarcodeImageView in the XAML and somewhere setting the Binding Context.