Currently, I've got a ListView implementation that looks something like this:
{Alert1}
{Alert2}
{Alert3}
{Alert4}
{Alert5}
{Alert6]
{Alert7}
xaml:
<ListView Grid.Row="4"
ItemsSource="{Binding Alerts}"
HasUnevenRows="True"
VerticalOptions="Start"
SeparatorVisibility="None" Margin="10,0"
x:Name="AlertsList">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame BackgroundColor="#333333" Margin="0,5" Padding="5">
<StackLayout Margin="0" Padding="0">
<Label
Text="{Binding Name, Mode=OneWay}"
FontAttributes="Bold"
FontSize="Large"
HorizontalOptions="Center"
Margin="0" />
<Label
Text="{Binding Value, Mode=OneWay}"
HorizontalOptions="Center"
FontSize="Medium"
Margin="0" />
</StackLayout>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Any suggestion on how to modify this so that the output is displayed in a 2 column grid instead with equal width columns such as?
{Alert1}{Alert2}
{Alert3}{Alert4}
{Alert5}{Alert6]
{Alert7}
I'm using Xamarin Forms v2.3.3
As Jason said,you could upgrade your XF version and use CollectionView with its ItemsLayout property.
<CollectionView ItemsSource="{Binding Alerts}"
ItemsLayout="VerticalGrid, 2">
<CollectionView.ItemTemplate>
<DataTemplate>
<Frame BackgroundColor="#333333" Margin="0,5" Padding="5">
<StackLayout Margin="0" Padding="0">
<Label
Text="{Binding Name, Mode=OneWay}"
FontAttributes="Bold"
FontSize="Large"
HorizontalOptions="Center"
Margin="0" />
<Label
Text="{Binding Value, Mode=OneWay}"
HorizontalOptions="Center"
FontSize="Medium"
Margin="0" />
</StackLayout>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
The more you could refer to the doc.
This is my code
<ListView x:Name="listViewClient" ItemsSource="{Binding Client}" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell >
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<BoxView Grid.Column="0" Color="#84DCC6"/>
<StackLayout Grid.Column="1" Padding="20, 10">
<Frame BorderColor="WhiteSmoke">
<StackLayout>
<Label Text="Name:" FontSize="16" />
<Label FontSize="Medium" Text="{Binding Name}" FontAttributes="Bold" />
</StackLayout>
</Frame>
<Frame BorderColor="WhiteSmoke">
<StackLayout>
<Label Text="Adress:" FontSize="16"/>
<Label FontSize="Medium" Text="{Binding Adress}" FontAttributes="Bold"/>
</StackLayout>
</Frame>
<Frame BorderColor="WhiteSmoke">
<StackLayout>
<Label Text="Place:" FontSize="16"/>
<Label FontSize="Medium" Text="{Binding Place}" FontAttributes="Bold" />
</StackLayout>
</Frame>
<Frame BorderColor="WhiteSmoke" >
<Grid >
<StackLayout Grid.Column="0">
<Label Text="Mobile:" FontSize="16"/>
<Label FontSize="Medium" Text="{Binding Mobile}" FontAttributes="Bold" />
</StackLayout>
<Button Grid.Column="1" Text="Call" Clicked="PovikajPartnerClicked" BackgroundColor="#84DCC6"></Button>
</Grid>
</Frame>
<Frame BorderColor="WhiteSmoke">
<StackLayout>
<Label Text="Е-mail:" FontSize="16"/>
<Label FontSize="Medium" Text="{Binding EMAIL}" FontAttributes="Bold" />
</StackLayout>
</Frame>
<Frame BorderColor="WhiteSmoke">
<StackLayout>
<Label Text="LAW:" FontSize="16"/>
<Label FontSize="Medium" Text="{Binding LAW}" FontAttributes="Bold" />
</StackLayout>
</Frame>
<Frame BorderColor="WhiteSmoke
">
<StackLayout>
<Label Text="SECNUM:" FontSize="16"/>
<Label FontSize="Medium" Text="{Binding SECNUM}" FontAttributes="Bold" />
</StackLayout>
</Frame>
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I dont know from where get that orange background color when i tap on the listview. From the code you can see that i dont have choosed samo backgroud color . Is there a default tap event to make the color orange? I tried everything but cant find is there anyplace i forgot to add a color.
I know this may be a bit late, but I hope it will help someone, Just go your styles.xml file under AppName.Android/Resources/values and inside your Main Theme add the following:
<item name="android:colorActivatedHighlight">#android:color/transparent</item>
That is the default selection colour of your ListView that comes from the theme of your App that Xamarin by default has set in the template to solve it just add the following to your ListView
<ListView SelectionMode="None" ..../>
I am late to the party, but this solution I found on Grepper might be helpful. It is simple and is unique for each content page.
You can alter the background color of the current cell and the previous cell using the ViewCell Tapped event.
XAML:
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Tapped="ViewCell_Tapped" >
<Label Text="{Binding Name}" TextColor="DarkGoldenrod" />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
In your code add:
ViewCell lastCell;
private void ViewCell_Tapped(object sender, System.EventArgs e)
{
if (lastCell != null)
lastCell.View.BackgroundColor = Color.Transparent;
var viewCell = (ViewCell)sender;
if (viewCell.View != null)
{
viewCell.View.BackgroundColor = Color.LightGray;
lastCell = viewCell;
}
}
PFB the code for my list view,
<ListView HasUnevenRows="true" ItemsSource="{Binding UserEmailList}" IsGroupingEnabled="true">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Orientation="Vertical" Spacing="0" Margin="0" Padding="0">
<BoxView Style="{StaticResource separator}"></BoxView>
<Label Text="{Binding Heading}" Style="{StaticResource labelHeaderTitle}" />
<BoxView Style="{StaticResource separator}"></BoxView>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Orientation="Horizontal" Spacing="0" >
<StackLayout IsVisible="{Binding UserEmailDetails.HasEmailAddress}" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label Text="{Binding UserEmailDetails.EmailAddress}" Style="{StaticResource labelListItem}" HorizontalOptions="FillAndExpand">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="SelectEmailAddress_Tapped" CommandParameter="{Binding UserEmailDetails}" />
</Label.GestureRecognizers>
</Label>
<Image HeightRequest="16" HorizontalOptions="End" VerticalOptions="Center" Source="arrow.png" Margin="0,0,15,0">
</Image>
</StackLayout>
<StackLayout IsVisible="{Binding UserEmailDetails.HasEmailAddress, Converter={StaticResource NotConverter}}" Padding="15,0,0,0">
<Label Text="Add email" Style="{StaticResource labelLink}">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="SelectEmailAddress_Tapped" CommandParameter="{Binding UserEmailDetails}" />
</Label.GestureRecognizers>
</Label>
</StackLayout>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Even if there are only two rows, on IOS multiple empty rows are getting populated as in the below snapshot.
Please let me know how to avoid this and hav things working in both Android and IOS
I would hide the Separator by setting SeparatorVisibility="None" on ListView Property. If you still need the Separator I would define in the ViewCell.
<ListView HasUnevenRows="true" SeparatorVisibility="None">
The other way is to put Empty Footer on List View:
<ListView>
<ListView.Footer>
<Label />
</ListView.Footer>
</ListView>
I hope one of these helps you. Let me know if anything.
I have Xamarin Forms Cross Platform project with a ListView whose ViewCell contains a StackLayout. I hide and show the StackLayout when the user clicks on an image. There is a known issue with the ViewCell not resizing correctly on iOS and solution I found was to use ForceUpdateSize method on the ViewCell in order to for the app on iOS to resize the cell. This is working from the aspect of resizing the ViewCell - however after calling the method, I loose the three buttons at the bottom of ViewCell. The buttons are in a grid and all the code, xaml and screen shots are below. Any help with resolving this would be greatly appreciated.
Page XAML:
<ViewCell x:Name="vcDetails" >
<StackLayout Orientation="Vertical" HorizontalOptions="Fill" VerticalOptions="Start">
<BoxView x:Name="bvLine" VerticalOptions="Center" BackgroundColor="Black"
HorizontalOptions="FillAndExpand" HeightRequest="4" />
<StackLayout Orientation="Vertical" HorizontalOptions="Fill" VerticalOptions="Start">
<!-- Info Button and title-->
<StackLayout x:Name="slPlaceName" HorizontalOptions="Fill" VerticalOptions="Start" Orientation="Horizontal" Margin="0,0,0,0">
<Image x:Name="btnDropDown" HorizontalOptions="Start" VerticalOptions="Center" Source="circledropdown.png" Margin="0,4,4,0" IsVisible="{Binding ShowDropDown}"/>
<Image x:Name="btnDropUp" HorizontalOptions="Start" VerticalOptions="Center" Source="circledropup.png" Margin="0,4,4,0" IsVisible="{Binding ShowDropUp}"/>
<Label x:Name="lblPlaceName" TextColor="Gray" FontAttributes="Bold" Text="{Binding Title}" FontSize="Medium" Margin="0,0,0,0" VerticalOptions="Center"
HorizontalOptions="FillAndExpand" />
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="btnDetails_Clicked" CommandParameter="{Binding ID}"/>
</StackLayout.GestureRecognizers>
</StackLayout>
<StackLayout x:Name="slDetails" Orientation="Vertical" HorizontalOptions="Fill" VerticalOptions="StartAndExpand" Margin="8,4,8,4"
IsVisible="{Binding ShowDetails}" BackgroundColor="LightGray">
<BoxView VerticalOptions="Start" HorizontalOptions="Fill" BackgroundColor="DarkCyan" HeightRequest="2" Margin="0,0,0,0" />
<Label x:Name="lblStreetAddress" VerticalOptions="Start" HorizontalOptions="Start" HorizontalTextAlignment="Start"
TextColor="Black" FontSize="Small" Text="{Binding AddressLine1}" />
<Label x:Name="lblCityStateZip" VerticalOptions="Start" HorizontalOptions="Start" HorizontalTextAlignment="Start" TextColor="Black" FontSize="Small"
Text="{Binding CityStateZip}" />
<Label x:Name="lblHours" VerticalOptions="Start" HorizontalOptions="Start" TextColor="Black" FontSize="Small" Text="{Binding Hours}" HorizontalTextAlignment="Center" />
<Grid x:Name="gvDetailButtons" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand" Margin="8,4,8,4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<StackLayout x:Name="btnGoToInfoPage" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Orientation="Vertical" Margin="8,0,4,0"
Grid.Column="0" Grid.Row="0" BackgroundColor="DarkGray" Padding="0,2,0,2">
<StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Orientation="Horizontal">
<Image x:Name="btnInfo" HorizontalOptions="Start" VerticalOptions="CenterAndExpand" Source="infosmall.png" Margin="0,0,4,0" />
<Label x:Name="lblbntInfo" Text="{ext:Translate MoreInfo}" TextColor="Black" FontAttributes="Bold"
HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" FontSize="Small"/>
</StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="btnGoToInfoPage" CommandParameter="{Binding ID}"/>
</StackLayout.GestureRecognizers>
</StackLayout>
<StackLayout x:Name="slGoToEditPage" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Orientation="Vertical" Margin="4,0,8,0"
Grid.Column="1" Grid.Row="0" BackgroundColor="DarkGray" Padding="0,2,0,2">
<StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Orientation="Horizontal">
<Image x:Name="btnedit" Source="editsmall.png" Margin="8,0,0,0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
<Label x:Name="lblbntEdit" Text="{ext:Translate Edit}" TextColor="Black" FontAttributes="Bold"
HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" FontSize="Small"/>
</StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="btnedit_Tapped" CommandParameter="{Binding ID}"/>
</StackLayout.GestureRecognizers>
</StackLayout>
</Grid>
<BoxView VerticalOptions="Start" HorizontalOptions="Fill" BackgroundColor="DarkCyan" HeightRequest="2" Margin="0,0,0,0"
Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="1"/>
</StackLayout>
<StackLayout x:Name="slRatingandDistance" Orientation="Horizontal" VerticalOptions="Center" HorizontalOptions="StartAndExpand">
<Label x:Name="lblRatingHeader" Text="{ext:Translate RatingText}" TextColor="Black" FontSize="Small" FontAttributes="Bold"
Margin="4,0,0,0" HorizontalOptions="Start" VerticalOptions="Center"/>
<Label x:Name="lblRatingValue" Text="{Binding Rating}" TextColor="Black" FontSize="Small"
HorizontalOptions="Start" VerticalOptions="Center"/>
<Label x:Name="lblDistanceHeader" Text="{ext:Translate DistanceText}" TextColor="Black" FontSize="Small" FontAttributes="Bold"
Margin="4,0,0,0" HorizontalOptions="Start" VerticalOptions="Center"/>
<Label x:Name="lblDistanceValue" Text="{Binding Distance}" TextColor="Black" FontSize="Small"
HorizontalOptions="Start" VerticalOptions="Center" />
</StackLayout>
<Label x:Name="lblAttributes" Text="{Binding AttributesTexts}"
TextColor="Black" FontSize="Small" LineBreakMode="WordWrap" Margin="0,0,0,0" HorizontalOptions="Start"
VerticalOptions="Start"/>
</StackLayout>
<Grid x:Name="gvButtons" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand" Margin="4,4,4,4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout x:Name="btnRate" Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" BackgroundColor="DarkGray"
Margin="2,0,2,0" Grid.Column="0" Padding="0,2,0,2">
<StackLayout x:Name="slLayoutRate" Orientation="Horizontal" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
<Image x:Name="imgRate" Source="smallstar.png" HorizontalOptions="Center" VerticalOptions="Center" Margin="0,0,4,0" />
<Label x:Name="lblRate" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Text="{ext:Translate Rate}"
TextColor="Black" FontAttributes="Bold" FontSize="Small" Margin="0,0,0,0" />
</StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="btnRate_Clicked" CommandParameter="{Binding ID}"/>
</StackLayout.GestureRecognizers>
</StackLayout>
<StackLayout x:Name="btnMap" Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" BackgroundColor="DarkGray"
Margin="2,0,2,0" Grid.Column="1" Padding="0,2,0,2">
<StackLayout x:Name="slLayoutMap" Orientation="Horizontal" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
<Image x:Name="imgMap" Source="mapblue.png" HorizontalOptions="Center" VerticalOptions="Center" Margin="0,0,4,0" />
<Label x:Name="lblMap" HorizontalOptions="Center" VerticalOptions="Center" Text="{ext:Translate Map}"
TextColor="Black" FontAttributes="Bold" FontSize="Small" Margin="0,0,0,0" />
</StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="btnMap_Clicked" CommandParameter="{Binding ID}"/>
</StackLayout.GestureRecognizers>
</StackLayout>
<StackLayout x:Name="btnClosed" Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" BackgroundColor="DarkGray"
Margin="2,0,2,0" Grid.Column="2" Padding="0,2,0,2">
<StackLayout x:Name="slLayoutClosed" Orientation="Horizontal" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
<Image x:Name="imgClosed" Source="closed.png" HorizontalOptions="CenterAndExpand" VerticalOptions="Center" Margin="0,0,4,0" />
<Label x:Name="lblClosed" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Text="{ext:Translate Closed}"
TextColor="Black" FontAttributes="Bold" FontSize="Small" Margin="0,0,0,0" />
</StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="btnClosed_Clicked" CommandParameter="{Binding ID}"/>
</StackLayout.GestureRecognizers>
</StackLayout>
</Grid>
</StackLayout>
</ViewCell>
Code the hides/shows the stack layout.
private void btnDetails_Clicked(object sender, EventArgs e)
{
long ll_PlaceID = -1;
try
{
ll_PlaceID = Convert.ToInt64(((TappedEventArgs)e).Parameter);
ViewModelObjects.NearbyPlaces.ShowDetailText(ll_PlaceID);
if (Device.RuntimePlatform == Device.iOS)
{
((ViewCell)((Element)sender).Parent.Parent.Parent).ForceUpdateSize();
}
}
catch (Exception ex)
{
App.ProcessException(ex);
}
}
Show Details code from the View Model
public void ShowDetailText(long pl_PlaceID)
{
GBSPlaceDetail lobj_Place = null;
try
{
lobj_Place = (GBSPlaceDetail)(from lobj_Work in GBSPlaceDetails
where lobj_Work.ID == pl_PlaceID
select lobj_Work).ToList()[0];
if (lobj_Place != null)
lobj_Place.ShowDetails = !lobj_Place.ShowDetails;
}
catch (Exception ex)
{
App.ProcessException(ex);
}
}
Any suggestions would be greatly appreciated.
No one every really responded to my post so I started looking for other controls to use. I found SyncFusion had a ListView control also. It seemed to be a pretty easy drop in for the Xamarin Forms ListView control (add the needed namespace and prefix all the controls with the SyncFusion ListView namespace). On iOS you still needed to call extra code when the size of the list item entry expanded but the SyncFusion code seems to work cleaner than the Xamarin code as the problem did not manifest when using the SyncFusion ListViewcontrol.
Here is the code I had to include in the code behind for the page in my PCL project. (lvPlaces is the name of my ListView control in the XAML)
if (Device.RuntimePlatform == Device.iOS)
{
lvPlaces.ForceUpdateItemSize();
}
Trying to get gridview in xamarin forms to work, but when my app reaches the page it throws an IO exception.
This is my code:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:controls="clr-namespace:XLabs.Forms.Controls;assembly=XLabs.Forms.Controls"
x:Class="TamarianApp.ImagePage">
<Grid>
<StackLayout x:Name="mainView">
<ScrollView>
<StackLayout>
<BoxView Margin="0, -7, 0, 0" HorizontalOptions="FillAndExpand" HeightRequest="1" BackgroundColor="#f1f1f1"></BoxView>
<StackLayout x:Name="cameraMenuOption" Padding="10" Orientation="Horizontal" HorizontalOptions="Fill" >
<Label Margin="10, 2,0,0" HorizontalOptions="StartAndExpand">Camera</Label>
<Label x:Name="camera_label" Margin="10, 2,10,0" FontSize="14" TextColor="#c1c1c1" HorizontalOptions="End"></Label>
<Image HorizontalOptions="End" Source="icons/blue/next" WidthRequest="20"></Image>
</StackLayout>
<BoxView HorizontalOptions="FillAndExpand" HeightRequest="1" BackgroundColor="#f1f1f1"></BoxView>
<StackLayout x:Name="libraryMenuOption" Padding="10" Orientation="Horizontal" HorizontalOptions="Fill" >
<Label Margin="10, 2,0,0" HorizontalOptions="StartAndExpand">Library</Label>
<Label x:Name="library_label" Margin="10, 2,10,0" FontSize="14" TextColor="#c1c1c1" HorizontalOptions="End"></Label>
<Image HorizontalOptions="End" Source="icons/blue/next" WidthRequest="20"></Image>
</StackLayout>
</StackLayout>
</ScrollView>
<StackLayout BackgroundColor="#fafafa" HorizontalOptions="FillAndExpand" >
<BoxView HorizontalOptions="FillAndExpand" HeightRequest="3" BackgroundColor="#f1f1f1"></BoxView>
</StackLayout>
<StackLayout>
<controls:GridView x:Name="image_gallary">
<GridView.ItemTemplate>
<DataTemplate>
<Grid>
<Image Source="{Binding filepath}"></Image>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</controls:GridView>
</StackLayout>
Can someone help me.