🐥note.

小鳥とMicrosoft <3 なエンジニアの技術Blog📚

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

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

こんな感じです。

Demo - Android

f:id:piyo_esq:20200208120901g:plain
Android

Demo - iOS

f:id:piyo_esq:20200208120944g:plain
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です。

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

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

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

github.com

以上です。