Xamarin.FormsでSyncfusionのコントロールを使う
Syncfusionはアプリケーションのための様々なコンポーネントを提供している企業です.
.NETだけでなくJavaScriptやflutter,Vue,Reactなど多くのプラットフォームのコントロールを取り揃えています.
おしゃれなコントロールを作ることはデザイン的にも実装技術的にも簡単ではありません.
それらがライブラリとして提供されているのであれば,使わない手はないでしょう.
通常,このようなコンポーネント製品は有料でライセンスは個人の感覚からすると高価なため,使う機会がなかったりしますが,Syncfusionは条件付きでコンポーネントを無料で使えるCommunity Licenseというライセンスを用意してくれています.
条件は以下の2つだけです.
- 年間の粗利益が1万USD未満
- 5人以下の組織,または個人
これで,全てのコンポーネントを制限なく使うことができ,商業利用も可能です.商業利用についてはまた条件があったりしますが,詳しくは下記のページの下の方のFAQに詳しく書いてあります.
太っ腹ですね.
アカウントの取得
まずは以下のページでアカウントの作成を行います.
https://www.syncfusion.com/products/communitylicensewww.syncfusion.com
「Claim Free License」というボタンを押します.
LinkedInのアカウントを使うことができるということなので,私はそれを使いました.
必要事項を入力して,パスワードを決定してアカウントの作成を完了します.
ライセンスキーの取得と利用
ライセンスキーの取得と利用は公式ドキュメントで手順が詳しく解説されています.
https://help.syncfusion.com/common/essential-studio/licensing/license-keyhelp.syncfusion.com
ライセンスキーの取得
以下のページでライセンスキーを取得します.
https://www.syncfusion.com/account/downloads
ログイン済みであれば以下のページが表示されると思います.
このページに「Get License Key」というリンクがあるので,それをクリックします.
すると,以下のダイアログが開くので,Platformでは今回は「Xamarin」を選択し,VersionではSyncfusionのバージョンを選択します.
「GET LICENSE KEY」ボタンをクリックするとライセンスキーが表示されるので,これをコピーしてください.
ライセンスキーの利用
このライセンスキーを各アプリケーションのソースコード内のしかるべき場所にしかるべき方法で記載することで,コンポーネントを警告なしで使用できるようになります.
その方法は以下のページに詳しく書いてあります.
https://help.syncfusion.com/common/essential-studio/licensing/license-key#how-to-register-the-syncfusion-license-keyhelp.syncfusion.com
例えば,Xamarin.Formsについては以下のように書かれています.
App.xaml.cs
内のAppクラスのコンストラクタ内に以下のように1行追加するだけです.
InitializeComponent()
よりも前でなければなりません.
public App() { //Register Syncfusion license Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("Your License Code"); InitializeComponent(); MainPage = new MainPage(); }
使ってみる
さて,Syncfusionはドキュメントも豊富なので,使いたいコントロールがあればドキュメントを探すと良いです.
https://help.syncfusion.com/?_ga=2.2938168.969540492.1583405194-609945227.1572182030help.syncfusion.com
まずはドキュメントの指示にしたがって,その後で自分で色々変更して試してみると良いでしょう.
こんな感じで素敵なコントロールを使うことができます.
<gauge:SfCircularGauge> <gauge:SfCircularGauge.Headers> <gauge:Header ForegroundColor="Black" Text="Speedometer" TextSize="20" /> </gauge:SfCircularGauge.Headers> <gauge:SfCircularGauge.Scales> <gauge:Scale> <gauge:Scale.Ranges> <gauge:Range EndValue="{Binding Source={x:Reference slider}, Path=Value}" StartValue="0" /> </gauge:Scale.Ranges> <gauge:Scale.Pointers> <gauge:NeedlePointer Value="{Binding Source={x:Reference slider}, Path=Value}" /> <gauge:RangePointer Value="50" /> <gauge:MarkerPointer Value="{Binding Source={x:Reference slider}, Path=Value}" /> </gauge:Scale.Pointers> </gauge:Scale> </gauge:SfCircularGauge.Scales> </gauge:SfCircularGauge>
SyncfusionのVS拡張をインストールする
Syncfusionのコントロールを使いやすくするために,拡張機能をインストールします.
Visual StudioのメニューのExtensions(拡張機能)
からXamarin Extensions - Syncfusion
を検索してインストールします.
Syncfusionのツールボックスを表示する
拡張機能をインストールすると,メニューのExtensions
にSyncfusion
という項目が追加されるので,そこから以下のようにたどってSyncfusionのツールボックスを表示します.
するとこのようにVisual Studioの左側にSyncfusion Xamarin Toolbox
というタブが表示され,それを開くと以下のようにXamarin.Forms用の各種コントロールの一覧が表示されます.
ここから使いたいコントロールをXamlエディタ上にドラッグ・アンド・ドロップすると,コントロールのタグと,名前空間の追加,パッケージのインストールなどが自動的に行われます.
このようにすぐにコントロールを使い始めることができます.
Mono.Android.Export.dllへの参照がない,と言われたときは
以下のようにMono.Android.Export.dll
への参照がないと言われたときは,参照を追加しましょう.
Androidプロジェクトの参照で右クリックしてコンテキストメニューからAdd Reference
を選択します.
Assemblies
タブを選択して,Mono.Android.Export
に✓をつけて,「OK」ボタンを押します.