Syncfusionはアプリケーションのための様々なコンポーネントを提供している企業です.

.NETだけでなくJavaScriptやflutter,Vue,Reactなど多くのプラットフォームのコントロールを取り揃えています.

f:id:shuhelohelo:20200306004510p:plain

おしゃれなコントロールを作ることはデザイン的にも実装技術的にも簡単ではありません.

f:id:shuhelohelo:20200306005023p:plain

それらがライブラリとして提供されているのであれば,使わない手はないでしょう.

通常,このようなコンポーネント製品は有料でライセンスは個人の感覚からすると高価なため,使う機会がなかったりしますが,Syncfusionは条件付きでコンポーネントを無料で使えるCommunity Licenseというライセンスを用意してくれています.

条件は以下の2つだけです.

年間の粗利益が1万USD未満
5人以下の組織,または個人

これで,全てのコンポーネントを制限なく使うことができ,商業利用も可能です.商業利用についてはまた条件があったりしますが,詳しくは下記のページの下の方のFAQに詳しく書いてあります.

太っ腹ですね.

アカウントの取得

まずは以下のページでアカウントの作成を行います.

https://www.syncfusion.com/products/communitylicensewww.syncfusion.com

｢Claim Free License｣というボタンを押します.

LinkedInのアカウントを使うことができるということなので,私はそれを使いました.

f:id:shuhelohelo:20200306005808p:plain

必要事項を入力して,パスワードを決定してアカウントの作成を完了します.

ライセンスキーの取得と利用

ライセンスキーの取得と利用は公式ドキュメントで手順が詳しく解説されています.

https://help.syncfusion.com/common/essential-studio/licensing/license-keyhelp.syncfusion.com

ライセンスキーの取得

以下のページでライセンスキーを取得します.

https://www.syncfusion.com/account/downloads

ログイン済みであれば以下のページが表示されると思います.

f:id:shuhelohelo:20200317160100p:plain

このページに｢Get License Key｣というリンクがあるので,それをクリックします.

f:id:shuhelohelo:20200317160254p:plain

すると,以下のダイアログが開くので,Platformでは今回は｢Xamarin｣を選択し,VersionではSyncfusionのバージョンを選択します.

f:id:shuhelohelo:20200704125550p:plain

｢GET LICENSE KEY｣ボタンをクリックするとライセンスキーが表示されるので,これをコピーしてください.

ライセンスキーの利用

このライセンスキーを各アプリケーションのソースコード内のしかるべき場所にしかるべき方法で記載することで,コンポーネントを警告なしで使用できるようになります.

その方法は以下のページに詳しく書いてあります.

https://help.syncfusion.com/common/essential-studio/licensing/license-key#how-to-register-the-syncfusion-license-keyhelp.syncfusion.com

例えば,Xamarin.Formsについては以下のように書かれています. f:id:shuhelohelo:20200704130108p:plain

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

まずはドキュメントの指示にしたがって,その後で自分で色々変更して試してみると良いでしょう.

こんな感じで素敵なコントロールを使うことができます.

f:id:shuhelohelo:20200306012441p:plain

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