将元素添加到 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}" 添加到 ZXingBarcodeImageView 来消除后面的所有代码 XAML 并在某处设置绑定上下文。

Answer 2

这是你的want:Showing条形码，中间有一个图像（重叠），条形码后面有一个标签

<?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>

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

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

zxing

xamarin

xamarin.forms