2016/08/13(土)Xamarin + ZXing.Net.MobileでQRコードを読む

xamarin / UWPでQRコードを読み取るコードを実践してみました。
QRコードリーダーは有名なZXing(ゼブラクロッシング)と言うライブラリがあります。
このZxingがxamarinで使用できるようにしたZxing.Net.Mobileがあり、xamarinでも容易にQRコードを扱えます。

・・・と書きつつも私は容易に扱えませんでした。
Qiitaの記事を読むとNuGetからZxing.Net.Mobileを取得して容易に実行できるように書かれていたのですが・・・。

私が試した手順は以下です。

1. Blank Xaml App (Xamarin.Forms Portable)を選択する
001a.png


2. インストールされているSDKに適したバージョンを選択する
002a.png


3. 各プロジェクトのプロパティを開きターゲットを変更する
プロパティを開き、変更を選択する
003b.png


以下のようにターゲットを変更する
003.png


4. Zxing.MobileをNuGetで追加する
004a.png


5. TestZXingMobile.UWPのCapabilityにWebCameraを追加する
004b.png


6. TestZXingMobile(移植可能)のApp.xaml.csを編集しMainPageをNavigationPageに変更する
public App()
{
      InitializeComponent();

      //MainPage = new TestZXingMobile.MainPage();
      MainPage = new NavigationPage(new TestZXingMobile.MainPage());
}
7. TestZXingMobile(移植可能)のMainPageにボタンを追加します。
MainPage.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:local="clr-namespace:TestZXingMobile"
             x:Class="TestZXingMobile.MainPage">
  <!-- ここを追加 -->
  <Button Text="QRコードをスキャンする"
           VerticalOptions="Center"
           HorizontalOptions="Center" 
           Clicked="ScanButtonClicked"/>

</ContentPage>
MainPage.xaml.cs
//先頭に参照を追加
using ZXing.Net.Mobile.Forms;
//ボタンの応答処理を追加
async void ScanButtonClicked(object sender, EventArgs s)
{
    // スキャナページの設定
    var scanPage = new ZXingScannerPage()
    {
        DefaultOverlayTopText = "バーコードを読み取ります",
        DefaultOverlayBottomText = "",
    };
    // スキャナページを表示
    await Navigation.PushAsync(scanPage);

    // データが取れると発火
    scanPage.OnScanResult += (result) =>
    {
        // スキャン停止
        scanPage.IsScanning = false;

        // PopAsyncで元のページに戻り、結果をダイアログで表示
        Device.BeginInvokeOnMainThread(async () =>
        {
            await Navigation.PopAsync();
            await DisplayAlert("スキャン完了", result.Text, "OK");
        });
    };
}
8.TestZXingMobile.UWPのMainPage.xaml.csにZxing.Mobileの初期化コードを記載します。
public MainPage()
{
    this.InitializeComponent();
    //初期化処理を追加
    ZXing.Net.Mobile.Forms.WindowsUniversal.ZXingScannerViewRenderer.Init();

    LoadApplication(new QRReader.App());
}
9. TestZXingMobile.UWPのビルドと配置を行う。
005.png

006.png


10. 配置されたアプリを実行する
007a.png


起動後、「QRコードをスキャンする」ボタンをタップすると、以下の例外が発生しクラッシュします。
例外がスローされました: 'System.IO.FileLoadException' (mscorlib.ni.dll の中)
・・・と、NuGetから取得したZxing.Net.Mobileで動作を確認できませんでした。
しかし、GitHubから入手したライブラリをコンパイルし組み込んだ場合は動作可能でした。
どうやら、UWPアプリを作成した時のSDKのバージョンに依存してしまうなどの問題があるようです。

2015/08/16(日)[UWP/Win10]Universal Windows Application (UWP)用WrapPanel

Windows10から使用できるアプリケーション形式のUWPにはWrapPanelがありません。
これは、Windows8/8.1のころからあるWindowsRuntime用アプリケーションからのようです。

さいわいなのことにSilverLight用のWrapPanelを移植している以下のプロジェクトがあります。

Q42.WinRT
https://github.com/Q42/Q42.WinRT/blob/master/Q42.WinRT/Controls/WrapPanel.cs

WinRT XAML Toolkit
https://winrtxamltoolkit.codeplex.com/

それぞれのプロジェクトはWindows8/8.1用のプロジェクトですが、WrapPanelのソースコードのみを取り出して使用することができます。

Q42.WinRTを使用した場合の使用例
1. Q42.WinRTのGitHubからWrapPanel.csを入手します。
2. 使用するプロジェクトにWrapPanel.csを追加します。
3. 使用するPageのXAMLにネームスペースの参照を追加します。
xmlns:Q42="using:Q42.WinRT.Controls"
4. ListBoxなどのPanelにWrapPanelを指定します。
<ListBox Name="listWithWrapPanel" >
    <!-- PanelにWrapPanelを指定する -->
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <Q42:WrapPanel />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>
# 全体のサンプルコード
以下からダウンロードしてください。

 ダウンロード


OK キャンセル 確認 その他