How to style my FlyoutItems like this example?

Question

I'm using the Xamarin Forms Shell. I've created multiple FlyoutItems with icons. How can I make it look like this (rounded corner and margin for the FlyoutItems and the certain FlyOutItems to the bottom)?: ![74331-screenshot.jpg][1] Now I have this: ![74297-menu.png][2] I'm using the following Xaml code: <Shell.ItemTemplate> <DataTemplate> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroupList> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"> <VisualState.Setters> <Setter Property="BackgroundColor" Value="White" /> <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Black" /> <Setter TargetName="FlyoutItemIcon" Property="Label.TextColor" Value="Gray" /> </VisualState.Setters> </VisualState> <VisualState x:Name="Selected"> <VisualState.Setters> <Setter Property="BackgroundColor" Value="{StaticResource Secondary}" /> <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{StaticResource Primary}" /> <Setter TargetName="FlyoutItemIcon" Property="Label.TextColor" Value="{StaticResource Primary}" /> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateGroupList> </VisualStateManager.VisualStateGroups> <Grid.ColumnDefinitions> <ColumnDefinition Width="0.2*" /> <ColumnDefinition Width="0.8*" /> </Grid.ColumnDefinitions> <Label x:Name="FlyoutItemIcon" FontFamily="Material" Text="{Binding IconGlyph}" TextColor="{Binding Source={x:Reference FlyoutItemIcon} ,Path=TextColor}" FontSize="24" Margin="10"/> <Label x:Name="FlyoutItemLabel" Grid.Column="1" Text="{Binding Title}" VerticalTextAlignment="Center" /> </Grid> </DataTemplate> </Shell.ItemTemplate> <!-- When the Flyout is visible this defines the content to display in the flyout. FlyoutDisplayOptions="AsMultipleItems" will create a separate flyout item for each child element https://learn.microsoft.com/dotnet/api/xamarin.forms.shellgroupitem.flyoutdisplayoptions?view=xamarin-forms --> <controls:FlyoutItemIconFont Title="Home" IconGlyph="{StaticResource IconHome}"> <ShellContent Route="HomePage" ContentTemplate="{DataTemplate local:HomePage}" /> </controls:FlyoutItemIconFont> <controls:FlyoutItemIconFont Title="Instellingen" IconGlyph="{StaticResource IconInstellingen}"> <ShellContent Route="SettingsPage" ContentTemplate="{DataTemplate local:SettingsPage}" /> </controls:FlyoutItemIconFont> [1]: /api/attachments/74331-screenshot.jpg?platform=QnA [2]: /api/attachments/74297-menu.png?platform=QnA

Answer 1

I tried your code, but I don't see the item in the footer.

 <Shell.ItemTemplate>
        <DataTemplate>
            <Frame CornerRadius="5" Padding="0">
                <Grid ColumnDefinitions="0.2*,0.8*" VerticalOptions="FillAndExpand" BackgroundColor="LightBlue">
                    <Image Source="{Binding FlyoutIcon}"
                    Margin="5"
                    HeightRequest="45" />
                    <Label Grid.Column="1"
                    Text="{Binding Title}"
                    FontAttributes="Italic"
                    VerticalTextAlignment="Center" />
                </Grid>
            </Frame>
        </DataTemplate>
    </Shell.ItemTemplate>



    <controls:FlyoutItemIconFont Title="Home" IconGlyph="{StaticResource IconHome}">
        <ShellContent Route="HomePage" ContentTemplate="{DataTemplate local:HomePage}" />
    </controls:FlyoutItemIconFont>

    <Shell.FlyoutFooter>
        <controls:FlyoutItemIconFont Title="Instellingen" IconGlyph="{StaticResource IconInstellingen}">
            <ShellContent Route="SettingsPage" ContentTemplate="{DataTemplate local:SettingsPage}" />
        </controls:FlyoutItemIconFont>
    </Shell.FlyoutFooter>

</Shell>

Answer 2

Hello,​

Welcome to our Microsoft Q&A platform!

rounded corner and margin for the FlyoutItems and the certain FlyOutItems to the bottom

The appearance of each FlyoutItem can be customized by setting the Shell.ItemTemplate attached property to a DataTemplate, try to custom the item template to add the corner. And Xamarin.Forms.Shell provides the FlyoutFooter which is the content that optionally appears at the bottom of the flyout, you could use it to display the views at bottom.

   <Shell.ItemTemplate>  
       <DataTemplate>  
           <Frame CornerRadius="5" Padding="0">  
               <Grid ColumnDefinitions="0.2*,0.8*" VerticalOptions="FillAndExpand" BackgroundColor="LightBlue">  
                   <Image Source="{Binding FlyoutIcon}"  
                       Margin="5"  
                       HeightRequest="45" />  
                   <Label Grid.Column="1"  
                       Text="{Binding Title}"  
                       FontAttributes="Italic"  
                       VerticalTextAlignment="Center" />  
               </Grid>  
           </Frame>  
       </DataTemplate>  
   </Shell.ItemTemplate>  
     
   <Shell.FlyoutFooter>  
       <!--display the content-->  
   </Shell.FlyoutFooter>  

Tutorial: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/flyout

Best Regards,

Jarvan Zhang

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.