将元素添加到Zxing条形码Xaml内容页面,Xamarin.forms

Question

我正在使用Zxing.Net.Mobile.Forms来显示条形码.我不确定如何在一个页面上添加其他元素和条形码.我已尝试在c#和xaml中添加它,但我的其他元素没有显示.我想在条形码和条形码上方的图片后添加标签.

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

要指定Content用barcode.因此,XAML遗嘱中的任何内容都将被覆盖.

你可以这样做.添加ZXingBarcodeImageView到您的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"
             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>

然后你可以在构造函数中删除你的代码,使它看起来像:

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

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

额外:如果您正在使用MVVM模式,您还可以绑定BarcodeValue到ViewModel并通过添加BarcodeValue="{Binding CardNumber}"到ZXingBarcodeImageViewXAML和某处设置绑定上下文来消除所有后面的代码.