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