Xamarin.Forms ShellのFlyoutItem,FlyoutHeader,FlyoutMenuのスタイル(Style)のテンプレート(template)
公式のサンプルのとおり,各テンプレートは以下のとおり
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>