I am trying to create a ViewCell that has elements TextCell and SwitchCell.
This is my Code-
<ListView x:Name="AlarmList" HasUnevenRows="True" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<TextCell TextColor="#CCCCCC" Text="{Binding Name}" DetailColor="Red" Detail="{Binding Address}"></TextCell>
<SwitchCell />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
the Error i get is:
cannot convert from 'Xamarin.Forms.TextCell' to 'Xamarin.Forms.View'
The Alternative to this is using these
<Label ></Label>
<Switch ></Switch>
Is there any other way to achieve Something like this.?
A StackLayout expects a View object, which is basically any UI element, but not Cells. You can either use the predefined cells that come with Xamarin Forms, if you want to defer from that you are stuck with composing your own layout.
You're off to a good start, but you cannot use cells. So lose them, and layout the ViewCell whatever way you want.
As others have suggested a ViewCell can only contain non-Cell Forms elements. To correct your ViewCell do it like this:
<ListView x:Name="AlarmList" HasUnevenRows="True" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label TextColor="#CCCCCC" Text="{Binding Name}"/>
<Switch />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Related
I am creating xamarin.forms page with a single ListView.
Each list item template consist of one vertical StackLayout which contains 3 StackLayouts inside. The problem is: I can see only first two stacklayouts
and the third is hidden or cut or skipped,i dont know, i cannot see it.
<ContentPage.Content>
<ListView x:Name="RoutesList" ItemsSource="{Binding Routes}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BackgroundColor="#eee" Orientation="Vertical" Padding="5,0,0,5" VerticalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal" VerticalOptions="StartAndExpand">
<Label Text="{Binding Name}" FontAttributes="Bold"></Label>
<Label Text="{Binding StartDate}" HorizontalOptions="EndAndExpand"></Label>
</StackLayout>
<StackLayout Orientation="Horizontal" BackgroundColor="#f94" >
<Label Text="{Binding RouteType}" FontAttributes="Bold"></Label>
</StackLayout>
<StackLayout Orientation="Horizontal" VerticalOptions="EndAndExpand">
<Label Text="{Binding CreatorFirstName}" FontAttributes="Bold" HorizontalOptions="EndAndExpand"></Label>
<Label Text="{Binding CreatorLastName}" FontAttributes="Bold" HorizontalOptions="End"></Label>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
How to set layout properties correctly so all stacklayouts and their items contents will fit? All the binding properties are regular strings\dates. I know that there is GridLayout but i wonder how to do this using StackLayouts ?
You need to set the RowHeight property of the ListView to something that will show all items. Alternatively you may set HasUnevenRows to true, but it is a significantly slower option.
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 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.