同じことを何度も書きたくない，だからBindableLayout [.NET MAUI]

はじめに

ご覧いただきありがとうございます．

MAUIを使うときに，XAMLでほとんど同じものを何度も作ることがあります．何度も同じコードを書いていませんか？

今回は，MAUIで上の画像のようなフレーム中のラベルテキストだけ違うものをまとめて作る．その方法をご紹介します．

これをマスターすると，複雑なコントロールをたくさん作るのがより簡単になること間違いなしです．

紹介するもの

実物とXAML

実際のもの

XAML

<HorizontalStackLayout Margin="10" >
    <BindableLayout.ItemsSource>
        <x:Array Type="{x:Type x:String}">
            <x:String>A</x:String>
            <x:String>B</x:String>
            <x:String>C</x:String>
            <x:String>D</x:String>
            <x:String>E</x:String>
            <x:String>F</x:String>
        </x:Array>
    </BindableLayout.ItemsSource>

    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Frame BackgroundColor="#EB1D36" Margin="10" HeightRequest="100"
                       BorderColor="#EB1D36">
                <Label Text="{Binding}" WidthRequest="100" 
                           TextColor="#CFD2CF" FontSize="Medium"
                           HorizontalTextAlignment="Center"/>
            </Frame>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</HorizontalStackLayout>