shuhelohelo’s blog

Xamarin.Forms多めです.

Xamarin.Forms ShellのFlyoutItem,FlyoutHeader,FlyoutMenuのスタイル(Style)のテンプレート(template)

docs.microsoft.com

github.com

公式のサンプルのとおり,各テンプレートは以下のとおり

FlyoutHeaderのテンプレート

    <!-- Template for FlyoutHeader -->
    <!-- Not required, as the FlyoutHeader is set above -->
    <Shell.FlyoutHeaderTemplate>
        <DataTemplate>
            <Grid BackgroundColor="Black"
                  HeightRequest="200">
                <Image Aspect="AspectFill" 
                       Source="xamarinstore.jpg" 
                       Opacity="0.6" />
                <Label Text="Animals" 
                       TextColor="White" 
                       FontAttributes="Bold" 
                       HorizontalTextAlignment="Center"
                       VerticalTextAlignment="Center" />
            </Grid>            
        </DataTemplate>
    </Shell.FlyoutHeaderTemplate>

FlyoutItemのテンプレート

これをみると,ShellのItemsSourceとしてFlyoutItemたちが渡され,FlyoutItem(もしくはTab)のプロパティがここでバインディングされる.

なので,<Image Source="{Binding Icon}"このIconではで指定したアイコン,画像が使用される.

    <!-- Template each FlyoutItem -->
    <Shell.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.2*" />
                    <ColumnDefinition Width="0.8*" />
                </Grid.ColumnDefinitions>
                <Image Source="{Binding Icon}"
                       Margin="5"
                       HeightRequest="45" />
                <Label Grid.Column="1"
                       Text="{Binding Title}"
                       FontAttributes="Italic"
                       VerticalTextAlignment="Center" /> 
            </Grid>
        </DataTemplate>
    </Shell.ItemTemplate>

MenuItemのテンプレート

    <!-- Template each MenuItem -->
    <Shell.MenuItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.2*" />
                    <ColumnDefinition Width="0.8*" />
                </Grid.ColumnDefinitions>
                <Image Source="{Binding Icon}"
                       Margin="5"
                       HeightRequest="45" />
                <Label Grid.Column="1"
                       Text="{Binding Text}"
                       FontAttributes="Italic"
                       VerticalTextAlignment="Center" /> 
            </Grid>
        </DataTemplate>
    </Shell.MenuItemTemplate>