It has been a while, since the last time I did some development for mobile. Now, I'm trying to refresh my knowledge using Xamarin Forms.
I created a Xamarin Froms project. However, I'm having some problems to render a collection of data into a ListView Content. I can only see the first element of tree Labels.
This is the XAML code:
<?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="ExampleBooks.View.BooksView"
Title="Books">
<ScrollView>
<StackLayout>
<ListView x:Name="ListViewBooks"
ItemsSource="{Binding Books}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Padding="10" Orientation="Vertical">
<Label Text="{Binding Title}" FontSize="Large" VerticalOptions="Center"></Label>
<Label Text="{Binding Author}" FontSize="Small"></Label>
<Label Text="{Binding Description}" FontSize="14"></Label>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ScrollView>
</ContentPage>
And this is the screenshot of how the data using the above code is rendered:
As you can see, the Labels for Autor and Description don't displayed. As far I as know, all tree elements inside the nested StackLayout in the ListView should be displayed. However, I can only see the fist one.
I have try playing around with the Padding and Spacing attributes. But, none of them seems to help.
Do I missing something here? Any help/clue would help.
P.D. I'm using an Android Emulator. However, the same is happening in a Windows Phone emulator.
Thanks
Increase your ListView's RowHeight:
<ListView x:Name="ListViewBooks"
ItemsSource="{Binding Books}"
RowHeight="100">
Related
I have a ListView in Xamarin forms which has a custom cell in it. The custom cell contains an Image control with a x:Name attribute. Now I tried to bind an activity indicator IsRunning Property to the Image IsLoading Property and Xamarin forms could not find the Image using the x:Name. I tried accessing from the backend too, same thing.
I added other elements in the Listview and their x:Name were not visible too.
NB: I can access x:Name of controls I put outside the ListView so it is looking like a listview issue.
<StackLayout>
<ActivityIndicator x:Name="activity" Color="Purple" HeightRequest="50" WidthRequest="50" IsRunning="{Binding Source={x:Reference Offerimg},Path=IsLoading}"></ActivityIndicator>
<ListView x:Name="OfferLV" HasUnevenRows="True" x:FieldModifier="Public" SeparatorVisibility="None" BackgroundColor="White">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell >
<StackLayout Padding="0,10,0,10">
<Image x:Name="offerimg" HeightRequest="500" WidthRequest="100" Aspect="AspectFill"></Image>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
There is a very nice library FFImageLoading that will help you do what you want, and has a built in IsLoading property to display an ActivityIndicator accordingly. You can also handles loading error and so ...
<ListView VerticalOptions="StartAndExpand" ItemsSource="{Binding Items}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<ff:CachedImage x:Name="Image" Source="https://www.allibert-trekking.com/uploads/media/images/thumbnails/AMin3_10-photo-montagne-chine-lac.jpeg?v2" />
<ActivityIndicator Color="OrangeRed" IsRunning="{Binding IsLoading}" IsVisible="{Binding IsLoading}" BindingContext="{x:Reference Name=Image}" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I created a sample for this example here : https://github.com/vincentcastagna/ImageLoadingPlaceHolder
That's how things are expected to work in XAML technologies including Xamarin.Forms.
There is not just a single ViewCell, but there could be thousands of them and you can't access thousands different items with one name.
Recommended way is to use data binding. Frequently you can also access those items by casting the sender in events.
I have an application that takes input from Json API, deserialize it using Newtonsoft.Json library, then binds it to ListView using datatemplate.
The application works perfectly fine on UWP and Android but on iOS it shows blank screen. I have not changed anything in the iOS side.
Here's what my xaml file looks like. Is there anything else I should do in order to show my list?
** I have the latest update of all packages and I deployed the application to the simulator AND my phone with no use.
<ListView x:Name="SoftTopicsListView"
ItemsSource="{Binding Topics}"
VerticalOptions="FillAndExpand"
HasUnevenRows="True"
RefreshCommand="{Binding LoadItemsCommand}"
IsPullToRefreshEnabled="True"
IsRefreshing="{Binding IsBusy, Mode=OneWay}"
ItemSelected="OnItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="10">
<Image Source="{Binding ImgUrl}" VerticalOptions="Center" WidthRequest="200" HeightRequest="200"/>
<Label TextColor="Black" Text="{Binding Title}" LineBreakMode="NoWrap" FontSize="14" FontAttributes="Bold"/>
<Label TextColor="Black" Text="{Binding ShortDescription}" FontSize="11" LineBreakMode="TailTruncation"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Please help me,
Regards, Omar.
I am totally new to xamarin,
Following is my code :
<ListView x:Name="boxActivitiesList" ItemTapped="boxActivitiesList_ItemTapped" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Vertical" Padding="25" VerticalOptions="Start" HorizontalOptions="Start">
<Label Text="{Binding Box}" TextColor="BlueViolet" FontSize="16" FontAttributes="Bold" LineBreakMode="TailTruncation" />
<TableView IsVisible="{Binding IsVisible}" Intent="Settings" HasUnevenRows="True" BackgroundColor="White">
<TableRoot>
<TableSection>
<ViewCell>
<StackLayout Orientation="Horizontal" Padding="15,0">
<Label HorizontalOptions="Fill" Text="Remarks" VerticalOptions="Center" TextColor="Black"></Label>
<Editor x:Name="txtRemarks" HorizontalOptions="FillAndExpand"></Editor>
</StackLayout>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
<Button x:Name="btnSave" Text="Save" Clicked="btnSave_Clicked" CommandParameter="{Binding BoxId}" IsVisible="{Binding IsVisible}"></Button>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
When I click on Editor, Keyboard does not show. Can you please tell me what I am doing wrong.
I'm not sure why the Editor is not working in the Table, however i would reconsider this design and just use a Grid to realize a more complex layout inside your parent ViewCell.
Although there should be nothing wrong with the way you have it, it does seem to be overly complicating things with more nested controls when its not really needed. Ergo, the nested table should really just be a layout like Grid or StackPanel
Lastly, Xamarin.Forms can be a little fickle at the best of times with the various devices it supports. so its best to keep things as simple as possible
Hi there, I am currently trying out the idea of a picker inside a listview.
I have assigned a name to said picker but I don't think I can reference this picker from code behind due to all the layers it has on top. Any suggestions on this?
<ListView ItemsSource="{Binding CUSs}" HasUnevenRows="True"
Margin="10,20"
ItemTapped="ListView_ItemTapped"
BackgroundColor="Silver">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout x:Name="ClientLevel" Padding="20">
<Label Text="{Binding .ClientName}"
TextColor="#000" FontSize="Small"/>
<StackLayout x:Name="UnitLevel" Padding="10" IsVisible="{Binding IsVisible}">
here --> <!--<Picker x:Name="SubPicker" Title="{Binding .UnitName}" HorizontalOptions="Start" IsVisible="True"/>-->
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Once I am able to reference this son-of-a-picker (sorry.Had to xD) I expect the code to work as intended. The user goes down the list and picks a picker for the list ( in this case there is only one of course)
I am trying to bind a observable list containing a simple object with name and value to display in list or stack layout inside a Xamarin.Forms application.
The listView for whatever reason did not allow me to edit the content.
<ListView x:Name="lstEstablishmentType" Grid.Row="0" ItemsSource="{Binding States}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Orientation="Horizontal">
<Label Text="{Binding Name}"/>
<Entry Text="{Binding Value}" />
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I am not sure what I am doing wrong, things are displayed but I can't change value.
I have figured it out...
The version of Xamarin.Forms that comes with the project by default has a bug decribed in the link below
https://bugzilla.xamarin.com/show_bug.cgi?id=25948#c5
By updating the package to v1.4 the problem went away.