issue with xaml alignment xamarin forms

Question

I am working on Xamarin form cross app. I am using Navigation drawer where I need to show items/subitems . Single are showing properly but issue is with items and subitem.. in that case.. text is showing vertically.

This is screen shot of current code

Now you can see that text are appearing vertically and same for sub menu items.. I actually want to show like below

My xaml is as below

<MasterDetailPage.Master>
    <ContentPage Title="Menu" BackgroundColor="{StaticResource WhiteColor}">
        <ScrollView>
        <StackLayout Orientation="Vertical">

            <!-- 
         This StackLayout you can use for other
         data that you want to have in your menu drawer
    -->
            <StackLayout BackgroundColor="{StaticResource BlueColor}"
                         HeightRequest="75">

                <Label Text="Menu"
                       FontSize="20"
                       VerticalOptions="CenterAndExpand"
                       TextColor="White"
                       HorizontalOptions="Center"/>
            </StackLayout>

                <StackLayout>

                    <!--DashBoard-->

                <StackLayout VerticalOptions="CenterAndExpand"
                             Orientation="Horizontal"
                             Padding="20,10,0,0"
                             Spacing="20">

                    <Image Source="dashbaordmenuicon.png"
                           WidthRequest="30"
                           HeightRequest="30"
                           VerticalOptions="Center" />

                    <Label Text="Dashboards"
                           FontSize="18"
                           VerticalOptions="Center"
                           FontFamily="ProximaNova"
                           TextColor="#637188"/>


                    <StackLayout VerticalOptions="CenterAndExpand"
                                 Orientation="Horizontal"
                                 Padding="30,5,0,10"
                                 Spacing="20">

                        <Image Source="summarymenuicon.png"
                               WidthRequest="30"
                               HeightRequest="30"
                               VerticalOptions="Center" />

                        <Label Text="Summary"
                               FontSize="15"
                               VerticalOptions="Center"
                               FontFamily="ProximaNova"
                               TextColor="#98a4b4"/>
                    </StackLayout>

                    <StackLayout VerticalOptions="CenterAndExpand"
                                 Orientation="Horizontal"
                                 Padding="30,5,0,10"
                                 Spacing="20">

                        <Image Source="spendinghistoryicon.png"
                               WidthRequest="30"
                               HeightRequest="30"
                               VerticalOptions="Center" />

                        <Label Text="pending History"
                               FontSize="18"
                               VerticalOptions="Center"
                               FontFamily="ProximaNova"
                               TextColor="#98a4b4"/>
                    </StackLayout>


                </StackLayout>
                </StackLayout>
                <!--Dreams-->

                <StackLayout VerticalOptions="FillAndExpand"
                             Orientation="Horizontal"
                             Padding="20,10,0,0"
                             Spacing="20">

                    <Image Source="dreamsicon.png"
                           WidthRequest="30"
                           HeightRequest="30"
                           VerticalOptions="Center" />

                    <Label Text="Dreams"
                           FontSize="18"
                           VerticalOptions="Center"
                           FontFamily="ProximaNova"
                           TextColor="#637188"/>


                    <StackLayout VerticalOptions="FillAndExpand"
                                 Orientation="Horizontal"
                                 Padding="30,5,0,10"
                                 Spacing="20">

                        <Image Source="adddreamicon.png"
                               WidthRequest="30"
                               HeightRequest="30"
                               VerticalOptions="Center" />

                        <Label Text="Add Dream"
                               FontSize="15"
                               VerticalOptions="Center"
                               FontFamily="ProximaNova"
                               TextColor="#98a4b4"/>
                    </StackLayout>


                </StackLayout>

                <!--Financial Management-->

            <StackLayout VerticalOptions="FillAndExpand"
                         Orientation="Horizontal"
                         Padding="20,10,0,0"
                         Spacing="20">

                    <Image Source="financialmanagementicon.png"
                       WidthRequest="30"
                       HeightRequest="30"
                       VerticalOptions="Center" />

                    <Label Text="Financial Management"
                       FontSize="18"
                       VerticalOptions="Center"
                       FontFamily="ProximaNova"
                       TextColor="#637188"/>


                <StackLayout VerticalOptions="FillAndExpand"
                             Orientation="Horizontal"
                             Padding="30,5,0,10"
                             Spacing="20">

                        <Image Source="addicon.png"
                           WidthRequest="30"
                           HeightRequest="30"
                           VerticalOptions="Center" />

                        <Label Text="Add Income"
                           FontSize="15"
                           VerticalOptions="Center"
                           FontFamily="ProximaNova"
                           TextColor="#98a4b4"/>
                </StackLayout>

                    <StackLayout VerticalOptions="FillAndExpand"
                                 Orientation="Horizontal"
                                 Padding="30,5,0,10"
                                 Spacing="20">

                        <Image Source="addicon.png"
                               WidthRequest="30"
                               HeightRequest="30"
                               VerticalOptions="Center" />

                        <Label Text="Add Expense"
                               FontSize="15"
                               VerticalOptions="Center"
                               FontFamily="ProximaNova"
                               TextColor="#98a4b4"/>
                    </StackLayout>

                <StackLayout VerticalOptions="FillAndExpand"
                             Orientation="Horizontal"
                             Padding="30,5,0,10"
                             Spacing="20">

                    <Image Source="addicon.png"
                           WidthRequest="30"
                           HeightRequest="30"
                           VerticalOptions="Center" />

                        <Label Text="Add Virtual Account"
                           FontSize="15"
                           VerticalOptions="Center"
                           FontFamily="ProximaNova"
                           TextColor="#98a4b4"/>
                </StackLayout>

                    <StackLayout VerticalOptions="FillAndExpand"
                                 Orientation="Horizontal"
                                 Padding="30,5,0,10"
                                 Spacing="20">

                        <Image Source="linkaccounticon.png"
                               WidthRequest="30"
                               HeightRequest="30"
                               VerticalOptions="Center" />

                        <Label Text="Link Account"
                               FontSize="15"
                               VerticalOptions="Center"
                               FontFamily="ProximaNova"
                               TextColor="#98a4b4"/>
                    </StackLayout>

                <StackLayout VerticalOptions="FillAndExpand"
                             Orientation="Horizontal"
                             Padding="30,5,0,10"
                             Spacing="20">

                        <Image Source="budgeticon.png"
                           WidthRequest="29"
                           HeightRequest="30"
                           VerticalOptions="Center" />

                        <Label Text="Budget"
                           FontSize="15"
                           VerticalOptions="Center"
                           FontFamily="ProximaNova"
                           TextColor="#98a4b4"/>
                </StackLayout>

                </StackLayout>

            <!--Settings-->

            <StackLayout VerticalOptions="FillAndExpand"
                         Orientation="Horizontal"
                         Padding="20,10,0,0"
                         Spacing="20">

                    <Image Source="settingsicon.png"
                       WidthRequest="30"
                       HeightRequest="30"
                       VerticalOptions="Center" />

                    <Label Text="Settings"
                       FontSize="18"
                       VerticalOptions="Center"
                       FontFamily="ProximaNova"
                       TextColor="#637188"/>

            </StackLayout>

            <!--Subcription-->
            <StackLayout VerticalOptions="FillAndExpand"
                         Orientation="Horizontal"
                         Padding="20,10,0,0"
                         Spacing="20">

                    <Image Source="subscriptionicon.png"
                       WidthRequest="30"
                       HeightRequest="30"
                       VerticalOptions="Center" />

                    <Label Text="Subcription"
                       FontSize="18"
                       VerticalOptions="Center"
                       FontFamily="ProximaNova"
                       TextColor="#637188"/>

            </StackLayout>

            <!--Feedback-->
            <StackLayout VerticalOptions="FillAndExpand"
                         Orientation="Horizontal"
                         Padding="20,10,0,0"
                         Spacing="20">

                    <Image Source="feedbackicon.png"
                       WidthRequest="30"
                       HeightRequest="30"
                       VerticalOptions="Center" />

                    <Label Text="Feedback"
                       FontSize="18"
                       VerticalOptions="Center"
                       FontFamily="ProximaNova"
                       TextColor="#637188"/>

            </StackLayout>


            </StackLayout>
        </ScrollView>
    </ContentPage>
</MasterDetailPage.Master>

Answer 1

You need to add parent stack layout like :

<StackLayout>
    <StackLayout VerticalOptions="CenterAndExpand"
                 Orientation="Horizontal"
                 Padding="20,10,0,0"
                 Spacing="20">

        <Image Source="dashbaordmenuicon.png"
               WidthRequest="40"
               HeightRequest="40"
               VerticalOptions="Center" />

        <Label Text="Dashboards"
               FontSize="18"
               VerticalOptions="Center"
               FontFamily="ProximaNova"
               TextColor="#637188"/>

    </StackLayout>

    <StackLayout VerticalOptions="CenterAndExpand"
                     Orientation="Horizontal"
                     Padding="30,5,0,10"
                     Spacing="20">

            <Image Source="summarymenuicon.png"
                   WidthRequest="40"
                   HeightRequest="40"
                   VerticalOptions="Center" />

            <Label Text="Summary"
                   FontSize="15"
                   VerticalOptions="Center"
                   FontFamily="ProximaNova"
                   TextColor="#98a4b4"/>
        </StackLayout>

    <StackLayout VerticalOptions="CenterAndExpand"
                 Orientation="Horizontal"
                 Padding="30,5,0,10"
                 Spacing="20">

        <Image Source="spendinghistoryicon.png"
               WidthRequest="40"
               HeightRequest="40"
               VerticalOptions="Center" />

        <Label Text="pending History"
               FontSize="18"
               VerticalOptions="Center"
               FontFamily="ProximaNova"
               TextColor="#98a4b4"/>
    </StackLayout>

</StackLayout>