Mobile Blazor Bindingsでマインスイーパーを作る

先週末ちょっと時間があったので、Mobile Blazor Bindingsを触ってみる目的でマインスイーパーを作りました。

こんな感じです。

Demo - Android

Android版

Demo - iOS

iOS版

コード

ザっと書き殴りしただけの汚いコードなので一部だけ…。

ContentPage

メインページのRazor

<ContentPage>
    <StackLayout Margin="new Thickness(20)">
        <TitleComponent />
        <GameStatusComponent GameStatusText="@GameStatusText"
                             GameStatusTextColor="@StatusColor"
                             PlayTime="@PlayTime.ToString()"/>
        <GameSettingComponent Size="@MapSize" BombCount="@BombCount"/>            
        
        <Button Text="Start" OnClick="@onClickStartButton" TextColor="@Color.Red" />

        <GameBoardComponent MapSize="@MapSize" GameEndEvent="gameEnd" />
    </StackLayout>
</ContentPage>

GameStatusComponent

ゲームの状況を表示するコンポーネントです。

<StackLayout Orientation="StackOrientation.Horizontal" Margin="10">
    <Label Text="Status : " />
    <Label Text="@GameStatusText" TextColor="@GameStatusTextColor" />
    <Label Text="@("Play Time : " + PlayTime + "[s]")" HorizontalOptions="LayoutOptions.EndAndExpand" />
</StackLayout>

@code {
    [Parameter]
    public string GameStatusText { get; set; }
    [Parameter]
    public Color GameStatusTextColor { get; set; }
    [Parameter]
    public string PlayTime { get; set; }
}

当たり前ですがRazor構文です。
なんとなくで読めちゃいますよね。

所感

• Hot Reloadは未対応。
  Preview2で対応するとのこと。

• Debug実行できるしBreakも張れる。
  Razorのインテリセンスが普通に効く！

• iOSで起動しないIssueはFix済み。
  Preview2でFixされたTemplateが公開される予定。

Xamarin知らないからちょっと厳しいかな～と思って書き始めましたが、Razor構文のおかげでサクサク書けました。
※Mobile Blazor Bindingsの中身はXamarinです。

私は業務でWPFもASP.NETも使っていますが、Xamlってちょっとした画面を作るだけでも結構コードを書かないといけない点がちょっぴり不満でした。BehaviorだったりTriggerだったりINotifyPropertyChangedだったり。この"お気持ち"はBlazorを触り始めてからより顕著に感じるようになりました。
※RazorよりXamlの方が優れているといった優劣をつける意図はありません！

私のような思いを持っているような人にとってはMobile Blazor Bindingsが成熟してくれば、選択肢に入るようになる…かもしれませんね。

あと、もうすぐPreview2がくるっぽいですね。

github.com

以上です。