We Keep Coding

Xamarin Forms ListView Inside CollectionView

I have a collection view whose source is an IObservable(Object1) inside of each Object1 is a List(Object2).
I would like to show each Object2 that is related to its Object1.
I have tried to place a ListView inside of a collectionView
I am getting the error System.InvalidOperationException LoadTemplate should not be null
<CollectionView Grid.Row="2" ItemsSource="{Binding Object1Collection}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.65*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label TextColor="Black" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Text="{Binding Response}"></Label>
<Label TextColor="Black" Grid.Row="1" Grid.Column="0" Text="Restriction: "></Label>
<ListView Grid.Row="1" Grid.Column="1" ItemsSource="{Binding Object2List }">
<ListView.ItemTemplate>
<DataTemplate>
<!--
<StackLayout Orientation="Horizontal">
<Label TextColor="Black" Text="{Binding Statistic}"></Label>
<Label TextColor="Black" Text=" : "></Label>
<Label TextColor="Black" Text="{Binding Amount}"></Label>
</StackLayout>
-->
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>

You could use CollectionView Grouping. https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/grouping
Xaml:
<CollectionView ItemsSource="{Binding Object1Collection}" IsGrouped="True">
<CollectionView.GroupHeaderTemplate>
<DataTemplate >
<Label Text="{Binding Response}"/>
</DataTemplate>
</CollectionView.GroupHeaderTemplate>
<CollectionView.ItemTemplate>
<DataTemplate>
<ScrollView>
<Grid Padding="10">
<StackLayout BackgroundColor="Blue">
<Label Text="{Binding Statistic}"/>
<Label TextColor="Black" Text=" : "></Label>
<Label Text="{Binding Amount}"/>
</StackLayout>
</Grid>
</ScrollView>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Model:
public class Object1Model : List<Object2Model>
{
public string Response { get; set; }
public Object1Model(string response, List<Object2Model> Object2List) : base(Object2List)
{
Response = response;
}
}
public class Object2Model
{
public string Statistic { get; set; }
public string Amount { get; set; }
}
Code behind:
public ObservableCollection<Object1Model> Object1Collection { get; set; }
public Page23()
{
InitializeComponent();
Object1Collection = new ObservableCollection<Object1Model>();
Object1Collection.Add(new Object1Model("Object1A", new List<Object2Model>
{
new Object2Model(){ Statistic="Object2Statistic1A", Amount="Object2Amount1A"},
new Object2Model(){ Statistic="Object2Statistic1A", Amount="Object2Amount1A"},
}));
Object1Collection.Add(new Object1Model("Object1B", new List<Object2Model>
{
new Object2Model(){ Statistic="Object2Statistic1B", Amount="Object2Amount1B"},
new Object2Model(){ Statistic="Object2Statistic1B", Amount="Object2Amount1B"},
}));
Object1Collection.Add(new Object1Model("Object1C", new List<Object2Model>
{
new Object2Model(){ Statistic="Object2Statistic1C", Amount="Object2Amount1C"},
new Object2Model(){ Statistic="Object2Statistic1C", Amount="Object2Amount1C"},
}));
this.BindingContext = this;
}

Add ViewCell under DataTemplate of ListView.
<ListView Grid.Row="1" Grid.Column="1" ItemsSource="{Binding Object2List }">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label TextColor="Black" Text="{Binding Statistic}"></Label>
<Label TextColor="Black" Text=" : "></Label>
<Label TextColor="Black" Text="{Binding Amount}"></Label>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Fix those two exceptions:
No viewcell error:
'Specified cast is not valid.'
Comment out the StackLayout error:
'LoadTemplate should not be null'

How to get indexes of Xamarin CollectionView Items?

I have a CollectionView:
<CollectionView Grid.Row="10" Grid.Column="0" Grid.ColumnSpan="1" x:Name="SomeCollection"
ItemsLayout="VerticalList">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal" Padding="3" Spacing="0">
<Label WidthRequest="90" HeightRequest="20" Text="{Binding SomeItemText}" BackgroundColor="Black" TextColor="White"
VerticalTextAlignment="Center" HorizontalTextAlignment="Center" />
<Button WidthRequest="36" HeightRequest="36" CornerRadius="0" ImageSource="plus_thick.xml" BackgroundColor="Green"
Clicked="Duplicate_Clicked" />
<Button WidthRequest="36" HeightRequest="36" CornerRadius="0" ImageSource="close_thick.xml" BackgroundColor="Red"
Clicked="Remove_Clicked" />
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Every item in the collection has a duplicate and a remove button. By clicking the button I would like to duplicate/remove the item, but CollectionView doesn't have indexes on items.
Could you help me with a custom renderer or even something shorter and simpler?

About getting current collectionview item index by Button command, I do one sample that you can take a look:
<StackLayout>
<CollectionView
x:Name="SomeCollection"
ItemsLayout="VerticalList"
ItemsSource="{Binding items}">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout
Padding="3"
Orientation="Horizontal"
Spacing="0">
<Label
BackgroundColor="Black"
HeightRequest="20"
HorizontalTextAlignment="Center"
Text="{Binding SomeItemText}"
TextColor="White"
VerticalTextAlignment="Center"
WidthRequest="90" />
<Button
BackgroundColor="Green"
Command="{Binding BindingContext.duplicatecommand, Source={x:Reference SomeCollection}}"
CommandParameter="{Binding}"
CornerRadius="0"
HeightRequest="36"
Text="duplicate item"
WidthRequest="36" />
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
public partial class Page13 : ContentPage
{
public ObservableCollection<someitems> items { get; set; }
public ICommand duplicatecommand { get; set; }
public Page13()
{
InitializeComponent();
items = new ObservableCollection<someitems>()
{
new someitems(){SomeItemText="test 1"},
new someitems(){SomeItemText="test 2"},
new someitems(){SomeItemText="test 3"},
new someitems(){SomeItemText="test 4"},
new someitems(){SomeItemText="test 5"},
new someitems(){SomeItemText="test 6"}
};
duplicatecommand = new Command<someitems>(getindexfun);
this.BindingContext = this;
}
private void getindexfun(someitems item)
{
int index = items.IndexOf(item);
}
}
public class someitems
{
public string SomeItemText { get; set; }
}

Instead of using click events, I would bind the buttons to a Command<T>.
This way in the ViewModel where you have your ItemsSource, you can just check what the index is of the Item ViewModel you are passing into the command as parameter. So in the ViewModel add something like this:
public Command<ItemViewModel> RemoveItemCommand { get; }
ctor() // this is the ViewModel constructor
{
RemoveItemCommand = new Command<ItemViewModel>(DoRemoveItemCommand);
}
private void DoRemoveItemCommand(ItemViewModel model)
{
// do stuff to remove
// probably something like:
Items.Remove(model);
// or get the index like:
var index = Items.IndexOf(model);
}
Then you can bind this command like so:
<Button
WidthRequest="36"
HeightRequest="36"
CornerRadius="0"
ImageSource="close_thick.xml"
BackgroundColor="Red"
Command="{Binding Source={RelativeSource AncestorType={x:Type local:ItemViewModel}}, Path=RemoveItemCommand}"
CommandParameter="{Binding}" />

how to display different content for each view in carouselview xamarin.forms

here is my initial code
<CarouselView x:Name="BGcarousel" >
<CarouselView.ItemTemplate>
<DataTemplate>
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image Grid.Row="0" Grid.Column="0"
Source="{Binding BackgroundImage}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Aspect="AspectFill" />
<Frame
Grid.Row="0"
Grid.Column="0"
VerticalOptions="Center"
HorizontalOptions="Center"
HeightRequest="30"
WidthRequest="120"
CornerRadius="60"
HasShadow="True"
BackgroundColor="BlueViolet">
<Label
Text="{Binding Icon}"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
FontAttributes="Bold"
FontSize="23"
Padding="0" />
</Frame>
<Label Grid.Row="0" Grid.Column="0"
Text="{Binding Quot}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
HorizontalTextAlignment="Center"
VerticalTextAlignment="End"
Padding="0,0,0,50"
TextColor="White"
FontSize="30"/>
</Grid>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
this looks like every page would have the same content but I need to add a button in only the last and control its behaviors
Microsoft has just added a carouselview as a feature and I am new to this
anyone can help me

Solution 1:If you want to use other different layouts for each view in carouselview xamarin.forms, I advice you to use DataTemplateSelector to achieve it.
First of all, you can create two DataTemplate for your CarouselView(You can create lots of DataTemplates, If you want to do).
<ContentPage.Resources>
<DataTemplate x:Key="AmericanMonkeyTemplate">
<StackLayout>
<Frame HasShadow="True"
BorderColor="DarkGray"
CornerRadius="5"
Margin="20"
HeightRequest="300"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand">
<StackLayout>
<!--Add layout that you want-->
<Label Text="{Binding Name}"
FontAttributes="Bold"
FontSize="Large"
HorizontalOptions="Center"
VerticalOptions="Center" />
<Label Text="{Binding Location}"
HorizontalOptions="Center" />
<Label Text="{Binding Details}"
FontAttributes="Italic"
HorizontalOptions="Center"
MaxLines="5"
LineBreakMode="TailTruncation" />
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
<DataTemplate x:Key="OtherMonkeyTemplate">
<!--Add layout that you want-->
<StackLayout>
<Frame HasShadow="True"
BorderColor="DarkGray"
CornerRadius="5"
Margin="20"
HeightRequest="300"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand">
<StackLayout>
<Label Text="{Binding Name}"
FontAttributes="Bold"
FontSize="Large"
HorizontalOptions="Center"
VerticalOptions="Center" />
<Label Text="{Binding Location}"
HorizontalOptions="Center" />
<Label Text="{Binding Details}"
FontAttributes="Italic"
HorizontalOptions="Center"
MaxLines="5"
LineBreakMode="TailTruncation" />
<Button
Text="Click"
/>
<Button
Text="Click"
/>
<Button
Text="Click"
/>
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
<controls:MonkeyDataTemplateSelector x:Key="MonkeySelector"
AmericanMonkey="{StaticResource AmericanMonkeyTemplate}"
OtherMonkey="{StaticResource OtherMonkeyTemplate}" />
</ContentPage.Resources>
<StackLayout>
<CarouselView ItemsSource="{Binding Monkeys}" ItemTemplate="{StaticResource MonkeySelector}">
</CarouselView>
</StackLayout>
</ContentPage>
then create an DataTemplateSelector, you can depend an property to show which DataTemple layout. For example, If Location is Eurp, I set it to OtherMonkey DataTemple, others set America DataTemple.
public class MonkeyDataTemplateSelector : DataTemplateSelector
{
public DataTemplate AmericanMonkey { get; set; }
public DataTemplate OtherMonkey { get; set; }
protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
{
return ((Monkey)item).Location.Contains("Eurp") ? OtherMonkey : AmericanMonkey;
}
}
Solution 2 Agree with Jason, you can use IsVisible for button, binding an property with ButtonIsVisable like following code.
<Button
Text="Click"
IsVisible="{Binding ButtonIsVisable}"
/>
Then add ButtonIsVisable Property in your Model.
public class Monkey
{
public string Name { get; set; }
public string Location { get; set; }
public string Details { get; set; }
public bool ButtonIsVisable { get; set; }
}
In the ViewModel, you can control the Button if is visable or not.
public class MyViewModel
{
public ObservableCollection<Monkey> Monkeys { get; set; }
public MyViewModel()
{
Monkeys =new ObservableCollection<Monkey>();
Monkeys.Add(new Monkey() { ButtonIsVisable=false, Details="Details1", Location="Usa", Name="Test1" });
Monkeys.Add(new Monkey() { ButtonIsVisable = false, Details = "Details2", Location = "Asia", Name = "Test2" });
Monkeys.Add(new Monkey() { ButtonIsVisable = true, Details = "Details3", Location = "Eurp", Name = "Test3" });
}
}
In the layout add the button.
<CarouselView ItemsSource="{Binding Monkeys}">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Frame HasShadow="True"
BorderColor="DarkGray"
CornerRadius="5"
Margin="20"
HeightRequest="300"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand">
<StackLayout>
<Label Text="{Binding Name}"
FontAttributes="Bold"
FontSize="Large"
HorizontalOptions="Center"
VerticalOptions="Center" />
<Label Text="{Binding Location}"
HorizontalOptions="Center" />
<Label Text="{Binding Details}"
FontAttributes="Italic"
HorizontalOptions="Center"
MaxLines="5"
LineBreakMode="TailTruncation" />
<Button
Text="Click"
IsVisible="{Binding ButtonIsVisable}"
/>
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
Here is layout background code.
public MainPage()
{
InitializeComponent();
this.BindingContext = new MyViewModel();
}
Here is running GIF.

ItemTemplate for list of items in Xamarin

I have a ListView with an ItemTemplate. For each item in my ItemSource, I would like to iterate over a property in the item and create a section in my ViewCell.
So every item is a Download:
public class Download
{
public string Title { get; set; }
public IEnumerable<SectionDownload> SectionDownloads { get; set; }
}
SectionDownload looks like this:
public class SectionDownload
{
public long TotalBytes { get; set; }
public long DownloadedBytes { get; set; }
public int PercentDownloaded { get => (int)((DownloadedBytes / TotalBytes) * 100); }
}
And my ListView, where Downloads is an ObservableCollection<Download> in my ViewModel:
<ListView x:Name="DownloadsListView" SelectionMode="None" ItemsSource="{Binding Downloads}">
<ListView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="10">
<Label Text="{Binding Title}"
d:Text="{Binding .}"
LineBreakMode="NoWrap"
Style="{DynamicResource ListItemTextStyle}"
FontSize="16" />
<!-- Here I would like each SectionDownload to display the percentage downloaded -->
</StackLayout>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

You can display section like this.
<ListView x:Name="DownloadsListView" SelectionMode="None" ItemsSource="{Binding Downloads}">
<ListView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="10">
<Label Text="{Binding Title}"
d:Text="{Binding .}"
LineBreakMode="NoWrap"
Style="{DynamicResource ListItemTextStyle}"
FontSize="16" />
<StackLayout BindableLayout.ItemsSource="{Binding SectionDownloads}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<ProgressBar Progress="{Binding PercentDownloaded}" />
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</StackLayout>
</DataTemplate>
</ListView.ItemTemplate>
The value of PercentDownloaded should be double in range of 0 to 1 and also you have to implement the INotifyPropertyChange to your SectionDownload class for updating the progress in realtime.

The error is caused that you did not wrap Cell inside DataTemplate.
Modify it as
<ListView x:Name="DownloadsListView" SelectionMode="None" ItemsSource="{Binding Downloads}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell> //add this line
<StackLayout Padding="10">
<Label Text="{Binding Title}"
d:Text="{Binding .}"
LineBreakMode="NoWrap"
Style="{DynamicResource ListItemTextStyle}"
FontSize="16" />
<StackLayout BindableLayout.ItemsSource="{Binding SectionDownloads}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<ProgressBar Progress="{Binding PercentDownloaded}" />
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>

How to manage images in a cross-platform app?

I'm creating cross platform demo project but i stuck with a problem when trying debug app on ios symulator. First i couldn't pair my mac to visual studio but i just send all files as rar and open on mac. Android project is all fine but when trying to launch on iphone simulator app throw exception that
System Exception : Image: file"bgtest5.jpg" not found in app bundle.
(Android version is working all fine on this mac). According to my question i put all images my app need to load in resources folder in ios solution , mark them as "bundleResources", i see on debuger output that my observablecollection is in read and then exception is thrown about image...
MyModel class
[PrimaryKey]
public int PersonId { get; set; }
public string Name { get; set; }
public string Surname { get; set; }
public string Description { get; set; }
public string PersonBackgroundImage { get; set; }
public double ProgressCounter { get; set; }
ListViewModel class
var personList = new List<PersonViewModel>
{
new PersonViewModel()
{
Name="Test", Surname="Test", Description= "TEsT", Background = "bgtest6.jpg", ProgressCounter =0.1, SavedClicked=0,Weight=1
},
new PersonViewModel()
{
Name="Test", Surname="Test", Description= "TEsT",Background = "bgtest6.jpg", ProgressCounter =0.1, SavedClicked=0,Weight=30
},
new PersonViewModel()
{
Name="Test", Surname="Test", Description= "TEsT",Background = "bgtest6.jpg", ProgressCounter =0.2, SavedClicked=0
},
new PersonViewModel()
{
Name="Test", Surname="Test", Description= "TEsT",Background = "bgtest6.jpg", ProgressCounter =0.3, SavedClicked=0,Weight=27
},
};
Persons = new ObservableCollection<PersonViewModel>(personList);
PersonPage
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="CommandDemo.Views.PersonPage"
BackgroundImage="{Binding Person.Background}">
<ContentPage.Content>
<StackLayout>
<Label Text="{Binding Person.Description}"
VerticalOptions="Center"
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
FontSize="Medium"/>
<Label Text="{Binding Person.ProgressCounter}"
VerticalOptions="Center"
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
FontSize="Medium"/>
</StackLayout>
</ContentPage.Content>
MyListPage
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="CommandDemo.Views.PersonListPage"
BackgroundImage="bgtest5.jpg">
<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal">
<Button Text="Numbers"
Command="{Binding NavigateSumPageCommand}"
CommandParameter="{Binding .}"/>
</StackLayout>
</NavigationPage.TitleView>
<ContentPage.Content>
<StackLayout Padding="10"
Margin="10">
<ListView x:Name="personList"
ItemsSource="{Binding Persons}"
HasUnevenRows="True"
>
<!--SelectedItem="{Binding SelectedPerson}"-->
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1"
Command="{Binding Source={x:Reference personList},Path=BindingContext.NavigateCommand}"
CommandParameter="{Binding .}"/>
</StackLayout.GestureRecognizers>
<Label Text="{Binding Name}"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
HorizontalOptions="Center"
VerticalOptions="Center"
Margin="5,5,5,5"/>
<ProgressBar Progress="{Binding ProgressCounter}"/>
<Button Text="Add Progress"
Command="{Binding Source={x:Reference personList},Path=BindingContext.IncreaseProgressCommand}"
CommandParameter="{Binding .}"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Label Text="{Binding SumCollected}"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
VerticalOptions="Center"
HorizontalOptions="Center"/>
<Label Text="{Binding PieceCollected}"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
VerticalOptions="Center"
HorizontalOptions="Center"/>
<Button Text="Numbers"
Command="{Binding NavigateSumPageCommand}"
CommandParameter="{Binding .}"/>
</StackLayout>
</ContentPage.Content>
All bindings works as excpected on android project. Ios project coudn't be loaded due to exception thrown at loading an app. Am I missing some value converter for images working on ios project or what ? For any help with this or guide how to achive my goals i would be very appreciated ! :) Thank you in advance
Edit:1
After deleting line BackgroundImage = "bgtest5.jpg" project loaded on white background and all binded images are showing right now. Where is a problem ?