サイトアイコン 知的好奇心

Xamarin.Formsで洗練されたコンポーネントを無料で使用する方法

確認飛行物体

Xamarin.Formsで洗練されたコンポーネントを無料で使用する方法をご紹介します。
「Syncfusion Community License」でSyncfusionのコンポーネントを使用します。

条件

Syncfusion Community License

SyncfusionのCOMMUNITY LICENSEについてのFAQ抜粋です。
ざっくり言うと、個人や収益規模の小さい企業であれば、ずっと無料で商用アプリケーションにも使用できます。

COMMUNITY LICENSEとは？

コミュニティライセンスは、個々の開発者や中小企業向けのすべてのSyncfusion製品への無料アクセスを提供します。

対象者は？

「年間総収益が100万米ドル未満で、開発者が5人以下の企業および個人」です。

製品を使用して商用アプリケーションを構築できますか？

はい。

ライセンスはいつまで有効ですか？

コミュニティライセンスの有効期限はありません。新しいバージョンのサポートと更新は引き続き受けられます。

Community Licenseの取得

サインイン等

以下のサイトにアクセスして、「CLAIM FREE LICENSE」というボタンを押します。

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

以下のような画面が表示されます。

LinkedIn または XING でサインインします。

LinkedIn、XINGはともにビジネス向けのSNSです。
アメリカやヨーロッパでは名刺代わりに使用されているようです。

どちらのアカウントも持っていない場合、どちらか一方のアカウントを作成して、上記のページからSyncfusionにサインインします。
その後、画面の流れに沿って各種情報設定を行うと、以下のようなメールが届いたり、以下のような画面が表示されます。

キーの生成

メールの「License Downloads and Keys 」というリンクを押すと、ブラウザで以下のような画面が表示されます。

画面真ん中下の「Get License Key」というリンクを押します。

Get License Keyという画面が開くので、以下を選択してGET LICENSE KEYボタンを押します。

License Keyが表示されるので、コピーしておきます。

以上でライセンスキーの取得は完了です。

実装例

パッケージのインストール

今回は例として「SfTextInputLayout」を用いて入力フィールドを使用してみます。

NuGetで共通プロジェクトに「Syncfusion.Xamarin.Core」をインストールします。

ライセンスキーの記述

App.xaml.csにライセンスキーの記述を行います。

public App()に以下のコードを追加します。

App.xaml.cs

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace Layout
{
    public partial class App : Application
    {
        public App()
        {
            Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR LICENSE KEY");

            InitializeComponent();

            MainPage = new MainPage();
        }

        protected override void OnStart()
        {
        }

        protected override void OnSleep()
        {
        }

        protected override void OnResume()
        {
        }
    }
}

入力フィールド（SfTextInputLayout）

<ContentPage>タグに以下の属性を追加します。

MainPage.xamlに、以下３つを記述します。

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:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:inputLayout="clr-namespace:Syncfusion.XForms.TextInputLayout;assembly=Syncfusion.Core.XForms"
             mc:Ignorable="d"
             x:Class="Layout.MainPage">

    <Grid HorizontalOptions="Center" VerticalOptions="Start" WidthRequest="320" RowSpacing="20">
        
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <inputLayout:SfTextInputLayout Hint="名前" HelperText="名前を入力してください。" Grid.Row="0" >
            <Entry />
        </inputLayout:SfTextInputLayout>

        <inputLayout:SfTextInputLayout Hint="メモ" Grid.Row="1" >
            <Editor AutoSize="TextChanges" />
        </inputLayout:SfTextInputLayout>

        <inputLayout:SfTextInputLayout ContainerType="None" Hint="年月日" 
                               HelperText="年月日を選択してください。" Grid.Row="2" >
            <DatePicker MinimumDate="01/01/2019"
            MaximumDate="12/31/2019" 
            Date="11/12/2019"/>
        </inputLayout:SfTextInputLayout>

    </Grid>

</ContentPage>

実行結果

以下のように、良い感じな入力フィールドが表示されます。

フォーカスが当たると、Hintで設定した値がフィールドの上部に小さい文字で表示されるようになります。

年月日選択は以下のような感じです。

ライセンスキーが設定されていない場合

ライセンスキーが設定されていない場合、アプリ起動時に以下のような表示になります。

参考

Syncfusion

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

Syncfusion Essential Studio Licensing Overview

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

モバイルバージョンを終了