Xamarin Forms Remove space from Entry - xamarin

I have a problem. I created a register page, with labels that show an error like "Username already exists". But the space between the Label and the Entry is a little bit too much. Here is an image of how it is now:
Now all of that is in a Grid, but the RowHeights are set to Auto, so this is the smallest size that the entry could get. The label, however, must be far more to the top (closer to the Username Entry).
Here is my code:
<Grid VerticalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="35" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="90" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Image Grid.Row="1" Grid.Column="0" x:Name="imgUsernameStatus" Margin="5"/>
<Entry Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Placeholder="Username" PlaceholderColor="#bababa" FontSize="16" x:Name="txtUsername" TextColor="White" Unfocused="OnUsernameUnfocused" TextChanged="OnUsernameTextChanged" />
<Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Text="Username already exists" TextColor="Red" FontSize="11" x:Name="txtUsernameError" IsVisible="False" />
<Image Grid.Row="3" Grid.Column="0" x:Name="imgEmailStatus" Margin="5"/>
<Entry Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2" Placeholder="Email" PlaceholderColor="#bababa" FontSize="16" x:Name="txtEmail" TextColor="White" TextChanged="OnEmailTextChanged" />
</Grid>
How can I do that?

Default value for RowSpacing is 6 unit
Set RowSpacing="0"
<Grid VerticalOptions="CenterAndExpand"
RowSpacing="0">
<!--Your Content-->
</Grid>

Related

Spawn Images on certain position Xamarin Forms

Hello Xamarin community!
I just started with Xamarin Forms and wanted to create a simple app, which helps counting on a card game.
The points should be visualized in this image and should look like the following one:
In the first row there should be a horizontal line every fifth line and on the second line there should be a horizontal line every second line.
Here is how it looks like when i manually add the lines and add a backgroundcolor for visualization:
Here is the View:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
<RowDefinition Height="8*" />
<RowDefinition Height="8*" />
<RowDefinition Height="8*" />
<RowDefinition Height="*" />
<RowDefinition Height="4*" />
<RowDefinition Height="4*" />
</Grid.RowDefinitions>
<Entry Text="{Binding Team1.Name}" Grid.Column="0" Grid.Row="0" />
<Label Text="150" Grid.Column="0" Grid.Row="1" />
<Entry Text="{Binding Team2.Name}" Grid.Column="1" Grid.Row="0" />
<Label Text="129" Grid.Column="1" Grid.Row="1" />
<Image Source="Schlange.png"
Aspect="Fill"
BackgroundColor="#"
Grid.ColumnSpan="2"
Grid.Row="2"
Grid.RowSpan="3" />
<Image Scale="0.5" BackgroundColor="Gray" Source="Strich1.png" Grid.Column="0" Grid.Row="2" Margin="0,0,0,0"/>
<Image BackgroundColor="Blue" Source="Strich1.png"/>
<Button BackgroundColor="Transparent" Grid.Column="0" Grid.Row="2" />
<Button BackgroundColor="Transparent" Grid.Column="0" Grid.Row="3" />
<Button BackgroundColor="Transparent" Grid.Column="0" Grid.Row="4" />
<Button BackgroundColor="Transparent" Grid.Column="1" Grid.Row="2" />
<Button BackgroundColor="Transparent" Grid.Column="1" Grid.Row="3" />
<Button BackgroundColor="Transparent" Grid.Column="1" Grid.Row="4" />
<Label Text="1" Grid.Column="0" Grid.Row="5"></Label>
<Label Text="-1" Grid.Column="1" Grid.Row="5"></Label>
<Entry Grid.Column="0" Grid.Row="6"></Entry>
<Entry Grid.Column="1" Grid.Row="6"></Entry>
<Button Text="Runde!" Grid.Row="7" Grid.ColumnSpan="2" />
</Grid>
My Question would be how to spawn Images on certain positions? Is this even possible with a grid? What happens to mobile phones with different resolution?
Thanks in advance and don't hesitate to ask if needed.

Image on top of frame (center position) absolute layout or any other solution xamarin forms

I have to admit absolutelayout is the thing that does not get into my head.
Can you help?
I need to put an image on top of a frame -grid etc.. on few screen so I must find a solution that works.
This is what I want to achieve
This is what I have done used boxview (purple) supposed to be my img1.
MyXaml
<AbsoluteLayout>
<StackLayout Margin="20">
<BoxView Color="Purple" WidthRequest="40" HeightRequest="40"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"></BoxView>
<Frame
Padding="0"
BorderColor="Green"
CornerRadius="10">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<BoxView Grid.Row="0" Grid.Column="0" Margin="5" Color="Red"/>
<BoxView Grid.Row="0" Grid.Column="4" Margin="5" Color="GreenYellow"/>
</Grid>
<Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" HeightRequest="50" BackgroundColor="Coral" Margin="20,0,20,0"
TextColor="White" Text="Label 3" />
<!--other stuff down here -->
</Grid>
</Frame>
</StackLayout>
</AbsoluteLayout>
My Result (as you can see I get a long rectangle when all i want is the boxview in the middle like above). Can you help?
This should get you started (I mod'ed a demo of mine, so adjust accordingly):
<AbsoluteLayout x:Name="ViewControls" AbsoluteLayout.LayoutBounds="1,1,1,.50" AbsoluteLayout.LayoutFlags="All" BackgroundColor="#66000000" Margin="10,10,10,10">
<Frame CornerRadius="10" Margin="20,20,20,20" BackgroundColor="Black" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="1,1,1,1">
<Grid Margin="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Text="Left" BackgroundColor="White" HorizontalTextAlignment="Center" Grid.Column="0" />
<Label Text="Right" BackgroundColor="White" HorizontalTextAlignment="Center" Grid.Column="2" />
<Label Text="Across Page" BackgroundColor="White" HorizontalTextAlignment="Center" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" />
</Grid>
</Frame>
<Image Source="yt.png"
BackgroundColor="Transparent"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".5,0,50,50" />
</AbsoluteLayout>

Xamarin Forms entry tap does not bring up keyboard for entire width

I'm using a grid with nested grids to render a form. For some of the entries, I can tap on any area in the entry and it brings up the keyboard. For others, I have to tap on the left side to bring up the keyboard, as shown on the yellow highlighted entry in the image. I've tried placing the grids as children of a stacklayout instead, changing the keyboard type to not be numeric, set horizontal options, set width request. The only thing that works is when I put the nested grid in its own parent with no other children. Not sure what I'm doing wrong. I'm trying to avoid setting a tap gesture recognizer for the whole grid.
Here's my code:
<Grid Padding="3,20,10,20" VerticalOptions="Start" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<!-- purchase price-->
<Grid Grid.Row="0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2.5*"></ColumnDefinition>
<ColumnDefinition Width="6*"></ColumnDefinition>
<ColumnDefinition Width=".7*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" HorizontalTextAlignment="End" VerticalOptions="Center" TextColor="{ DynamicResource BaseTextColor }" FontSize="Small" Text="Purchase Price:" />
<Entry Grid.Column="1" Keyboard="Numeric" VerticalOptions="Center" x:Name="purchasePrice" Text="{Binding SalesPrice}" ></Entry>
</Grid>
</Grid>
<!--- address-->
<Grid Grid.Row="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2.5*"></ColumnDefinition>
<ColumnDefinition Width="6*"></ColumnDefinition>
<ColumnDefinition Width=".7*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" HorizontalTextAlignment="End" VerticalOptions="Center" TextColor="{ DynamicResource BaseTextColor }" FontSize="Small" Text="Address:" />
<Entry Grid.Column="1" VerticalOptions="Center" x:Name="address1" Text="{Binding Address}" ></Entry>
</Grid>
</Grid>
<!--- city-->
<Grid Grid.Row="2">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2.5*"></ColumnDefinition>
<ColumnDefinition Width="6*"></ColumnDefinition>
<ColumnDefinition Width=".7*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" HorizontalTextAlignment="End" VerticalOptions="Center" TextColor="{ DynamicResource BaseTextColor }" FontSize="Small" Text="City:" />
<!--<Picker Grid.Column="1" x:Name="cityPicker"></Picker>-->
<autocomplete:SfAutoComplete VerticalOptions="Center" Grid.Column="1" HeightRequest="40" x:Name="cityAutoComplete" />
</Grid>
</Grid>
<!-- county -->
<Grid Grid.Row="3">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2.5*"></ColumnDefinition>
<ColumnDefinition Width="6*"></ColumnDefinition>
<ColumnDefinition Width=".7*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Margin="0,0,0,0" VerticalOptions="Center" HorizontalTextAlignment="End" TextColor="{ DynamicResource BaseTextColor }" FontSize="Small" Text="County:" />
<Picker Grid.Column="1" VerticalOptions="Center" x:Name="countyPicker"></Picker>
</Grid>
</Grid>
<!-- loan -->
<Grid Grid.Row="4">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2.5*"></ColumnDefinition>
<ColumnDefinition Width="6*"></ColumnDefinition>
<ColumnDefinition Width=".7*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Margin="0,0,0,0" VerticalOptions="Center" HorizontalTextAlignment="End" TextColor="{ DynamicResource BaseTextColor }" FontSize="Small" Text="Loan:" />
<cb:Checkbox Grid.Column="1" Margin="0,0,0,0" x:Name="isLoanCheckbox" HeightRequest="30" WidthRequest="30" Checked="{Binding HasLoan}"
HorizontalOptions="Start" VerticalOptions="Center">
</cb:Checkbox>
</Grid>
</Grid>
<!--down payment -->
<Grid Grid.Row="5">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2.5*"></ColumnDefinition>
<ColumnDefinition Width="6*"></ColumnDefinition>
<ColumnDefinition Width=".7*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" HorizontalTextAlignment="End" VerticalOptions="Center" TextColor="{ DynamicResource BaseTextColor }" FontSize="Small" Text="Down Payment:" />
<Entry Grid.Column="1" Keyboard="Numeric" VerticalOptions="Center" x:Name="downPayment" Text="{Binding DownPayment}" ></Entry>
<Grid Grid.Column="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".7*"></ColumnDefinition>
<ColumnDefinition Width=".7*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<!--<Label TextColor="Gray" Margin="0,-10,0,0" Grid.Column="0"
VerticalTextAlignment="Center" HorizontalOptions="FillAndExpand"
HorizontalTextAlignment="Center" FontSize="Small"
Text="{ x:Static local:FontAwesomeFont.Dollar }">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="Dollar_Tapped" />
</Label.GestureRecognizers>
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String" Android="fontawesome-webfont.ttf#FontAwesome" iOS="FontAwesome" />
</Label.FontFamily>
</Label>
<Label TextColor="Gray" Margin="0,-10,0,0" Grid.Column="1"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center" FontSize="Small"
Text="{ x:Static local:FontAwesomeFont.Percent }">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="Percent_Tapped" />
</Label.GestureRecognizers>
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String" Android="fontawesome-webfont.ttf#FontAwesome" iOS="FontAwesome" />
</Label.FontFamily>
</Label>-->
</Grid>
</Grid>
</Grid>
<!--interest rate -->
<Grid Grid.Row="6">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2.5*"></ColumnDefinition>
<ColumnDefinition Width="6*"></ColumnDefinition>
<ColumnDefinition Width=".7*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" HorizontalTextAlignment="End" VerticalOptions="Center" Margin="0,0,0,0" TextColor="{ DynamicResource BaseTextColor }" FontSize="Small" Text="Interest Rate:" />
<Entry Grid.Column="1" Keyboard="Numeric" VerticalOptions="Center" x:Name="interestRate" Text="{Binding InterestRate}" ></Entry>
</Grid>
</Grid>
<!--term -->
<Grid Grid.Row="7">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2.5*"></ColumnDefinition>
<ColumnDefinition Width="6*"></ColumnDefinition>
<ColumnDefinition Width=".7*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" HorizontalTextAlignment="End" VerticalOptions="Center" Margin="0,0,0,0" TextColor="{ DynamicResource BaseTextColor }" FontSize="Small" Text="Term:" />
<Entry Keyboard="Numeric" Grid.Column="1" VerticalOptions="Center" x:Name="term" Text="{Binding Term}" ></Entry>
</Grid>
</Grid>
<!-- misc fees -->
<Grid Grid.Row="8">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2.5*"></ColumnDefinition>
<ColumnDefinition Width="6*"></ColumnDefinition>
<ColumnDefinition Width=".7*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" HorizontalTextAlignment="End" VerticalOptions="Center" Margin="0,0,0,0" TextColor="{ DynamicResource BaseTextColor }" FontSize="Small" Text="Misc Fees:" />
<Entry Grid.Column="1" Keyboard="Numeric" VerticalOptions="Center" x:Name="miscFees" Text="{Binding MiscFeesTotal}" ></Entry>
<Label TextColor="Gray" Grid.Column="2" Margin="0,-10,5,0"
VerticalTextAlignment="Center"
HorizontalTextAlignment="End" FontSize="Large"
Text="{ x:Static local:IonicIconsFont.GearA }">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="MiscFees_Tapped" />
</Label.GestureRecognizers>
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String" Android="ionicons.ttf#ionicons" iOS="Ionicons" />
</Label.FontFamily>
</Label>
</Grid>
</Grid>
<!--closing credits -->
<Grid Grid.Row="9">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2.5*"></ColumnDefinition>
<ColumnDefinition Width="6*"></ColumnDefinition>
<ColumnDefinition Width=".7*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" HorizontalTextAlignment="End" VerticalOptions="Center" Margin="0,0,0,0" TextColor="{ DynamicResource BaseTextColor }" FontSize="Small" Text="Closing Credits:" />
<Entry Grid.Column="1" Keyboard="Numeric" VerticalOptions="Center" x:Name="closingCreditsTotalEntry" Text="{Binding ClosingCreditsTotal}" ></Entry>
<Label TextColor="Gray" Grid.Column="2" Margin="0,-10,5,0"
VerticalTextAlignment="Center"
HorizontalTextAlignment="End" FontSize="Large"
Text="{ x:Static local:IonicIconsFont.GearA }">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="ColsingCredits_Tapped" />
</Label.GestureRecognizers>
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String" Android="ionicons.ttf#ionicons" iOS="Ionicons" />
</Label.FontFamily>
</Label>
</Grid>
</Grid>
<!--hazard -->
<Grid Grid.Row="10">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2.5*"></ColumnDefinition>
<ColumnDefinition Width="6*"></ColumnDefinition>
<ColumnDefinition Width=".7*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" HorizontalTextAlignment="End" VerticalOptions="Center" Margin="0,0,0,0" TextColor="{ DynamicResource BaseTextColor }" FontSize="Small" Text="Hazard Ins:" />
<Entry Grid.Row="0" Grid.Column="1" Keyboard="Numeric" VerticalOptions="Center" HorizontalOptions="FillAndExpand" x:Name="hazard" Text="{Binding HazardInsurance}" ></Entry>
</Grid>
</Grid>
<!--prpp tax -->
<Grid Grid.Row="11">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2.5*"></ColumnDefinition>
<ColumnDefinition Width="6*"></ColumnDefinition>
<ColumnDefinition Width=".7*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" HorizontalTextAlignment="End" VerticalOptions="Center" Margin="0,0,0,0" TextColor="{ DynamicResource BaseTextColor }" FontSize="Small" Text="Ann Prop. Tax:" />
<Entry Grid.Row="0" Keyboard="Numeric" Grid.Column="1" VerticalOptions="Center" x:Name="propTax" Text="{Binding AnnualPropertyTax}" ></Entry>
</Grid>
</Grid>
<!--tax proration-->
<Grid Grid.Row="12">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2.5*"></ColumnDefinition>
<ColumnDefinition Width="6*"></ColumnDefinition>
<ColumnDefinition Width=".7*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" HorizontalTextAlignment="End" VerticalOptions="Center" Margin="0,0,0,0" TextColor="{ DynamicResource BaseTextColor }" FontSize="Small" Text="Tax Proration:" />
<Entry Keyboard="Numeric" Grid.Column="1" VerticalOptions="Center" x:Name="taxProration" Text="{Binding TaxProration}" ></Entry>
</Grid>
</Grid>
<!--city trans tax (auto calc)-->
<Grid Grid.Row="13">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2.5*"></ColumnDefinition>
<ColumnDefinition Width="6*"></ColumnDefinition>
<ColumnDefinition Width=".7*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" HorizontalTextAlignment="End" VerticalOptions="Center" Margin="0,0,0,0" TextColor="{ DynamicResource BaseTextColor }" FontSize="Small" Text="City Tran Tax:" />
<Entry Keyboard="Numeric" Grid.Column="1" VerticalOptions="Center" x:Name="transTax" Text="{Binding CityTransferTax}" ></Entry>
</Grid>
</Grid>
<!--monthly hoa-->
<Grid Grid.Row="14">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2.5*"></ColumnDefinition>
<ColumnDefinition Width="6*"></ColumnDefinition>
<ColumnDefinition Width=".7*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" HorizontalTextAlignment="End" VerticalOptions="Center" Margin="0,0,0,0" TextColor="{ DynamicResource BaseTextColor }" FontSize="Small" Text="Monthly HOA:" />
<Entry Keyboard="Numeric" Grid.Column="1" VerticalOptions="Center" x:Name="hoa" Text="{Binding MonthlyHOA}" ></Entry>
</Grid>
</Grid>
<!--closing date-->
<Grid Grid.Row="15">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2.5*"></ColumnDefinition>
<ColumnDefinition Width="6*"></ColumnDefinition>
<ColumnDefinition Width=".7*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" HorizontalTextAlignment="End" VerticalOptions="Center" Margin="0,0,0,0" TextColor="{ DynamicResource BaseTextColor }" FontSize="Small" Text="Closing Date:" />
<DatePicker Grid.Column="1" VerticalOptions="Center" x:Name="ClosingDatePicker"></DatePicker>
</Grid>
</Grid>
<!--attorney-->
<Grid Grid.Row="16">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2.5*"></ColumnDefinition>
<ColumnDefinition Width="6*"></ColumnDefinition>
<ColumnDefinition Width=".7*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" HorizontalTextAlignment="End" VerticalOptions="Center" Margin="0,0,0,0" TextColor="{ DynamicResource BaseTextColor }" FontSize="Small" Text="Attorney:" />
<Picker Grid.Column="1" x:Name="attorneyPicker"></Picker>
</Grid>
</Grid>
</Grid>
Update:
Removing a parent AbsoluteLayout Solved the issue.
I faced this one before now apparently it happens because your layout's options are not set to expand what I did to fix it was something like this:
<Grid Grid.Row="0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2.5*"></ColumnDefinition>
<ColumnDefinition Width="6*"></ColumnDefinition>
<ColumnDefinition Width=".7*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" HorizontalTextAlignment="End" VerticalOptions="FillAndExpamd" TextColor="{ DynamicResource BaseTextColor }" FontSize="Small" Text="Purchase Price:" HorizontalOptions="FillAndExpamd" />
<Entry Grid.Column="1" Keyboard="Numeric" VerticalOptions="CenterAndExpand" x:Name="purchasePrice" Text="{Binding SalesPrice}" ></Entry>
</Grid>
</Grid>

Vertiical Scrollview not working in xamarin forms.?

I'm trying to scroll the xfxCardview in Xamarin Forms. But it is not scrolling. This is my code
<ScrollView Orientation = "Vertical" VerticalOptions="FillAndExpand">
<StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand">
<xfx:XfxCardView
BackgroundColor="White"
CornerRadius="30"
Elevation="20"
HeightRequest="160" IsClippedToBounds="True" VerticalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal">
<Grid VerticalOptions="CenterAndExpand"
Padding="0"
HorizontalOptions="FillAndExpand"
BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Frame Margin="10,5,5,-20" CornerRadius="10" Grid.RowSpan="3" BackgroundColor="LightBlue" IsClippedToBounds="True">
<Image Margin="-70,-70,-70,-70" Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="restaurantimage1.jpg" />
</Frame>
<Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="4" Margin="0,10,0,0" TextColor="Black" FontFamily="Bold,100" Text="Premera restaurant" />
<Image Grid.Row="0" Grid.Column="5" Margin="0,10,0,0" Source="whitehearticon3"/>
<Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="6" Text="Avenue Road, 256" TextColor="Blue" />
<Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="6" Text="Indian,Italy,Chinese Kitchen" />
<Image Grid.Row="3" Grid.Column="1" Source="whitestaricon1"/>
<Label Grid.Row="3" Grid.Column="2" HeightRequest="30" Text="4,3" />
<Image Grid.Row="3" Grid.Column="3" Margin="-10,0,0,0" Source="rupeeicon1"/>
<Label Grid.Row="3" Grid.Column="4" Margin="-10,0,0,0" Text="150 min" />
<Image Grid.Row="3" Grid.Column="5" Margin="-20,0,0,0" Source="handicon1"/>
<Label Grid.Row="3" Grid.Column="6" Margin="-10,0,0,0" HeightRequest="10" Text="Free 3kms" />
</Grid>
</StackLayout>
</xfx:XfxCardView>
<xfx:XfxCardView
BackgroundColor="White"
CornerRadius="30"
Elevation="20"
HeightRequest="160" IsClippedToBounds="True" VerticalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal">
<Grid VerticalOptions="CenterAndExpand"
Padding="0"
HorizontalOptions="FillAndExpand"
BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Frame Margin="10,5,5,-20" CornerRadius="10" Grid.RowSpan="3" BackgroundColor="LightBlue" IsClippedToBounds="True">
<Image Margin="-70,-70,-70,-70" Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="restaurantimage2.jpg" />
</Frame>
<Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="4" Margin="0,10,0,0" TextColor="Black" FontFamily="Bold,100" Text="Pesto restaurant" />
<Image Grid.Row="0" Grid.Column="5" Margin="0,10,0,0" Source="whitehearticon3"/>
<Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="6" Text="Bodhami Road, 6" TextColor="Blue" />
<Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="6" Text="Indian,Italy,Chinese Kitchen" />
<Image Grid.Row="3" Grid.Column="1" Source="whitestaricon1"/>
<Label Grid.Row="3" Grid.Column="2" HeightRequest="30" Text="3,0" />
<Label Grid.Row="3" Grid.Column="4" Grid.ColumnSpan="3" Text="No available" TextColor="Blue" />
</Grid>
</StackLayout>
</xfx:XfxCardView>
<Label Text="RESTAURANTS AWAY FROM YOU" TextColor="#595959" HeightRequest="30"></Label>
<Label Text="25 Restaurants finded" TextColor="#d9d9d9" HeightRequest="20"></Label>
<xfx:XfxCardView
BackgroundColor="White"
CornerRadius="30"
Elevation="20"
HeightRequest="160" IsClippedToBounds="True" VerticalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal">
<Grid VerticalOptions="CenterAndExpand"
Padding="0"
HorizontalOptions="FillAndExpand"
BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Frame Margin="10,5,5,-20" CornerRadius="10" Grid.RowSpan="3" BackgroundColor="LightBlue" IsClippedToBounds="True">
<Image Margin="-70,-70,-70,-70" Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="restaurantimage3.jpg" />
</Frame>
<Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="4" Margin="0,10,0,0" TextColor="Black" FontFamily="Bold,100" Text="Hero" />
<Image Grid.Row="0" Grid.Column="5" Margin="0,10,0,0" Source="whitehearticon3"/>
<Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="6" Text="Line street,2" TextColor="Blue" />
<Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="6" Text="Indian,Italy,Chinese Kitchen" />
<Image Grid.Row="3" Grid.Column="1" Source="whitestaricon1"/>
<Label Grid.Row="3" Grid.Column="2" HeightRequest="30" Text="4,3" />
<Image Grid.Row="3" Grid.Column="3" Margin="-10,0,0,0" Source="rupeeicon1"/>
<Label Grid.Row="3" Grid.Column="4" Margin="-10,0,0,0" Text="150 min" />
<Image Grid.Row="3" Grid.Column="5" Margin="-20,0,0,0" Source="handicon1"/>
<Label Grid.Row="3" Grid.Column="6" Margin="-10,0,0,0" HeightRequest="10" Text="Free 3kms" />
</Grid>
</StackLayout>
</xfx:XfxCardView>
</StackLayout>
</ScrollView>
I don't know what is wrong with my code I'm setting orientation as vertical also I'm setting VerticalOptions as fill and expand. Will the scroll view work or should I put the XfxCardview inside a Listview. This is the how my current UI looks like
and the UI doesn't scroll to the bottom.
In Android, the issue is due to the card height. Three cardviews are aligned perfectly with the screen. That's the reason, you are not seeing scrollview in Android. Scrollview functionality will be available only if the the content inside scrollview is greater than scrollview height. To solve this, try the below solution. Add add more cardviews, you will see the scrollview. Another solution is, I've added height as 300 to the scrollview. You can test and modify based on your requirement.
<ScrollView HeightRequest="300" Orientation = "Vertical" VerticalOptions="FillAndExpand">
<StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand">
<xfx:XfxCardView
BackgroundColor="White"
CornerRadius="30"
Elevation="20"
HeightRequest="260" IsClippedToBounds="True" VerticalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal">
<Grid VerticalOptions="CenterAndExpand"
Padding="0"
HorizontalOptions="FillAndExpand"
BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Frame Margin="10,5,5,-20" CornerRadius="10" Grid.RowSpan="3" BackgroundColor="LightBlue" IsClippedToBounds="True">
<Image Margin="-70,-70,-70,-70" Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="restaurantimage1.jpg" />
</Frame>
<Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="4" Margin="0,10,0,0" TextColor="Black" FontFamily="Bold,100" Text="Premera restaurant" />
<Image Grid.Row="0" Grid.Column="5" Margin="0,10,0,0" Source="whitehearticon3"/>
<Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="6" Text="Avenue Road, 256" TextColor="Blue" />
<Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="6" Text="Indian,Italy,Chinese Kitchen" />
<Image Grid.Row="3" Grid.Column="1" Source="whitestaricon1"/>
<Label Grid.Row="3" Grid.Column="2" HeightRequest="30" Text="4,3" />
<Image Grid.Row="3" Grid.Column="3" Margin="-10,0,0,0" Source="rupeeicon1"/>
<Label Grid.Row="3" Grid.Column="4" Margin="-10,0,0,0" Text="150 min" />
<Image Grid.Row="3" Grid.Column="5" Margin="-20,0,0,0" Source="handicon1"/>
<Label Grid.Row="3" Grid.Column="6" Margin="-10,0,0,0" HeightRequest="10" Text="Free 3kms" />
</Grid>
</StackLayout>
</xfx:XfxCardView>
<xfx:XfxCardView
BackgroundColor="White"
CornerRadius="30"
Elevation="20"
HeightRequest="260" IsClippedToBounds="True" VerticalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal">
<Grid VerticalOptions="CenterAndExpand"
Padding="0"
HorizontalOptions="FillAndExpand"
BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Frame Margin="10,5,5,-20" CornerRadius="10" Grid.RowSpan="3" BackgroundColor="LightBlue" IsClippedToBounds="True">
<Image Margin="-70,-70,-70,-70" Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="restaurantimage2.jpg" />
</Frame>
<Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="4" Margin="0,10,0,0" TextColor="Black" FontFamily="Bold,100" Text="Pesto restaurant" />
<Image Grid.Row="0" Grid.Column="5" Margin="0,10,0,0" Source="whitehearticon3"/>
<Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="6" Text="Bodhami Road, 6" TextColor="Blue" />
<Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="6" Text="Indian,Italy,Chinese Kitchen" />
<Image Grid.Row="3" Grid.Column="1" Source="whitestaricon1"/>
<Label Grid.Row="3" Grid.Column="2" HeightRequest="30" Text="3,0" />
<Label Grid.Row="3" Grid.Column="4" Grid.ColumnSpan="3" Text="No available" TextColor="Blue" />
</Grid>
</StackLayout>
</xfx:XfxCardView>
<Label Text="RESTAURANTS AWAY FROM YOU" TextColor="#595959" HeightRequest="30"></Label>
<Label Text="25 Restaurants finded" TextColor="#d9d9d9" HeightRequest="20"></Label>
<xfx:XfxCardView
BackgroundColor="White"
CornerRadius="30"
Elevation="20"
HeightRequest="260" IsClippedToBounds="True" VerticalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal">
<Grid VerticalOptions="CenterAndExpand"
Padding="0"
HorizontalOptions="FillAndExpand"
BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Frame Margin="10,5,5,-20" CornerRadius="10" Grid.RowSpan="3" BackgroundColor="LightBlue" IsClippedToBounds="True">
<Image Margin="-70,-70,-70,-70" Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="restaurantimage3.jpg" />
</Frame>
<Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="4" Margin="0,10,0,0" TextColor="Black" FontFamily="Bold,100" Text="Hero" />
<Image Grid.Row="0" Grid.Column="5" Margin="0,10,0,0" Source="whitehearticon3"/>
<Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="6" Text="Line street,2" TextColor="Blue" />
<Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="6" Text="Indian,Italy,Chinese Kitchen" />
<Image Grid.Row="3" Grid.Column="1" Source="whitestaricon1"/>
<Label Grid.Row="3" Grid.Column="2" HeightRequest="30" Text="4,3" />
<Image Grid.Row="3" Grid.Column="3" Margin="-10,0,0,0" Source="rupeeicon1"/>
<Label Grid.Row="3" Grid.Column="4" Margin="-10,0,0,0" Text="150 min" />
<Image Grid.Row="3" Grid.Column="5" Margin="-20,0,0,0" Source="handicon1"/>
<Label Grid.Row="3" Grid.Column="6" Margin="-10,0,0,0" HeightRequest="10" Text="Free 3kms" />
</Grid>
</StackLayout>
</xfx:XfxCardView>
</StackLayout>
</ScrollView>
Your xaml looks ok, try check few things:
that you don't have a forgotten custom renderer for scrollview with disabled scroll included in android project
check that it scrolls without elevations set, might be a bug
another "bug" i can imagine: looks at the last card: it is possible that it just didn't take its 160 height but just filled the parent with VerticalOptions="FillAndExpand" so there's nothing to scroll. And card's content was clipped with IsClippedToBounds="True" so it didn't Expand the card.

How to fit a picture inside vertical stack layout?

there should be a page that looks like following:
<ContentView>
<StackLayout Padding="20, 50, 20, 20"
VerticalOptions="Start">
<Image Source=""
x:Name="selfie"
VerticalOptions="StartAndExpand"/>
<StackLayout Orientation="Horizontal"
HorizontalOptions="Center"
VerticalOptions="End">
<Button Text="Choose from gallery"
FontSize="Medium"
HeightRequest="60"
x:Name="galleryButton"
Clicked="OnGalleryButtonClicked" />
<Button Text="Take a selfie"
FontSize="Medium"
HeightRequest="60"
x:Name="cameraButton"
Clicked="OnCameraButtonClicked" />
</StackLayout>
<Frame Padding="0, 20, 0, 0"
VerticalOptions="End">
<Button Text="Submit"
FontSize="Medium"
HeightRequest="60"
x:Name="submitButton" />
</Frame>
</StackLayout>
</ContentView>
When galleryButton or cameraButton are clicked, user is taken to phone image gallery or camera, in order to select or take a picture. Then, this picture is displayed in selife image. The problem is, that I don't know how to make image fill exactly the space left after all three buttons are displayed. How can I do that? I tiried several combinations of VerticalOptions, as you can see, but none of them worked.
So I got rid of the stack layout and worked with a grid instead. Hope that doesn't cause too much of a problem. Try this:
<ContentView>
<Grid HorizontalOptions="StartAndExpand"
VerticalOptions="FillAndExpand"
Padding="20, 50, 20, 20"
>
<!-- Grid row and column formatting -->
<Grid.RowDefinitions>
<RowDefinition Height="*" /> <!-- Selfie -->
<RowDefinition Height="auto" /> <!-- Buttons -->
<RowDefinition Height="auto" /> <!-- Submit -->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- End grid row and column formatting -->
<Image Source="icon.png"
x:Name="selfie"
VerticalOptions="Fill"
HorizontalOptions="Fill"
Grid.Column="0"
Grid.Row="0"
Aspect="Fill"/>
<Grid HorizontalOptions="Fill"
VerticalOptions="End"
Grid.Column="0"
Grid.Row="1">
<!-- Grid row and column formatting -->
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- End grid row and column formatting -->
<Button Text="Choose from gallery"
FontSize="Medium"
HeightRequest="60"
x:Name="galleryButton"
HorizontalOptions="CenterAndExpand"
Grid.Column="0"
Grid.Row="0"
/>
<Button Text="Take a selfie"
FontSize="Medium"
HeightRequest="60"
x:Name="cameraButton"
HorizontalOptions="CenterAndExpand"
Grid.Column="1"
Grid.Row="0"
/>
</Grid>
<Frame Padding="0, 20, 0, 0"
VerticalOptions="End"
Grid.Column="0"
Grid.Row="2">
<Button Text="Submit"
FontSize="Medium"
HeightRequest="60"
x:Name="submitButton" />
</Frame>
</Grid>
</ContentView>

Resources