如何將海牛工作條碼掃描器集成到堆疊佈局中？

Question

我已經得到了我怎麼能我的stacklayout與特定的測量中集成海牛條碼掃描儀的問題......這裏是我的代碼的圖片...

這裏是我的代碼實際代碼...請幫助我...

<ContentPage.Content> 
     <StackLayout x:Name="layoutWrapper" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"> 
      <ActivityIndicator Color="{StaticResource headerColor}" IsVisible="{Binding IsBusy}" IsRunning="{Binding IsBusy}" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" /> 
      <Grid x:Name="scannerWrapper" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" IsVisible="{Binding IsBusy, Converter={StaticResource not}" > 
       <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> 
        <StackLayout HeightRequest="20"></StackLayout> 
        <StackLayout BackgroundColor="White" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> 
         <Label TextColor="Black" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="Center" Text="{i18n:Translate ScanInventoryLbl}" /> 
        </StackLayout> 
        <StackLayout HeightRequest="40"></StackLayout> 
        <StackLayout BackgroundColor="Black" HorizontalOptions="FillAndExpand" HeightRequest="280" VerticalOptions="FillAndExpand" Spacing="5" Orientation="Horizontal"></StackLayout> 
        <Label VerticalOptions="FillAndExpand" /> 
        <Label VerticalOptions="FillAndExpand" /> 
        <StackLayout BackgroundColor="White" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> 
         <StackLayout x:Name="ipInputLabel" BackgroundColor="White" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Spacing="5" Orientation="Horizontal"> 
          <Label TextColor="Black" HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="Center" Text="{i18n:Translate NoQRLbl}" /> 
         </StackLayout> 
         <Label x:Name="versionAppLabel" FontSize="14" TextColor="#1976D2" VerticalOptions="End" HorizontalTextAlignment="Center" /> 
        </StackLayout> 
        <StackLayout HeightRequest="20"></StackLayout> 
       </StackLayout> 
      </Grid> 
     </StackLayout> 
    </ContentPage.Content> 

Answer 1

您需要使用ViewRenderer並在您的頁面中包含該視圖。 https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/custom-renderer/view/

這裏在這個應用程序https://github.com/manateeworks/xamarin-shopping-cart-demo-app掃描儀實現爲頁面。進行更改並將PageRenderer轉換爲ViewRenderer。

在原生ViewRenderer中使用scanner.ScanInView而不是scanner.ScanWithCallback。下面是從Droid的本地視圖解析器的代碼部分

[assembly: ExportRenderer(typeof(ManateeShoppingCart.CameraPreview), typeof(ManateeShoppingCart.Droid.ScanPageRenderer))] 
 
namespace ManateeShoppingCart.Droid 
 
{ 
 
    public class ScanPageRenderer : ViewRenderer, IScanSuccessCallback 
 
    { 
 
     Scanner scanner; 
 

 
     protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.View> e) 
 
     { 
 
      base.OnElementChanged(e); 
 

 
      if (e.OldElement != null || Element == null) 
 
      { 
 
       return; 
 
      } 
 

 
      scanner = new Scanner(Forms.Context); 
 
      scanner.setInterfaceOrientation("All"); 
 
      scanner.closeScannerOnDecode = false; 
 

 
      customDecoderInit(); 
 

 
      double screenHeight = App.Current.MainPage.Height > App.Current.MainPage.Width ? App.Current.MainPage.Height : App.Current.MainPage.Width; 
 
      double screenWidth = App.Current.MainPage.Height < App.Current.MainPage.Width ? App.Current.MainPage.Height : App.Current.MainPage.Width; ; 
 

 
      float preivewX = (float)((CameraPreview)Element).CameraPreviewX; 
 
      float preivewY = (float)((CameraPreview)Element).CameraPreviewY; 
 
      float previewWidth = (float)((CameraPreview)Element).CameraPreviewWidth; 
 
      float previewHeight = (float)((CameraPreview)Element).CameraPreviewHeight; 
 

 
      scanner.ScanInView(this, new RectangleF((float)(preivewX/screenWidth) * 100, (float)(preivewY/screenHeight) * 100, (float)(previewWidth/screenWidth) * 100, (float)(previewHeight/screenHeight) * 100)); 
 
     }