I do have the following XAML code. And the output is as shown below in the picture. How can I achieve to fill the image within its grid in the frame? Thank you for your help.
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10,20,10,0">
<Frame
Margin="5"
BackgroundColor="AntiqueWhite"
CornerRadius="20"
HasShadow="True"
HeightRequest="200"
HorizontalOptions="FillAndExpand">
<Grid RowDefinitions="7*,3*">
<Image
Grid.Row="0"
x:DataType="products:PopularProduct"
Aspect="AspectFill"
HorizontalOptions="FillAndExpand"
Source="{Binding FullImageUrl}"
VerticalOptions="FillAndExpand" />
</Grid>
</Frame>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
I would make use of StackLayout with something like this
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout
HorizontalOptions="FillAndExpand"
Orientation="Horizontal"
VerticalOptions="FillAndExpand">
<Frame
Margin="10,20,10,20"
Padding="0"
BackgroundColor="AntiqueWhite"
HasShadow="False"
HeightRequest="200"
HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical">
<Frame
Padding="0"
CornerRadius="20"
HasShadow="True"
IsClippedToBounds="True">
<Grid RowDefinitions="7*,3*">
<Image
Grid.Row="0"
x:DataType="products:PopularProduct"
Aspect="AspectFill"
HorizontalOptions="FillAndExpand"
Source="{Binding FullImageUrl}"
VerticalOptions="FillAndExpand" />
<StackLayout
Grid.Row="1"
Margin="10"
Orientation="Vertical">
<Label Text="Any label if you want here" />
</StackLayout>
</Grid>
</Frame>
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
I am having some weird issues with my Tableview.
It cuts off half screen, but when I go on Debug mode it works fine.
I am using AbsoluteLayout but I am filling in the entire screen, at least what I think I am.
Only on this page though, all other pages look fine. This is the only page I am using a Tableview not sure if this is related. Only happen on iOS, and it affects when I download it from visual studio directly and also when I distribute it through App center so in this case I don't think it is the simulator or Visual studio. Any thoughts?
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Example123.MoreContentPage"
xmlns:local="clr-namespace:Example123.MarkupExtensions"
Title="More Settings">
<ContentPage.Content>
<AbsoluteLayout>
<StackLayout Padding="5" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
<TableView x:Name="MoreTable"
HasUnevenRows="True"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<TableRoot>
<TableSection>
<ViewCell>
<StackLayout Orientation="Horizontal"
BackgroundColor="#f7f7fb">
<Label Text="Preferences"
VerticalOptions="Center"
Margin="15,0,5,5"
FontSize="17"
Padding="10"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="OpenFontSizing">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="settings.png"
Margin="10,10,0,10"
WidthRequest="23"/>
<Label Text="App Settings - Adjust text Size"
VerticalTextAlignment="Center"
Margin="15,5,10,5"
Padding="2"
x:Name="label1"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Terms of Use"
VerticalOptions="Center"
Margin="15,0,5,5"
FontSize="17"
Padding="10"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="OpenTermsandConditions">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="accept.png" WidthRequest="23" Margin="10,10,0,10"/>
<Label Text="Terms of Use"
Margin="15,5,10,5"
Padding="2"
VerticalTextAlignment="Center"
FontSize="{Binding H2Font}"
TextColor="#5e5e5e"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="DownloadRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="download.png" Margin="10,10,0,10" WidthRequest="23"/>
<Label Text="Download our App!"
VerticalOptions="CenterAndExpand"
Margin="15,5,10,5"
Padding="2"
VerticalTextAlignment="Center"
LineBreakMode="WordWrap"
x:Name="label2"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Contact Specialty"
VerticalOptions="Center"
Margin="15,0,5,5"
Padding="10"
FontSize="17"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="SendEmail">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="envelope.png" Margin="10,10,0,10" WidthRequest="23"/>
<Label Text="Feedback or Questions"
VerticalOptions="Center"
Margin="15,5,10,5"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label3"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="News"
VerticalOptions="Center"
Margin="15,0,5,5"
Padding="10"
FontSize="17"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="TWRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="twitterFinal.png" Margin="10,10,0,10"
WidthRequest="23" />
<Label Text="Product News"
VerticalOptions="Center"
Margin="15,5,10,5"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label4"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Share Market®"
VerticalOptions="Center"
Margin="15,0,5,5"
FontSize="17"
Padding="10"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="SeasonalRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="search_share.png" Margin="10,10,0,10"
WidthRequest="23" />
<Label Text="In Season Now! List"
VerticalOptions="Center"
Margin="15,5,10,5"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label5"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="SMRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="add.png" Margin="10,10,0,10" WidthRequest="23" />
<Label Text="Sign up for Share Market® HIghlights Newsletter"
VerticalOptions="Center"
Margin="15,5,10,5"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label6"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Social Networks"
VerticalOptions="Center"
Margin="15,5,10,5"
Padding="10"
FontSize="17"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="FBRedirect" >
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="facebook.png" Margin="10,10,0,10" WidthRequest="23" />
<Label Text="Facebook"
VerticalOptions="Center"
Margin="15,0,5,0"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label7"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="IGRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="instagram.png" Margin="10,10,0,10" WidthRequest="23"/>
<Label Text="Instagram"
VerticalOptions="Center"
Margin="15,0,5,0"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label8"/>
</StackLayout>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
</StackLayout>
</AbsoluteLayout>
I ended up removing the StackLayout and adding the Layout Flags and Bounds to the TableView.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Example123.MoreContentPage"
xmlns:local="clr-namespace:Example123.MarkupExtensions"
Title="More Settings">
<ContentPage.Content>
<AbsoluteLayout>
<TableView x:Name="MoreTable"
HasUnevenRows="True"
AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
<TableRoot>
<TableSection>
<ViewCell>
<StackLayout Orientation="Horizontal"
BackgroundColor="#f7f7fb">
<Label Text="Preferences"
VerticalOptions="Center"
Margin="15,0,5,5"
FontSize="17"
Padding="10"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="OpenFontSizing">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="settings.png"
Margin="10,10,0,10"
WidthRequest="23"/>
<Label Text="App Settings - Adjust text Size"
VerticalTextAlignment="Center"
Margin="15,5,10,5"
Padding="2"
x:Name="label1"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Terms of Use"
VerticalOptions="Center"
Margin="15,0,5,5"
FontSize="17"
Padding="10"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="OpenTermsandConditions">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="accept.png" WidthRequest="23" Margin="10,10,0,10"/>
<Label Text="Terms of Use"
Margin="15,5,10,5"
Padding="2"
VerticalTextAlignment="Center"
FontSize="{Binding H2Font}"
TextColor="#5e5e5e"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="DownloadRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="download.png" Margin="10,10,0,10" WidthRequest="23"/>
<Label Text="Download our App!"
VerticalOptions="CenterAndExpand"
Margin="15,5,10,5"
Padding="2"
VerticalTextAlignment="Center"
LineBreakMode="WordWrap"
x:Name="label2"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Contact Specialty"
VerticalOptions="Center"
Margin="15,0,5,5"
Padding="10"
FontSize="17"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="SendEmail">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="envelope.png" Margin="10,10,0,10" WidthRequest="23"/>
<Label Text="Feedback or Questions"
VerticalOptions="Center"
Margin="15,5,10,5"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label3"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="News"
VerticalOptions="Center"
Margin="15,0,5,5"
Padding="10"
FontSize="17"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="TWRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="twitterFinal.png" Margin="10,10,0,10"
WidthRequest="23" />
<Label Text="Product News"
VerticalOptions="Center"
Margin="15,5,10,5"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label4"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Share Market®"
VerticalOptions="Center"
Margin="15,0,5,5"
FontSize="17"
Padding="10"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="SeasonalRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="search_share.png" Margin="10,10,0,10"
WidthRequest="23" />
<Label Text="In Season Now! List"
VerticalOptions="Center"
Margin="15,5,10,5"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label5"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="SMRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="add.png" Margin="10,10,0,10" WidthRequest="23" />
<Label Text="Sign up for Share Market® HIghlights Newsletter"
VerticalOptions="Center"
Margin="15,5,10,5"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label6"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Social Networks"
VerticalOptions="Center"
Margin="15,5,10,5"
Padding="10"
FontSize="17"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="FBRedirect" >
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="facebook.png" Margin="10,10,0,10" WidthRequest="23" />
<Label Text="Facebook"
VerticalOptions="Center"
Margin="15,0,5,0"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label7"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="IGRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="instagram.png" Margin="10,10,0,10" WidthRequest="23"/>
<Label Text="Instagram"
VerticalOptions="Center"
Margin="15,0,5,0"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label8"/>
</StackLayout>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
</AbsoluteLayout>
Needed same design of the form. My coding is this Xamarin form, Xamarin iOS, Android
<Frame Grid.Row="0" Grid.Column="0">
<Image
HeightRequest="50"
Source="Dash01.png"
WidthRequest="50" />
<Label Text="Cow Milk"/>
</Frame>
<BoxView
HeightRequest="3"
HorizontalOptions="Fill"
VerticalOptions="Start"
Color="DimGray" Grid.Row="1" Grid.Column="0" />
Try this Code
<StackLayout
Padding="0,10"
BackgroundColor="#e8f5e4"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<CollectionView
x:Name="foodList"
Grid.Row="1"
Margin="12,0"
HorizontalOptions="FillAndExpand"
ItemSizingStrategy="MeasureAllItems"
SelectionMode="Single"
VerticalOptions="FillAndExpand">
<CollectionView.ItemsLayout>
<GridItemsLayout
HorizontalItemSpacing="5"
Orientation="Vertical"
Span="2"
VerticalItemSpacing="5" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Frame
Margin="5"
Padding="0"
BackgroundColor="Pink"
CornerRadius="10"
HorizontalOptions="FillAndExpand"
VerticalOptions="Fill">
<StackLayout
Margin="0,0,0,10"
Padding="10"
BackgroundColor="White"
HorizontalOptions="FillAndExpand"
VerticalOptions="Fill">
<Image
Aspect="AspectFit"
HeightRequest="50"
HorizontalOptions="Center"
Source="star.png" />
<Label
FontSize="18"
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
Text="{Binding}" />
</StackLayout>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
Im making an Android application and Im trying to center right checkbox on all rows in the listview, but I cant do it.
I want do something like this. Thanks
https://imgur.com/FhecIT3
<StackLayout Orientation="Vertical">
<RelativeLayout>
<ListView ItemsSource="{Binding Funcionarios}"
HasUnevenRows="True"
Margin="20"
ItemTapped="ListView_ItemTapped">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<image:CircleImage Source="{Binding Imagem}" Aspect="AspectFill" WidthRequest="60"
HeightRequest="60" BorderColor="Black" BorderThickness="2">
</image:CircleImage>
<StackLayout Orientation="Vertical">
<Label Text="{Binding Nome}" FontSize="Large"/>
<Label Text="{Binding Zona}"/>
<CheckBox IsChecked="False" />
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</RelativeLayout>
</StackLayout>
Try
<ViewCell>
<StackLayout Orientation="Horizontal">
<image:CircleImage Source="{Binding Imagem}" Aspect="AspectFill" WidthRequest="60" HeightRequest="60" BorderColor="Black" BorderThickness="2"> </image:CircleImage>
<StackLayout Orientation="Vertical">
<Label Text="{Binding Nome}" FontSize="Large"/>
<Label Text="{Binding Zona}"/>
</StackLayout>
<StackLayout Orientation="Vertical" HorizontalOptions="End">
<CheckBox IsChecked="False" VerticalOptions="Center"/>
</StackLayout>
</StackLayout>
</ViewCell>
I'm building a CrossPlatform App in Xamarin!
I'm getting data from Web Api and it's working fine, the problem is that the data is showing in ListView like columns but I wanted to display that data in Cells View so I can add functionalities like left and right swipeand I don't know how to do this.
My current XAML UI:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="LastTry.Attendance">
<ListView x:Name="selectOrd" RowHeight="50" SeparatorColor="White"
HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell >
<StackLayout Orientation="Horizontal" >
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="{Binding id}" Font="9" TextColor="Black" />
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand" x:Name="employee_name" VerticalOptions="Center" >
<Label Text="{Binding employee_name}" Font="9" TextColor="Black" FontAttributes="Bold" HorizontalTextAlignment="Center"/>
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand" x:Name="employee_salary" VerticalOptions="Center" >
<Label Text="{Binding employee_salary}" Font="9" TextColor="Black" FontAttributes="Bold" HorizontalTextAlignment="Center"/>
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand" x:Name="employee_age" VerticalOptions="Center" >
<Label Text="{Binding employee_age}" Font="9" TextColor="Black" FontAttributes="Bold" HorizontalTextAlignment="Center"/>
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand" x:Name="profile_image" VerticalOptions="Center" >
<Label Text="{Binding profile_image}" Font="9" TextColor="Black" FontAttributes="Bold" HorizontalTextAlignment="Center"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
Here is an example how I want it:
Here is the code for the listview same as above:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MSPL.Views.HomePage">
<AbsoluteLayout>
<ListView x:Name="Demolist" BackgroundColor="White" ItemSelected="Demolist_ItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ImageCell Height="30"
Text="{Binding employee_name }"
Detail="{Binding employee_age}"
ImageSource="falto.png">
<ImageCell.ContextActions>
<MenuItem x:Name="OnMore" Clicked="OnMore_Clicked" CommandParameter="{Binding .}" Text="More" />
<MenuItem x:Name="OnDelete" Clicked="OnDelete_Clicked" CommandParameter="{Binding .}" Text="Delete" IsDestructive="True" />
</ImageCell.ContextActions>
</ImageCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ImageButton Source="images.png"
BackgroundColor="Transparent"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".95,.95,55,55"
Clicked="ImageButton_Clicked"
/>
</AbsoluteLayout>