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

【问题标题】：Add elements to Zxing barcode Xaml content page, Xamarin.forms将元素添加到 Zxing 条码 Xaml 内容页面，Xamarin.forms
【发布时间】：2018-06-30 20:39:58
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： xamarin xamarin.forms zxing

【解决方案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 并在某处设置绑定上下文来消除所有代码。

【讨论】：

【解决方案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>

【讨论】：