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

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.

Answer 2

Here is what you want:Showing barcode, an image on the center of it (overlapping), and a label after the barcode
<?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">
<ContentPage.Content>
<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Image Source="{Binding BarcodeImage}"
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0, 0, 1, 1"/>
<Image Source="{Binding OtherImage}"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0.5, 0.5, 100, 100"/>
</AbsoluteLayout>
<Label Text="MyLabel"/>
</ContentPage.Content>
</ContentPage>