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

Answer 2

这是你想要的：显示条形码，中心的图像（重叠）和条形码后的标签

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

2 个答案: