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.
Related
I am using grid to implement the navigation bar. I tried using to grid row and adjusted the rowspan of the center image to 2 but somehow I cant replicate what is in the image. Any help is much appreciated. Thanks in advance! Attached is the code for my navigation bar
Grid VerticalOptions="EndAndExpand"
BackgroundColor="Red"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.10}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.90}">
<Grid.RowDefinitions>
<RowDefinition Height="0.1*"/>
<RowDefinition Height="44"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="navbar_background.png" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="11" Aspect="Fill" HorizontalOptions="FillAndExpand"/>
<components:ImageComponent SetSource="icon_home_default.png" Grid.Row="1" Grid.Column="1" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
<components:ImageComponent.GestureRecognizers>
<TapGestureRecognizer Tapped="HomeClicked"/>
</components:ImageComponent.GestureRecognizers>
</components:ImageComponent>
<components:ImageComponent x:Name="BranchFinderBtnDefualt" SetSource="icon_branchfinder_default.png" Grid.Row="0" Grid.Column="5" Grid.RowSpan="2" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" IsVisible="True">
<components:ImageComponent.GestureRecognizers>
<TapGestureRecognizer Tapped="BranchFinderClicked"/>
</components:ImageComponent.GestureRecognizers>
</components:ImageComponent>
<components:ImageComponent x:Name="BranchFinderBtnCurrentPage" SetSource="icon_branchfinder_currentpage.png" Grid.Row="0" Grid.Column="5" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" IsVisible="False">
<components:ImageComponent.GestureRecognizers>
<TapGestureRecognizer Tapped="BranchFinderClicked"/>
</components:ImageComponent.GestureRecognizers>
</components:ImageComponent>
</Grid>
You can further fine tune it , but this should help
<Grid Padding="0" Margin="0" ColumnSpacing="0" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="90*"/>
<RowDefinition Height="25"/>
<RowDefinition Height="10*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="1.35*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="5" BackgroundColor="White" HorizontalOptions="Fill" VerticalOptions="Fill">
<Label Text="My Page" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
</StackLayout>
<BoxView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="5" HorizontalOptions="FillAndExpand" VerticalOptions="Start" HeightRequest="3"
Color="LightGray"/>
<Image Grid.Row="2" Grid.Column="0" VerticalOptions="CenterAndExpand" Source="home"/>
<Image Grid.Row="2" Grid.Column="1" VerticalOptions="CenterAndExpand" Source="card"/>
<Image Grid.Row="2" Grid.Column="3" VerticalOptions="CenterAndExpand" Source="bag"/>
<Image Grid.Row="2" Grid.Column="4" VerticalOptions="CenterAndExpand" Source="inbox"/>
<Label Grid.Row="2" Grid.Column="0" VerticalOptions="EndAndExpand" Text="Home" HorizontalOptions="CenterAndExpand" Margin="0,2"/>
<Label Grid.Row="2" Grid.Column="1" VerticalOptions="EndAndExpand" Text="Cards" HorizontalOptions="CenterAndExpand" Margin="0,2"/>
<Label Grid.Row="2" Grid.Column="2" VerticalOptions="EndAndExpand" Text="Scan to Pay" HorizontalOptions="CenterAndExpand" Margin="0,2"/>
<Label Grid.Row="2" Grid.Column="3" VerticalOptions="EndAndExpand" Text="Shop" HorizontalOptions="CenterAndExpand" Margin="0,2"/>
<Label Grid.Row="2" Grid.Column="4" VerticalOptions="EndAndExpand" Text="Inbox" HorizontalOptions="CenterAndExpand" Margin="0,2"/>
<Frame Grid.Row="1" Grid.Column="2" Grid.RowSpan="2" VerticalOptions="Start" WidthRequest="60" HeightRequest="60" Padding="0" Margin="0,-5,0,0"
HasShadow="False" HorizontalOptions="Center" CornerRadius="30" BackgroundColor="LightBlue" BorderColor="White">
<Image Source="barcode" Margin="12"/>
</Frame>
</Grid>
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 need to create a table, using list view in xamarin forms. I am able to create list view with five columns. But I can't able to give header for the columns and lines. If anyone know how to create the table structure with headers please help me. Thanks in advance.
This is my source code for table[Header and Listview]
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Padding="40,10,10,40" Spacing="0">
<BoxView HeightRequest="1" BackgroundColor="Black"></BoxView>
<StackLayout Orientation="Horizontal" Spacing="40">
<BoxView WidthRequest="1" HeightRequest="10" BackgroundColor="Black" HorizontalOptions="Start" VerticalOptions="Fill" />
<StackLayout Orientation="Horizontal" Spacing="1" HorizontalOptions="StartAndExpand">
<controls:CheckBox></controls:CheckBox>
<Label Text="Select All" FontAttributes="Bold" HorizontalOptions="Center" VerticalOptions="Center"></Label>
</StackLayout>
<BoxView WidthRequest="1" HeightRequest="10" BackgroundColor="Black" HorizontalOptions="Start" VerticalOptions="Fill" />
<StackLayout Orientation="Horizontal" Spacing="1" HorizontalOptions="StartAndExpand">
<Label Text="Last Name, First Name" HorizontalOptions="Center" VerticalOptions="Center" FontAttributes="Bold"></Label>
<Button Text=">" HeightRequest="5" WidthRequest="5"></Button>
</StackLayout>
<BoxView WidthRequest="1" HeightRequest="10" BackgroundColor="Black" HorizontalOptions="Start" VerticalOptions="Fill" />
<Label Text="Child ID" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
<BoxView WidthRequest="1" HeightRequest="10" BackgroundColor="Black" HorizontalOptions="Start" VerticalOptions="Fill" />
<Label Text="Date of Birth" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
<BoxView WidthRequest="1" HeightRequest="10" BackgroundColor="Black" HorizontalOptions="Start" VerticalOptions="Fill" />
<Label Text="Location" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
<BoxView WidthRequest="1" HeightRequest="10" BackgroundColor="Black" HorizontalOptions="Start" VerticalOptions="Fill" />
<Label Text="Enrollment" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
<BoxView WidthRequest="1" HeightRequest="10" BackgroundColor="Black" HorizontalOptions="Start" VerticalOptions="Fill" />
<Label Text="Actions" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
<BoxView WidthRequest="1" HeightRequest="10" BackgroundColor="Black" HorizontalOptions="Start" VerticalOptions="Fill" />
</StackLayout>
<BoxView HeightRequest="1" BackgroundColor="Black"></BoxView>
</StackLayout>
<StackLayout Padding="40,10,10,40" HeightRequest="200" Grid.Row="1" Spacing="0">
<ListView ItemsSource="{Binding ChildRecords}" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout>
<!-- <BoxView HeightRequest="1" BackgroundColor="Black"></BoxView>-->
<StackLayout Orientation="Horizontal">
<BoxView WidthRequest="1" HeightRequest="15" BackgroundColor="Black" HorizontalOptions="Start" />
<StackLayout Orientation="Horizontal" Spacing="1" HorizontalOptions="StartAndExpand">
<Label Text="Select All" FontAttributes="Bold" HorizontalOptions="Center" VerticalOptions="Center"></Label>
</StackLayout>
<BoxView WidthRequest="1" HeightRequest="15" BackgroundColor="Black" HorizontalOptions="Start" />
<StackLayout Orientation="Horizontal" Spacing="1" HorizontalOptions="StartAndExpand">
<Label Text="Last Name, First Name" HorizontalOptions="Center" VerticalOptions="Center" FontAttributes="Bold"></Label>
<Button Text=">" HeightRequest="5" WidthRequest="5"></Button>
</StackLayout>
<BoxView WidthRequest="1" BackgroundColor="Black" HorizontalOptions="Start" HeightRequest="15" />
<Label Text="Child ID" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
<BoxView WidthRequest="1" BackgroundColor="Black" HorizontalOptions="Start" HeightRequest="15" />
<Label Text="Date of Birth" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
<BoxView WidthRequest="1" BackgroundColor="Black" HorizontalOptions="Start" HeightRequest="15" />
<Label Text="Location" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
<BoxView WidthRequest="1" BackgroundColor="Black" HorizontalOptions="Start" HeightRequest="15" />
<Label Text="Enrollment" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
<BoxView WidthRequest="1" BackgroundColor="Black" HorizontalOptions="Start" HeightRequest="15" />
<Label Text="Actions" HorizontalOptions="StartAndExpand" VerticalOptions="Center" FontAttributes="Bold"></Label>
<BoxView WidthRequest="1" BackgroundColor="Black" HorizontalOptions="Start" HeightRequest="15"/>
</StackLayout>
<BoxView HeightRequest="1" BackgroundColor="Black"></BoxView>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</Grid>
Typically what I like to do is create a Grid above the ListView for a Header, and then create ViewCells containing Grids within the ListView with the same column widths.
As an example:
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="Start" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Label Grid.Column="0" Text="Heading 1" />
<Label Grid.Column="1" Text="Heading 2" />
<Label Grid.Column="2" Text="Heading 3" />
</Grid>
<ListView ItemsSource="{}" HasUnevenRows="true" HeightRequest="200" SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid Margin="0" Padding="0" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Margin="0" Text="{Binding data1}" />
<Label Grid.Column="1" Margin="0" Text="{Binding data2}" />
<Label Grid.Column="2" Margin="0" Text="{Binding data3}" />
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Note also the ListView comes with a Header, which is useful if you want the header to scroll with the items in the ListView. Have a look at this documentation: Customizing ListView Appearance
If you want a quick/professional looking way, you can try Synfucion DataGrid custom control for Xamarin. They are free to use if your company earn less than 1 millions.
you can use Grid for that purpose make the first row of the grid as the header, you can easily change the style on the header only. Here is the sample yo create 3 rows and two column
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
</Grid>
<ContentPage.Content>
<ScrollView VerticalOptions="Fill" HorizontalOptions="Fill">
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand" RowSpacing="0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Grid.Column="0" Text="Entry Name" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold"/>
<Label Grid.Column="1" Text="Entry Date" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold" />
<Label Grid.Column="2" Text="Enty Type" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold" />
<Label Grid.Column="3" Text="Transaction Type" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold"/>
<Label Grid.Column="4" Text="Cashflow " BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold" />
<Label Grid.Column="5" Text="Particular" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold" />
<Label Grid.Column="6" Text="VoucherNumber" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold" />
<Label Grid.Column="7" Text="LedgerFolio" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold" />
<Label Grid.Column="8" Text="Amount" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold" />
<Label Grid.Column="9" Text="PurchaseInvoice" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold" />
<Label Grid.Column="10" Text="Credit Or Debit" BackgroundColor="LightGreen" TextColor="Black" FontAttributes="Bold"/>
<ListView x:Name="ContentListview" HasUnevenRows="true" HeightRequest="200" SeparatorVisibility="None" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="11" HorizontalScrollBarVisibility="Default" VerticalScrollBarVisibility="Default">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid Margin="0" Padding="0" RowSpacing="0">
<Label Grid.Column="0" Text="{Binding EntryName}" TextColor="Black" />
<Label Grid.Column="1" Text="{Binding EntryDate}" TextColor="Black" />
<Label Grid.Column="2" Text="{Binding EntyType}" TextColor="Black" />
<Label Grid.Column="3" Text="{Binding TransactionType}" TextColor="Black" />
<Label Grid.Column="4" Text="{Binding Cashflow}" TextColor="Black" />
<Label Grid.Column="5" Text="{Binding Particular}" TextColor="Black" />
<Label Grid.Column="6" Text="{Binding VoucherNumber}" TextColor="Black" />
<Label Grid.Column="7" Text="{Binding LedgerFolio}" TextColor="Black" />
<Label Grid.Column="8" Text="{Binding Amount}" TextColor="Black" />
<Label Grid.Column="9" Text="{Binding PurchaseInvoice}" TextColor="Black" />
<Label Grid.Column="10" Text="{Binding CreditOrDebit}" TextColor="Black" />
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</ScrollView>
</ContentPage.Content>
This is what I did, and the picture below is its outcome.Xamarin form result. Sorry, cannot show my code behind.
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 have a card view and in that, I have an image. I have to set the corner radius for that image so I'm using frames for doing that.
This is the UI I need and I have marked the Image
This is the result I'm getting
.
This is my code
<xfx:XfxCardView
BackgroundColor="White"
CornerRadius="30"
Elevation="30"
HeightRequest="100" >
<Grid RowSpacing="0">
<Grid ColumnSpacing="0">
<Grid.RowDefinitions >
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Frame CornerRadius="10" Margin="0" Padding="0" IsClippedToBounds="True">
<Image Margin="-70,0,0,0" Source="restaurantimage1.jpg" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3"/>
</Frame>
<Label Grid.Row="0" Grid.Column="1" Margin="0,0,100,0" BackgroundColor="Aqua" HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>
<Label Grid.Row="1" Grid.Column="1" Margin="0,0,100,0" BackgroundColor="Green" HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>
<Label Grid.Row="2" Grid.Column="1" Margin="0,0,100,0" BackgroundColor="LightBlue" VerticalTextAlignment="Start" Text="Indian,Italy,Chinese" TextColor="LightGray"/>
</Grid>
</Grid>
</xfx:XfxCardView>
I have made changes in corner radius and margins but I'm not getting the desired result. Do I have to use something else to do that or should I make any changes in the Frame.
I have done some changes in code so and I'm slightly near to the desired output.
This is the current output
There is still a gap in the frame as you can see I have made changes in the code but still it is not getting fixed. This is my code
<xfx:XfxCardView
BackgroundColor="White"
CornerRadius="30"
Elevation="30"
HeightRequest="100" >
<Grid RowSpacing="0">
<Grid ColumnSpacing="0">
<Grid.RowDefinitions >
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Frame Margin="0" Padding="-40" CornerRadius="25" Grid.RowSpan="3" BackgroundColor="LightBlue" IsClippedToBounds="True">
<Image Margin="-70,0,0,0" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" BackgroundColor="AliceBlue" Source="restaurantimage1.jpg" />
</Frame>
<Label Grid.Row="0" Grid.Column="1" Margin="0,0,100,0" HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>
<Label Grid.Row="1" Grid.Column="1" Margin="0,0,100,0" HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>
<Label Grid.Row="2" Grid.Column="1" Margin="0,0,100,0" VerticalTextAlignment="Start" Text="Indian,Italy,Chinese" TextColor="LightGray"/>
</Grid>
</Grid>
</xfx:XfxCardView>
Try setting the is clipped to bounds property as true in your Grid's xaml
<Grid RowSpacing="0" IsClippedToBounds="True">
I fixed it by changing the margin of my frame. This is my code now
<xfx:XfxCardView
BackgroundColor="White"
CornerRadius="30"
Elevation="20"
HeightRequest="150" IsClippedToBounds="True">
<Grid RowSpacing="0" >
<Grid ColumnSpacing="0">
<Grid.RowDefinitions >
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Frame Margin="10,10,10,20" Padding="-40" CornerRadius="10" Grid.RowSpan="3" BackgroundColor="LightBlue" IsClippedToBounds="True">
<Image Margin="-70,0,0,0" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" BackgroundColor="AliceBlue" Source="restaurantimage1.jpg" />
</Frame>
<Label Grid.Row="0" Grid.Column="1" Margin="0,30,30,0" HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>
<Image Grid.Row="0" Grid.Column="1" Margin="0,30,10,0" HorizontalOptions="End" Source="whitehearticon3.jpg"/>
<Label Grid.Row="1" Grid.Column="1" Margin="0,-20,40,0" HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>
<Label Grid.Row="2" Grid.Column="1" Margin="0,0,40,0" VerticalTextAlignment="Start" Text="Indian,Italy,Chinese Kitchen" TextColor="LightGray"/>
</Grid>
</Grid>
</xfx:XfxCardView>