Forum Xamarin Xamarin.Forms

Shell FlyOut Menu Space between title and icon

Good Day,

I have searched the internet for a week and i am tired already. Here i give in and ask for help

There is a huge amount of space between the title and icon in my flyout item in Xamarin Shell.

I am using Xamarin forms 4.5.0.356

and here is my AppShell.xaml code

==code start

<TabBar Route="main" Style="{StaticResource BaseStyle}">
    <Tab Title="Home" Icon="ic_close_orange.png">
        <ShellContent ContentTemplate="{DataTemplate home:Landing}" />
    </Tab>
    <Tab Title="My Trips" Icon="ic_drive_eta">
        <ShellContent ContentTemplate="{DataTemplate home:MyTripsAndRequests}" />

    </Tab>
    <Tab Title="My Requests" Icon="ic_commute.png">
        <ShellContent ContentTemplate="{DataTemplate home:MyRequestsPage}" />

    </Tab>
    <Tab Title="Create Trip" Icon="ic_menu">
        <ShellContent ContentTemplate="{DataTemplate carsFolder:AddCars}" />
    </Tab>


</FlyoutItem>
<FlyoutItem Title="Create New Trip" Icon="ic_drive_eta">
    <ShellContent ContentTemplate="{DataTemplate home:MyTripsAndRequests}" />

</FlyoutItem>
<FlyoutItem Title="My Requests" Icon="ic_commute.png">
    <ShellContent ContentTemplate="{DataTemplate home:MyRequestsPage}" />

</FlyoutItem>
<FlyoutItem Title="My Profile" Icon="ic_menu">
    <ShellContent ContentTemplate="{DataTemplate carsFolder:AddCars}" />
</FlyoutItem>



<MenuItem
    Command="{Binding GoToNewtripsPageCommand}"
    IconImageSource="ic_commute.png"
    Text="Create new trip" />
<MenuItem Text="Create new Route" IconImageSource="ic_commute.png"  />
<MenuItem IconImageSource="ic_commute.png" Text="Create new vehicle" />

<Shell.FlyoutHeader>
    <Grid HeightRequest="300">
        <Image
            Aspect="AspectFill"
            HeightRequest="300"
            HorizontalOptions="FillAndExpand"
            Source="ic_menu" />

        <Label
            HorizontalOptions="Center"
            HorizontalTextAlignment="Center"
            VerticalOptions="Center"
            VerticalTextAlignment="Center">
            <Label.FormattedText>
                <FormattedString>
                    <FormattedString.Spans>

                        <Span
                            FontSize="48"
                            Text="kMn"
                            TextColor="White" />
                        <Span Text="&#10;" />
                        <Span Text="Know My Neighbour" TextColor="White" />
                    </FormattedString.Spans>
                </FormattedString>
            </Label.FormattedText>
        </Label>
    </Grid>
</Shell.FlyoutHeader>

==code end

all the tutorials online seem to get it right. please advise. its been a weeek of fruitless search

Tagged:

Best Answer

Answers

  • ansotoansoto Member ✭✭

    @loladeking said:

    <Shell.FlyoutHeader>
        <Grid HeightRequest="300">
            <Image
                Aspect="AspectFill"
                HeightRequest="300"
                HorizontalOptions="FillAndExpand"
                Source="ic_menu" />
    

    Changing the HeightRequest value of the Grid in your FlyoutHeader is controlling the size of that header space. Lowering it from 300 will show a difference with this space.

  • loladekingloladeking Member ✭✭

    @ansoto said:

    @loladeking said:

    <Shell.FlyoutHeader>
        <Grid HeightRequest="300">
            <Image
                Aspect="AspectFill"
                HeightRequest="300"
                HorizontalOptions="FillAndExpand"
                Source="ic_menu" />
    

    Changing the HeightRequest value of the Grid in your FlyoutHeader is controlling the size of that header space. Lowering it from 300 will show a difference with this space.

    Thank you for your answer. i was referring to the space between the icon and the menu items e.g. Create New Trip

  • loladekingloladeking Member ✭✭

    @ansoto said:

    @loladeking said:

    <Shell.FlyoutHeader>
        <Grid HeightRequest="300">
            <Image
                Aspect="AspectFill"
                HeightRequest="300"
                HorizontalOptions="FillAndExpand"
                Source="ic_menu" />
    

    Changing the HeightRequest value of the Grid in your FlyoutHeader is controlling the size of that header space. Lowering it from 300 will show a difference with this space.

    i was referring to this space between image and title here in the menu. all tutorials seems to have no space between the icon and the title

  • JarvanJarvan Member, Xamarin Team Xamurai

    Try to use Shell.ItemTemplate to set the style for FlyoutItem. Check the code:

    <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>
    
  • loladekingloladeking Member ✭✭

    @Jarvan said:
    Try to use Shell.ItemTemplate to set the style for FlyoutItem. Check the code:

    <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>
    

    Thanksssss. i started researching this as well. Do i send the bindingcontext of the appshell.xaml.cs to a list of title and icons? Please share any doc/small sample you have. I didn't really see much online

  • loladekingloladeking Member ✭✭

    @Jarvan said:
    Try to use Shell.ItemTemplate to set the style for FlyoutItem. Check the code:

    <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>
    

    basically my wonder is, where do i set the title and icon? an item source? code behind? i have neber seen someones fulll implentation of this to know the item source of the grid

  • loladekingloladeking Member ✭✭

    @Jarvan said:

    basically my wonder is, where do i set the title and icon? an item source? code behind?

    Just add the code to AppShell.xaml and the ItemTemplate will be set for the FlyoutItem. The Title and Icon in ItemTemplate correspond to FlyoutItem's properties.

    <FlyoutItem Title="Browse" Icon="tab_feed.png">
        <ShellContent ContentTemplate="{DataTemplate local:ItemsPage}" />
    </FlyoutItem>
    
    <FlyoutItem Title="About" Icon="tab_about.png">
        <ShellContent ContentTemplate="{DataTemplate local:AboutPage}" />
    </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>
    

    Tutorial:
    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/flyout#define-flyoutitem-appearance

    Official sample:
    https://github.com/xamarin/xamarin-forms-samples/blob/master/UserInterface/Xaminals/Xaminals/AppShell.xaml

    Thank you so much.

    Reading and comprehension are two different things :-)

    it was until i saw some example here
    https://github.com/AlejandroRuiz/PlayMusicXamarinClone

    that it dawned on me.

    i was expecting the binding to be set from the code behind and wasn't just comprehending.
    i was not unlearning and relearning. My bad
    see the updated flyout below

Sign In or Register to comment.