How to display 2 rows when using Frame inside ScrollView in Xamarin - xamarin

I have a ScrollView problem as follows: I have a list of Categories. I want it to display 2 rows of categories. I've searched for everything related to ScrollView, however I'm not seeing any results.
<ScrollView Orientation="Horizontal" VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never">
<StackLayout Padding="12,0" Orientation="Horizontal" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Food" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Car" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 3" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 4" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 5" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
</StackLayout>
</ScrollView>
I had the idea to limit the Width for the ScrollView then the categories it would drop down to 2 columns by itself, however I think it's too funny =]]]. However it still doesn't work. Anyone have any solution for this, I won't use Grid. Thank you.
This is what I expect to display 2 rows:
Update
<ScrollView Orientation="Horizontal" VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never">
<FlexLayout Direction="Column">
<FlexLayout FlexLayout.Grow="1">
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Food" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Car" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
</FlexLayout>
<FlexLayout FlexLayout.Grow="2">
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 3" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 4" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 5" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
</FlexLayout>
</FlexLayout>
</ScrollView>
Result:


Thanks for the solutions above, here is the code I customized as desired:
<ScrollView Orientation="Vertical" VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never">
<FlexLayout Direction="Column">
<ScrollView Orientation="Horizontal" VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never">
<StackLayout Orientation="Vertical">
<FlexLayout FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" >
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Food" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Car" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
</StackLayout>
</FlexLayout>
<FlexLayout FlexLayout.Grow="2">
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 3" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 4" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 5sss" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
</FlexLayout>
</StackLayout>
</ScrollView>
</FlexLayout>
</ScrollView>


As Jason said you can do it with FlexLayout, I wrote an example for your reference.
Here is the xaml code:
<ScrollView Orientation="Vertical" VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never">
<FlexLayout Direction="Column">
<FlexLayout FlexLayout.Grow="1">
<ScrollView Orientation="Horizontal">
<StackLayout Orientation="Horizontal" >
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Food" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Car" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" FlexLayout.Grow="1">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Travel 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
</StackLayout>
</ScrollView>
</FlexLayout>
<FlexLayout FlexLayout.Grow="2">
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 2" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 3" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 4" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
<Frame HasShadow="False" HorizontalOptions="Start" IsClippedToBounds="True" Padding="10,7" CornerRadius="7" BackgroundColor="#fff" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Computer 5" TextColor="#333" VerticalOptions="Center" FontSize="14"/>
</StackLayout>
</Frame>
</FlexLayout>
</FlexLayout>
</ScrollView>

Related

How to create UI Dashboard Design in Xamarin Form

I am using xamarin form, having android and IOS Project
Below is the image that I want to create same UI.
I tried a lot, But I am not able to get same design.
I got this design in google image.
I have added my code and the output result
Below is my code:
<Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto" Padding="10" >
<Frame BackgroundColor="White" CornerRadius="20" Grid.Row="0">
<Grid ColumnDefinitions="Auto,Auto,Auto,Auto,Auto" VerticalOptions="CenterAndExpand">
<Label Grid.Column="0" Grid.Row="0" Text="Primary School" FontAttributes="Bold" FontSize="16" TextColor="#08457E" ></Label>
<Label Grid.Column="1" Grid.Row="0" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.Business_Time}" FontSize="20" ></Label>
<Label Grid.Column="2" Grid.Row="0" Text="Time Table" TextColor="Gray" ></Label>
<Label Grid.Column="3" Grid.Row="0" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.Clipboard}" FontSize="20" ></Label>
<Label Grid.Column="4" Grid.Row="0" Text="H.W." TextColor="Gray" ></Label>
</Grid>
</Frame>
<Frame CornerRadius="10" Grid.Row="1" BackgroundColor="White" >
<Grid RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="Auto,Auto" >
<Label Grid.Row="0" Grid.Column="0" TextColor="#08457E" FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.User}" FontSize="20" ></Label>
<Label Grid.Row="0" Grid.Column="1" Text="Xamarin UI Design" TextColor="#202020"></Label>
<Label Grid.Row="1" Grid.Column="0" TextColor="#08457E" FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.Table}" FontSize="20" ></Label>
<Label Grid.Row="1" Grid.Column="1" Text="Class: V" TextColor="#202020"></Label>
<Label Grid.Row="2" Grid.Column="0" TextColor="#08457E" FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.User_Edit}" FontSize="20" ></Label>
<Label Grid.Row="2" Grid.Column="1" Text="Class Tearcher: Monali Kundre" TextColor="#202020"></Label>
</Grid>
</Frame>
<Grid Grid.Row="2" RowDefinitions="Auto,Auto" ColumnDefinitions="Auto,Auto,Auto" RowSpacing="10" ColumnSpacing="10">
<Frame Grid.Row="0" Grid.Column="0" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Table}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Syllabus" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
<Frame Grid.Row="0" Grid.Column="1" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Th_List}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Test" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
<Frame Grid.Row="0" Grid.Column="2" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Edit}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Notice" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
<Frame Grid.Row="1" Grid.Column="0" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Pallet}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Fees" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
<Frame Grid.Row="1" Grid.Column="1" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Boxes}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Gallery" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
<Frame Grid.Row="1" Grid.Column="2" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Money_Bill}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Profile" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
</Grid>
<Frame Grid.Row="3" CornerRadius="20" >
<StackLayout HorizontalOptions="FillAndExpand">
<Image Source="https://graphicsfamily.com/wp-content/uploads/2020/11/Professional-Web-Banner-AD-in-Photoshop-scaled.jpg" VerticalOptions="FillAndExpand" HeightRequest="110" HorizontalOptions="FillAndExpand" Aspect="Fill"></Image>
</StackLayout>
</Frame>
<Frame Grid.Row="4" CornerRadius="10" BackgroundColor="#08457E">
<Grid RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="*,Auto" RowSpacing="10">
<Label Grid.Row="0" Grid.Column="0" Text="Learned Phase" TextColor="#ffffff"></Label>
<Label Grid.Row="0" Grid.Column="1" Text="12" FontAttributes="Bold" TextColor="#ffffff"></Label>
<Label Grid.Row="1" Grid.Column="0" Text="Phase left to learn" TextColor="#ffffff"></Label>
<Label Grid.Row="1" Grid.Column="1" Text="36" FontAttributes="Bold" TextColor="#ffffff"></Label>
<Label Grid.Row="2" Grid.Column="0" Text="Total Learning Time" TextColor="#ffffff"></Label>
<Label Grid.Row="2" Grid.Column="1" Text="1.5h" FontAttributes="Bold" TextColor="#ffffff"></Label>
</Grid>
</Frame>
</Grid>
And output is as below:
Please help me.
Thanks in advance.

Almost there, try this:
Update the Grid in the first Frame:
Grid ColumnDefinitions="Auto,*,Auto,Auto,Auto"
And third Grid like this:
ColumnDefinitions="*,*,*"
Full code:
<Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto" Padding="10" >
<Frame BackgroundColor="White" CornerRadius="20" Grid.Row="0">
<Grid ColumnDefinitions="Auto,*,Auto,Auto,Auto" VerticalOptions="CenterAndExpand">
<Label Grid.Column="0" Grid.Row="0" Text="Primary School" FontAttributes="Bold" FontSize="16" TextColor="#08457E" ></Label>
<Label Grid.Column="1" Grid.Row="0" HorizontalOptions="EndAndExpand" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.Business_Time}" FontSize="20" ></Label>
<Label Grid.Column="2" Grid.Row="0" Text="Time Table" TextColor="Gray" ></Label>
<Label Grid.Column="3" Grid.Row="0" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.Clipboard}" FontSize="20" ></Label>
<Label Grid.Column="4" Grid.Row="0" Text="H.W." TextColor="Gray" ></Label>
</Grid>
</Frame>
<Frame CornerRadius="10" Grid.Row="1" BackgroundColor="White" >
<Grid RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="Auto,Auto" >
<Label Grid.Row="0" Grid.Column="0" TextColor="#08457E" FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.User}" FontSize="20" ></Label>
<Label Grid.Row="0" Grid.Column="1" Text="Xamarin UI Design" TextColor="#202020"></Label>
<Label Grid.Row="1" Grid.Column="0" TextColor="#08457E" FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.Table}" FontSize="20" ></Label>
<Label Grid.Row="1" Grid.Column="1" Text="Class: V" TextColor="#202020"></Label>
<Label Grid.Row="2" Grid.Column="0" TextColor="#08457E" FontFamily="{StaticResource FontAwesome}" Text="{x:Static fontawesome:Solid.User_Edit}" FontSize="20" ></Label>
<Label Grid.Row="2" Grid.Column="1" Text="Class Tearcher: Monali Kundre" TextColor="#202020"></Label>
</Grid>
</Frame>
<Grid Grid.Row="2" RowDefinitions="Auto,Auto" ColumnDefinitions="*,*,*" RowSpacing="10" ColumnSpacing="10">
<Frame Grid.Row="0" Grid.Column="0" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Table}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Syllabus" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
<Frame Grid.Row="0" Grid.Column="1" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Th_List}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Test" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
<Frame Grid.Row="0" Grid.Column="2" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Edit}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Notice" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
<Frame Grid.Row="1" Grid.Column="0" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Pallet}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Fees" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
<Frame Grid.Row="1" Grid.Column="1" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Boxes}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Gallery" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
<Frame Grid.Row="1" Grid.Column="2" BackgroundColor="White" HasShadow="True" CornerRadius="10">
<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Grid.Row="0" HorizontalOptions="Center" TextColor="#08457E"
FontFamily="{StaticResource FontAwesome}" FontSize="20" Text="{x:Static fontawesome:Solid.Money_Bill}" ></Label>
<Label Grid.Row="1" HorizontalOptions="Center" Text="Profile" VerticalOptions="Start"
TextColor="#202020"></Label>
</Grid>
</Frame>
</Grid>
<Frame Grid.Row="3" CornerRadius="20" >
<StackLayout HorizontalOptions="FillAndExpand">
<Image Source="https://graphicsfamily.com/wp-content/uploads/2020/11/Professional-Web-Banner-AD-in-Photoshop-scaled.jpg" VerticalOptions="FillAndExpand" HeightRequest="110" HorizontalOptions="FillAndExpand" Aspect="Fill"></Image>
</StackLayout>
</Frame>
<Frame Grid.Row="4" CornerRadius="10" BackgroundColor="#08457E">
<Grid RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="*,Auto" RowSpacing="10">
<Label Grid.Row="0" Grid.Column="0" Text="Learned Phase" TextColor="#ffffff"></Label>
<Label Grid.Row="0" Grid.Column="1" Text="12" FontAttributes="Bold" TextColor="#ffffff"></Label>
<Label Grid.Row="1" Grid.Column="0" Text="Phase left to learn" TextColor="#ffffff"></Label>
<Label Grid.Row="1" Grid.Column="1" Text="36" FontAttributes="Bold" TextColor="#ffffff"></Label>
<Label Grid.Row="2" Grid.Column="0" Text="Total Learning Time" TextColor="#ffffff"></Label>
<Label Grid.Row="2" Grid.Column="1" Text="1.5h" FontAttributes="Bold" TextColor="#ffffff"></Label>
</Grid>
</Frame>
</Grid>

Resize Frame Within Grid Row

I am using xamarin with visual studio for IOS and Android
I am trying to add a scrollView to the same grid row that my Frame is on but because the frame is the same size as my grid row it cuts off the bottom of the frame (I believe)
What I've tried :
1. Setting the RowDefinition to "*" and "Auto" but the frame increases the length with the grid and
2. Adjusting the scrollView height
I feel like my best option would be resizing the frame so it's smaller than the grid row, however heightRequest doesn't work.. I would love any suggestions.
Here is the code:
<Grid HeightRequest="400">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="130"/>
<RowDefinition Height="60"/>
<RowDefinition Height="20"/>
<RowDefinition Height="300"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ScrollView Orientation="Horizontal" Grid.Row="4" Margin="0,20,0,0" HeightRequest="390" HorizontalScrollBarVisibility="Never">
<StackLayout Orientation="Horizontal" Grid.Row="4" BackgroundColor="Red">
<Frame WidthRequest="200" HeightRequest="300" Padding="0,0,0,0" CornerRadius="10" IsClippedToBounds="True" Margin="15,0,0,0">
<StackLayout>
<Image Source="satayChicken.jpg" WidthRequest="200" HeightRequest="200" Aspect="AspectFill"></Image>
<Label Text="Satay Chicken" FontSize="24" TextColor="#48b67b" HorizontalOptions="Center" Margin="0,-5,0,0"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="Center">
<Label Text="PREP TIME" FontSize="12" TextColor="#4a6356" />
<Label Text="COOK TIME" FontSize="12" TextColor="#4a6356" Margin="5,0,0,0"/>
</StackLayout>
<StackLayout Orientation="Horizontal" HorizontalOptions="Center" Margin="0,-10,0,0">
<Label Text="5 mins" FontSize="14" TextColor="#48b67b" />
<Label Text="12 mins" FontSize="14" TextColor="#48b67b" Margin="15,0,0,0"/>
</StackLayout>
</StackLayout>
</Frame>
</StackLayout>
</ScrollView>
</Grid>

<StackLayout Orientation="Horizontal" Grid.Row="4" BackgroundColor="Red">
as you have defined the StackLayout Orientaition="Horizontal",the Frame will fill the height by default.
if you want to resize the Frame height,you sholud set its VerticalOptions property
like :
<ScrollView Orientation="Horizontal" Grid.Row="4" Margin="0,20,0,0" HorizontalScrollBarVisibility="Never">
<StackLayout Orientation="Horizontal" BackgroundColor="Red" >
<Frame VerticalOptions="CenterAndExpand" HeightRequest="270" WidthRequest="200" Padding="0,0,0,0" CornerRadius="10" IsClippedToBounds="True" Margin="15,0,0,0">
<StackLayout>
<Image Source="satayChicken.jpg" WidthRequest="200" HeightRequest="200" Aspect="AspectFill"></Image>
<Label Text="Satay Chicken" FontSize="24" TextColor="#48b67b" HorizontalOptions="Center" Margin="0,-5,0,0"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="Center">
<Label Text="PREP TIME" FontSize="12" TextColor="#4a6356" />
<Label Text="COOK TIME" FontSize="12" TextColor="#4a6356" Margin="5,0,0,0"/>
</StackLayout>
<StackLayout Orientation="Horizontal" HorizontalOptions="Center" Margin="0,-10,0,0">
<Label Text="5 mins" FontSize="14" TextColor="#48b67b" />
<Label Text="12 mins" FontSize="14" TextColor="#48b67b" Margin="15,0,0,0"/>
</StackLayout>
</StackLayout>
</Frame>
</StackLayout>
</ScrollView>
The specific size is set according to your requirements.
or you also could set Padding property to the StackLayout to resize the Frame location like:
<StackLayout Padding="0,10,0,10" Orientation="Horizontal" Grid.Row="4" BackgroundColor="Red">
<Frame WidthRequest="200" HeightRequest="300" Padding="0,0,0,0" CornerRadius="10" IsClippedToBounds="True" Margin="15,0,0,0">
<StackLayout>
<Image Source="satayChicken.jpg" WidthRequest="200" HeightRequest="200" Aspect="AspectFill"></Image>
<Label Text="Satay Chicken" FontSize="24" TextColor="#48b67b" HorizontalOptions="Center" Margin="0,-5,0,0"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="Center">
<Label Text="PREP TIME" FontSize="12" TextColor="#4a6356" />
<Label Text="COOK TIME" FontSize="12" TextColor="#4a6356" Margin="5,0,0,0"/>
</StackLayout>
<StackLayout Orientation="Horizontal" HorizontalOptions="Center" Margin="0,-10,0,0">
<Label Text="5 mins" FontSize="14" TextColor="#48b67b" />
<Label Text="12 mins" FontSize="14" TextColor="#48b67b" Margin="15,0,0,0"/>
</StackLayout>
</StackLayout>
</Frame>
</StackLayout>

Is there a way I can replace using <StackLayout> with <Grid> when I want a GestureRecognizer?

I have this code. I would like to replace it with <Grid> and simplify it. Is there a way that I can do this and also implement the GestureRecognizer?
<ViewCell x:Name="cfs">
<StackLayout VerticalOptions="CenterAndExpand" Padding="20,0,20,0">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding OpenPickerCommand}" CommandParameter="{x:Reference cfsPicker}" NumberOfTapsRequired="1" />
</StackLayout.GestureRecognizers>
<StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand">
<StackLayout HorizontalOptions="StartAndExpand" VerticalOptions="Center">
<local:LabelBodyRendererClass Text="Card Front Side" YAlign="Center" XAlign="Center" />
</StackLayout>
<StackLayout HorizontalOptions="EndAndExpand" Orientation="Horizontal">
<Picker x:Name="cfsPicker" IsVisible="false" SelectedIndexChanged="cfsOnPickerSelectedIndexChanged" ItemsSource="{Binding Languages}"></Picker>
<local:LabelBodyRendererClass x:Name="cfsLabel" />
<Label Text="{x:Static local:FontAwesome.FAAngleRight}" FontFamily="FontAwesome" TextColor="Gray" XAlign="Center" HorizontalOptions="EndAndExpand" />
</StackLayout>
</StackLayout>
</StackLayout>

Have you tried Grid.GestureRecognizers....
<Grid>
<Grid.GestureRecognizers>
<TapGestureRecognizer Command="{Binding OpenPickerCommand}" CommandParameter="{x:Reference cfsPicker}" NumberOfTapsRequired="1" />
</Grid.GestureRecognizers>
</Grid>

Xamarin Forms UWP, How can I use Iconize and Images

I have a Xamarin PCL Android/iOS/UWP project. Im using Iconize FontAwsome icons for the application. Problem is that UWP dosent display any icons, but Android does
Like this:
My form:
<?xml version="1.0" encoding="utf-8" ?>
<controls:BasePage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:controls="clr-namespace:Volaapp.Controls;assembly:Volaapp"
xmlns:converters="clr-namespace:Volaapp.Converters;assembly:Volaapp"
xmlns:icons="clr-namespace:FormsPlugin.Iconize;assembly=FormsPlugin.Iconize"
xmlns:xlabs="clr-namespace:XLabs.Forms.Controls;assembly=XLabs.Forms"
x:Class="Volaapp.Pages.CreateTodoPage"
BackgroundColor="{StaticResource GrayColor}"
Title="Lisa uus võlg">
<ScrollView BackgroundColor="{StaticResource WhiteColor}">
<StackLayout Margin="10"
BackgroundColor="{StaticResource WhiteColor}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="65"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="65"/>
<RowDefinition Height="65"/>
<RowDefinition Height="65"/>
<RowDefinition Height="65"/>
<RowDefinition/>
</Grid.RowDefinitions>
<!--Nimi ja Summa-->
<StackLayout Grid.Column="0" Grid.Row="0"
BackgroundColor="{StaticResource MetroWhiteColor}"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<icons:IconImage VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"
Icon="fa-gg"
IconColor="{StaticResource MetroBlackColor}"
HeightRequest="30"/>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="0"
Orientation="Vertical"
BackgroundColor="{StaticResource MetroWhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<StackLayout Orientation="Vertical"
BackgroundColor="{StaticResource WhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="0,1,1,1">
<Entry Text="{Binding Title}"
Placeholder="Sisesta pealkiri"
VerticalOptions="EndAndExpand"
Keyboard="Text"
Margin="15,0,15,2"/>
<Entry
VerticalOptions="EndAndExpand"
Placeholder="Sisesta Summa!"
Text="{Binding Loan}"
Keyboard="Numeric"
Margin="15,2,15,10"
/>
</StackLayout>
</StackLayout>
<!--Inimesed-->
<StackLayout Grid.Column="0" Grid.Row="1"
BackgroundColor="{StaticResource MetroWhiteColor}"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<icons:IconImage VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"
Icon="fa-user"
IconColor="{StaticResource MetroBlackColor}"
HeightRequest="30"/>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="1"
Orientation="Vertical"
BackgroundColor="{StaticResource MetroWhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<StackLayout Orientation="Vertical"
BackgroundColor="{StaticResource WhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="0,1,1,1">
<controls:BindablePicker Margin="20,5"
ItemsSource="{Binding Tags}"
SelectedItem="{Binding SelectedTag, Mode=TwoWay}"
DisplayMemberPath="Title"
Title="Vali inimene"
VerticalOptions="EndAndExpand"/>
</StackLayout>
</StackLayout>
<!--Rahatäht-->
<StackLayout Grid.Column="0" Grid.Row="2"
BackgroundColor="{StaticResource MetroWhiteColor}"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<icons:IconImage VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"
Icon="fa-money"
IconColor="{StaticResource MetroBlackColor}"
HeightRequest="30"/>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="2"
Orientation="Vertical"
BackgroundColor="{StaticResource MetroWhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<StackLayout Orientation="Vertical"
BackgroundColor="{StaticResource WhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="0,1,1,1">
<controls:BindablePicker Margin="20,5"
ItemsSource="{Binding CurrencyList}"
SelectedItem="{Binding Currency, Mode=TwoWay}"
Title="Vali Rahatäht"
VerticalOptions="EndAndExpand"/>
</StackLayout>
</StackLayout>
<!--Due date-->
<StackLayout Grid.Column="0" Grid.Row="3"
Orientation="Vertical"
BackgroundColor="{StaticResource MetroWhiteColor}"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<xlabs:ImageButton Image="_duedate.png"
ImageHeightRequest="35"
ImageWidthRequest="35"
BackgroundColor="{StaticResource MetroWhiteColor}"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"
BorderRadius="0"
Command="{Binding SelectDueDateCommand}"/>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="3"
BackgroundColor="{StaticResource MetroWhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<StackLayout BackgroundColor="{StaticResource WhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="0,1,1,1">
<Label Text="{Binding DueTime, StringFormat='Kuupäev {0:dd.MM.yyyy HH:mm}'}"
FontSize="17"
Margin="25,0"
TextColor="{StaticResource BlackColor}"
VerticalTextAlignment="Start"
VerticalOptions="CenterAndExpand"
HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
</StackLayout>
<!--Meeldetuletus-->
<StackLayout Grid.Column="0" Grid.Row="4"
Orientation="Vertical"
BackgroundColor="{StaticResource MetroWhiteColor}"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<Image HeightRequest="35"
WidthRequest="35"
Source="{Binding ReminderIcon}"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand">
</Image>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="4"
BackgroundColor="{StaticResource MetroWhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<StackLayout BackgroundColor="{StaticResource WhiteColor}"
Orientation="Horizontal"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="0,1,1,1">
<Label Text="Meeldetuletus"
FontSize="17"
Margin="25,0,0,0"
TextColor="{StaticResource BlackColor}"
VerticalTextAlignment="Start"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Start"/>
<Switch IsToggled="{Binding EnableReminder, Mode=TwoWay}"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Start"
Margin="20,0"/>
</StackLayout>
</StackLayout>
<!--Button-->
<StackLayout Grid.Column="1" Grid.Row="5"
Orientation="Horizontal" Margin="0,30"
HorizontalOptions="EndAndExpand"
VerticalOptions="CenterAndExpand">
<xlabs:ImageButton
BackgroundColor="{StaticResource MetroWhiteColor}"
Text="SAVE" FontSize="12"
IsEnabled="{Binding IsValid}"
HorizontalOptions="StartAndExpand"
HeightRequest="40"
WidthRequest="100"
BorderRadius="0"
Command="{Binding SaveCommand}"/>
<xlabs:ImageButton
BackgroundColor="{StaticResource MetroWhiteColor}"
Text="CANCEL"
HorizontalOptions="StartAndExpand"
BorderRadius="0"
HeightRequest="40"
WidthRequest="100"
FontSize="12"
Command="{Binding CancelCommand}"/>
</StackLayout>
</Grid>
</StackLayout>
</ScrollView>
</controls:BasePage>
Am I missing a nugget or UWP dosent support iconize?
The nuggets that are installed in UWP for iconize:
Xam.Plugin.Iconize.FontAwsome
Xam.Plugin.Iconize
Xam.FormsPlugin.Iconize
FontAwsome.UWP

This is a known but no acknowledged issue and doesn't seem to be fixed in the current version. GitHub Issue #13. I also experience the same issue.
The workaround, is to do this:
Create a folder Plugin.Iconize.Material.UWP\Assets\Fonts\ in the root
of your project.
Copy fontawesome.ttf to the new directory and set
to Copy if newer as its output.

Open a listview below button over another view in xamarin forms

I'm working on a Xamarin Forms project where I need to have a drop down list like html drop down as in image.
I have taken a StackLayout for button and Listview (initially hidden) and when clicked on button will change the visibility to true. The list should open above other buttons but when the list get open, all other stackLayout moved below as in image.
I want the list view to be open above other views. The code for the screen is as below. Could any one help what changed do I need to make in the below code.
<StackLayout Orientation="Vertical">
<StackLayout Orientation="Horizontal" WidthRequest="400">
<Label Text="Label 1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> </Label>
<StackLayout x:Name="addList" WidthRequest="200" HorizontalOptions="Start">
<Button Clicked="onBtnClicked" Text="Button 1" WidthRequest="200"></Button>
<ListView WidthRequest="200" HeightRequest="300" IsVisible="False"></ListView>
</StackLayout>
</StackLayout>
<StackLayout Orientation="Horizontal" WidthRequest="400">
<Label Text="Label 2" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Label>
<StackLayout x:Name="addList" WidthRequest="200" HorizontalOptions="Start">
<Button Clicked="onBtnClicked" Text="Button 2" WidthRequest="200"></Button>
<ListView WidthRequest="200" HeightRequest="300" IsVisible="False"></ListView>
</StackLayout>
</StackLayout>
<StackLayout Orientation="Horizontal" WidthRequest="400">
<Label Text="Label 3" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Label>
<StackLayout x:Name="addList" WidthRequest="200" HorizontalOptions="Start">
<Button Clicked="onBtnClicked" Text="Button 3" WidthRequest="200"></Button>
<ListView WidthRequest="200" HeightRequest="300" IsVisible="False"></ListView>
</StackLayout>
</StackLayout>
</StackLayout>
Edited:
This is my actual XAML
<StackLayout BackgroundColor="#FFFFFF" Padding="20,20,200,20" Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout x:Name="PreferencesBodyLayout" Padding="10,10,10,10" Orientation="Vertical">
<StackLayout x:Name="LanguageLayout" Orientation="Horizontal" HeightRequest="50" HorizontalOptions="FillAndExpand" >
<Label Text="Change Language" Font="Large" TextColor="Black" HorizontalOptions="StartAndExpand" />
<RelativeLayout x:Name="LanguageSelectionRelativeLayout" HorizontalOptions="EndAndExpand">
<StackLayout Padding="2" Spacing="0" BackgroundColor="#EFEFEF" WidthRequest="150" >
<StackLayout x:Name="LanguageDropDown" Padding="0" Spacing="0" Orientation="Horizontal" BackgroundColor="White" VerticalOptions="FillAndExpand">
<StackLayout HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand" Orientation="Horizontal">
<Label x:Name="SelectedLanguageLabel" StyleId="Settings_ChangeLanguage_Label" Margin="5" Text="{Binding SelectedLanguageLabelText}" TextColor="Black" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Font="Medium"/>
</StackLayout>
<StackLayout HorizontalOptions="End">
<Image Source="ge_arrow_down.png" HeightRequest="20" WidthRequest="20" VerticalOptions="CenterAndExpand" >
</Image>
</StackLayout>
</StackLayout>
<ListView x:Name="LanguageList" IsVisible="{Binding ShowLanguagePopup}" BackgroundColor="Gray" VerticalOptions = "FillAndExpand"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=LanguageDropDown, Property=Y,Factor=1,Constant=40}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=LanguageDropDown,Property=X,Factor=1,Constant=0}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=LanguageDropDown,Property=Width,Factor=1,Constant=0}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToView,
ElementName=LanguageDropDown,Property=Height,Factor=1,Constant=10}"
/>
</StackLayout>
</RelativeLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding ChangeLanguageCommand}" />
</StackLayout.GestureRecognizers>
</StackLayout>
<StackLayout Orientation="Horizontal" HeightRequest="50">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
<Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
</StackLayout>
<Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" >
</Image>
</StackLayout>
<StackLayout >
<BoxView BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"></BoxView>
</StackLayout>
<StackLayout Orientation="Horizontal" HeightRequest="50">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
<Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
</StackLayout>
<Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" >
</Image>
</StackLayout>
<StackLayout >
<BoxView BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"></BoxView>
</StackLayout>
<StackLayout Orientation="Horizontal" HeightRequest="50">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
<Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
</StackLayout>
<Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" >
</Image>
</StackLayout>
<StackLayout >
<BoxView BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"></BoxView>
</StackLayout>
<StackLayout Orientation="Horizontal" HeightRequest="50">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
<Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
</StackLayout>
<Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" >
</Image>
</StackLayout>
<StackLayout >
<BoxView BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"></BoxView>
</StackLayout>
</StackLayout>
</StackLayout>

I have never used it but I think you can try with a RelativeLayout. This is a little demo: 2 buttons and a ListView. ListView has some Constraints to RedButton. You can try to show / hide it and take a look if Green Button (that has Constraints to RedButton too) does not move
<StackLayout VerticalOptions = "FillAndExpand">
<RelativeLayout>
<Button BackgroundColor="Red" x:Name="button" Text = "Button"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,Factor=.15,Constant=0}" />
<Button BackgroundColor="Green" x:Name="buttonGreen" Text = "Button"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,Factor=.15,Constant=100}" />
<ListView BackgroundColor="Blue" VerticalOptions = "FillAndExpand"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=button,Property=Y,Factor=1,Constant=60}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=button,Property=X,Factor=1,Constant=20}"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Width,Factor=.5,Constant=0}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Height,Factor=.5,Constant=0}"
/>
</RelativeLayout>
</StackLayout>

Resources