question

FerronNijland-2719 avatar image
0 Votes"
FerronNijland-2719 asked ·

How to style my FlyoutItems like this example?

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


Now I have this:

74297-menu.png

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://docs.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>  


dotnet-xamarinformsdotnet-xamarinforms-xaml
menu.png (12.4 KiB)
screenshot.jpg (48.7 KiB)
menu.png (12.4 KiB)
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

JarvanZhang-MSFT avatar image
0 Votes"
JarvanZhang-MSFT answered ·

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://docs.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.


· 6 ·
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thanks, I will try.
I'm getting the following error for the FlyoutFooter.
I'm using Xamarin.Forms 4.8

The attachable property 'FlyoutFooter' was not found in type 'Shell'


0 Votes 0 ·

The FlyoutFooter is introduced in Xamarin.Forms 5+ version, please update the package to the lastest stable version to use the function.

74333-image.png


0 Votes 0 ·
image.png (8.1 KiB)

That's a shame! I need to support Android 9 and Form v5 support starts from Android 10 :(
Do you have an example for v4?

0 Votes 0 ·
Show more comments
FerronNijland-2719 avatar image
0 Votes"
FerronNijland-2719 answered ·

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>
· 1 ·
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

The appearance of FlyoutFooter can only be defined by a View. It doesn't support to add the ShellContent to the footer. Try using listView or other views to display the bottom items and perform the navigation.

<Shell.FlyoutFooter>
    <ContentView>
        <StackLayout>
            <Label Text="item_1"/>
            <Label Text="item_2"/>
            <Label Text="item_3"/>
        </StackLayout>
    </ContentView>
</Shell.FlyoutFooter>



0 Votes 0 ·