Develop Reference

Xamarin.Forms - Adjusting height of CollectionView to be minimum size to fit children

I have a CollectionView with a few items in it. I'm trying to adjust the size of the CollectionView to be just big enough to fit all of its children. Right now, it's much larger than the amount of children it has.
The Blue color represents the size of the CollectionView. As you can see, it's well beyond the size of it's children. I'd like it to fit them perfectly, or at the very least be closer to the same size.
I don't have any height requests on any of the elements on the page, including the CollectionView.
Here's my code. It's not particularly pretty at the moment, but it's a work in progress.
<StackLayout>
<CollectionView x:Name="assessmentsCollectionView"
BackgroundColor="Blue">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Spacing="10"
Padding="5">
<Frame CornerRadius="5"
Padding="0"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal">
<Frame Padding="5"
CornerRadius="0"
WidthRequest="50">
<Label Text="{Binding TypeLetter}"
TextColor="#37474f"
FontSize="24"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"/>
</Frame>
<StackLayout Padding="10">
<Label Text="{Binding Name}"
TextColor="Black"
FontSize="24"/>
<StackLayout Orientation="Horizontal">
<Image Source="calendarIcon.png"
WidthRequest="12"
HeightRequest="12"/>
<Label Text="{Binding Date}"
FontSize="12"
TextColor="Gray"/>
</StackLayout>
</StackLayout>
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>

I changed CollectionView to FlexLayout with BindableLayout.ItemsSource and BindableLayout.ItemTemplate
What was previously
<CollectionView.ItemTemplate>
<DataTemplate>
...
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
What was done
<FlexLayout Direction="Column"
x:Name="MessagesList"
AutomationId="MessagesList"
BindableLayout.ItemsSource="{Binding Messages}" >
<BindableLayout.ItemTemplate>
<DataTemplate>
...
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
For me works well, no need to set Height for item or FlexLayout, all are dynamic

If you have little rows in Collectionview, you can set a value to collectionView.HeightRequest. when item increase, the height will increase as well.
I create a property called.RowHeigth. If I add item in the CollectionView(with AddCommand), RowHeigth will increase.
<StackLayout>
<CollectionView
x:Name="assessmentsCollectionView"
BackgroundColor="Blue"
HeightRequest="{Binding rowHeigth}"
ItemsSource="{Binding letters}">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="5" Spacing="10">
<Frame
Padding="0"
CornerRadius="5"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal">
<Frame
Padding="5"
CornerRadius="0"
WidthRequest="50">
<Label
FontSize="24"
HorizontalTextAlignment="Center"
Text="{Binding TypeLetter}"
TextColor="#37474f"
VerticalTextAlignment="Center" />
</Frame>
<StackLayout Padding="10">
<Label
FontSize="24"
Text="{Binding Name}"
TextColor="Black" />
<StackLayout Orientation="Horizontal">
<Image
HeightRequest="12"
Source="c1.png"
WidthRequest="12" />
<Label
FontSize="12"
Text="{Binding Date}"
TextColor="Gray" />
</StackLayout>
</StackLayout>
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<Button
x:Name="btn1"
Command="{Binding AddCommand}"
Text="btn1" />
</StackLayout>
public partial class Page4 : ContentPage
{
public Page4()
{
InitializeComponent();
this.BindingContext = new letterviewmodel(); ;
}
}
public class letterviewmodel: INotifyPropertyChanged
{
public ObservableCollection<lettermodel> letters { get; set; }
private int _rowHeigth;
public int rowHeigth
{
get { return _rowHeigth; }
set
{
_rowHeigth = value;
RaisePropertyChanged("rowHeigth");
}
}
public ICommand AddCommand { protected set; get; }
public letterviewmodel()
{
letters = new ObservableCollection<lettermodel>()
{
new lettermodel(){TypeLetter="A",Name="letter 1",Date="2021-01-01"},
new lettermodel(){TypeLetter="B",Name="letter 2",Date="2021-01-01"},
new lettermodel(){TypeLetter="C",Name="letter 3",Date="2021-01-01"}
};
rowHeigth = letters.Count * 100 ;
AddCommand = new Command<lettermodel>(async (key) => {
letters.Add(new lettermodel() { TypeLetter = "D", Name = "test letter ", Date = "2021-01-01" });
rowHeigth = letters.Count * 100 ;
});
}
public event PropertyChangedEventHandler PropertyChanged;
public void RaisePropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
public class lettermodel
{
public string TypeLetter { get; set; }
public string Name { get; set; }
public string Date { get; set; }
}
Don't forget toimplement INotifyPropertyChanged interface, to inotify data update.

BindingContext in MasterDetailPage

So, I have trouble binding data to my MasterDetailView. I'm getting no errors, and my code seems to be correct, based on sources that I have found online. However, nothing populates my MasterDetailView..
<MasterDetailPage.Master>
<ContentPage Title="Menu" BackgroundColor="#9BD2AD" x:Name="test">
<StackLayout Orientation="Vertical">
<Label Text="MENU" TextColor="#106073" HorizontalOptions="Center" FontAttributes="Bold" Margin="0,20,0,0" FontSize="Large"/>
<ListView ItemsSource="{Binding listOfItems}" x:Name="navigationDrawerList" RowHeight="55" SeparatorVisibility="None"> <!--ItemSelected="NavigationDrawerList_ItemSelected"-->
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout VerticalOptions="FillAndExpand" Orientation="Vertical" Padding="20,10,0,0">
<Label Text="{Binding Title}" TextColor="#106073" HorizontalTextAlignment="Start" FontSize="Medium"/>
<BoxView WidthRequest="2" HeightRequest="1" BackgroundColor="Beige"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
Cs
private List<MasterPageItem> listOfItems = new List<MasterPageItem>();
MasterPageItem pages = new MasterPageItem();
public SlideMenu()
{
InitializeComponent();
test.BindingContext = getPages();
}
public List<MasterPageItem> getPages()
{
listOfItems.Add(new MasterPageItem("TEST1", typeof(Test1)));
listOfItems.Add(new MasterPageItem("TEST2", typeof(Test2)));
return listOfItems;
}
MasterPageItem class
public class MasterPageItem
{
public string Title { get; set; }
public Type TargetType { get; set; }
public MasterPageItem()
{
}
public MasterPageItem(string Title, Type TargetType)
{
this.Title = Title;
this.TargetType = TargetType;
}
}

Xamarin Forms Command Binding inside ListView is not working

i'm trying to bind a command to a button inside a listView, but without success. I follow all other answers posted here, like this one:
Xamarin Forms Button Command binding inside a ListView
The actual result is that nothing happens. A thing that i notice is that visual studio, when i type after x:Reference suggests me just GridWebcam, like if it doesn't see other reference elements. What can i do?
Here my code:
<ContentPage
...
x:Name="WebcamList">
<ContentPage.Resources>
...
<ContentPage.Content>
<ListView ItemsSource="{Binding ListOfWebcam}"
SeparatorVisibility="None"
CachingStrategy="RecycleElement"
RowHeight="250"
VerticalOptions="FillAndExpand"
x:Name="ListWebcam">
<ListView.Header>
<StackLayout x:Name="HeaderStackLayout"
Padding="5,25,0,30"
Orientation="Horizontal"
HorizontalOptions="FillAndExpand">
<Label x:Name="LabelHeader"
Text="Webcam:"
FontSize="Large"
FontAttributes="Bold"
TextColor="{x:Static statics:Palette.PrimaryColor}"
VerticalOptions="Center"
HorizontalOptions="Start" Margin="10,0,0,0"/>
</StackLayout>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<controls:ExtendedViewCell IsEnabled="False">
<controls:ExtendedViewCell.View>
<Grid x:Name="GridWebcam">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Frame Grid.Column="1"
Grid.RowSpan="2"
CornerRadius="20"
BackgroundColor="{x:Static statics:Palette.PrimaryColor}"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
HasShadow="True"
Margin="5,10">
<StackLayout>
<Label Text="{Binding t_str_vid,Converter={StaticResource WebcamNameConverter}}"
FontSize="Medium"
TextColor="White"
FontAttributes="Bold"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
</Label>
<Label TextColor="White"
FontSize="Medium"
Text="{Binding direzione,Converter={StaticResource DirectionToStringConverter}}"/>
<StackLayout Orientation="Horizontal">
<ffimageloading:CachedImage LoadingPlaceholder="Rolling.gif"
DownsampleToViewSize="False"
VerticalOptions="FillAndExpand"
HorizontalOptions="StartAndExpand"
Source="{Binding image1}"/>
<iconize:IconButton Text="fas-play-circle"
FontSize="50"
HorizontalOptions="EndAndExpand"
VerticalOptions="EndAndExpand"
TextColor="White"
Command="{Binding BindingContext.OpenVideoWebcamCommand, Source={x:Reference WebcamList}}"
CommandParameter="{Binding .}"
BackgroundColor="Transparent"/>
</StackLayout>
</StackLayout>
</Frame>
</Grid>
</controls:ExtendedViewCell.View>
</controls:ExtendedViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
</ContentPage>
```
public class WebcamListViewModel : BaseViewModel
{
public ICommand OpenVideoWebcamCommand { set; get; }
private List<Webcam> _ListOfWebcam { get; set; }
public List<Webcam> ListOfWebcam
{
get { return _ListOfWebcam; }
set
{
_ListOfWebcam = value;
OnPropertyChanged();
}
}
private Task DownloadFramesTask;
CancellationTokenSource tokenSourceDownloadFrames = new CancellationTokenSource();
CancellationToken cancellationTokenDownloadFrames;
public WebcamListViewModel(INavigationService navigationService, IApiAutostradeManagerFactory apiAutostradeManagerFactory) : base(navigationService,apiAutostradeManagerFactory)
{
OpenVideoWebcamCommand = new Command<Webcam>(async (webcam) => {
await navigationService.NavigateAsync(Locator.WebcamVideoPopUpPage);
Messenger.Default.Send(new InfoWebcamVideoMessage(webcam.c_mpr, webcam.c_uuid, webcam.t_str_vid));
});
}

Well it could be related to this mysterious controls:ExtendedViewCell of yours :)
Also did you disable the ListView selection: <ListView ... SelectionMode="None" /> ?

As Roubachof said that I don't know if it is related to controls:ExtendedViewCell,please check if you have binding BindingContext, then you can take a look the following code:
<StackLayout>
<ListView x:Name="listview1" ItemsSource="{Binding persons}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="{Binding Id}" />
<Label Text="{Binding name}" />
<Button
Command="{Binding BindingContext.command, Source={x:Reference listview1}}"
CommandParameter="{Binding Id}"
Text="Delete item" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
public partial class Page1 : ContentPage
{
public ObservableCollection<person> persons { get; set; }
public RelayCommand1 command { get; set; }
public Page1 ()
{
InitializeComponent ();
persons = new ObservableCollection<person>();
for(int i =0;i<20;i++)
{
person p = new person()
{
Id = i,
name = "cherry" + i
};
persons.Add(p);
command = new RelayCommand1(obj => method1((int)obj));
}
this.BindingContext = this;
}
public void method1(int Id)
{
persons.RemoveAt(Id);
//IEnumerable<person> list = persons.Where(x => x.Id == Id);
//foreach (person m in list)
//{
//}
}
}
public class person
{
public int Id { get; set; }
public string name { get; set; }
}

How to fix binding issue in ListView

Im trying to bind my ListView to an observableCollection on my ViewModel. The other bindings on the same class are working but i dont see any data where my list is supposed to be.
Ive tried setting the rows uneven, instantiating a separate Collection, and using breakpoints to confirm there is data.
Here is the xaml code:
<StackLayout Spacing="10" Padding="7" Grid.Row="1" Grid.Column="0">
<Label Text="Name:" FontSize="Medium"/>
<Label Text="{Binding order.Name}" FontSize="Small"/>
<Label Text="Price:" FontSize="Medium"/>
<Label Text="{Binding order.Price}" FontSize="Small"/>
</StackLayout>
<ListView ItemsSource="{Binding order.foodItems}" Grid.Row="0" Grid.Column="0" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="10" Orientation="Horizontal" HorizontalOptions="Fill">
<Label Text="{Binding Name}" FontSize="Medium"/>
<Label Text="{Binding Quantity}" FontSize="Medium" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Here is my ViewModel
Order _order;
public Order order
{
get { return _order; }
set { SetProperty<Order>(ref _order, value); }
}
public OrderDetailViewModel(Order value)
{
order = value;
}
The order class:
public class Order
{
public string Name { get; set; }
public ObservableCollection<IFoodItems> foodItems;
public double Price { get; set; }
public Order(string name)
{
Name = name;
foodItems = new ObservableCollection<IFoodItems>();
}
public void SetPrice(double value)
{
Price = value;
}
public void AddItem(IFoodItems food)
{
foodItems.Add(food);
}
}

Listview does not contain a definition for selecteditems

I am using Xamarin.Forms.I want to remove the selected item in listview after clicking Remove button.
My xaml
<ListView x:Name="ProductsListView"
HasUnevenRows="True"
BackgroundColor="#ecf0f1"
SeparatorVisibility="None"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Margin="6,4,6,4"
BackgroundColor="White">
<StackLayout Orientation="Horizontal">
<Label Text="Item ID" Margin="25,10,4,4" FontSize="Small" TextColor="Black" />
<Label Text="{Binding retail_modified_item_id}" Margin="25,10,4,4" TextColor="Black" FontSize="12" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="Name" Margin="25,2,8,4" TextColor="Black" FontSize="Small" />
<Label Text="{Binding name}" Margin="32,1,8,4" TextColor="Black" FontSize="Small" />
<Switch IsToggled="false" Margin="210,2,2,2" Toggled="Switch_Toggled" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="OldPrice" Margin="25,2,8,4" TextColor="Black" FontSize="Small"/>
<Label Text="{Binding old_price}" Margin="32,1,8,4" TextColor="Black" FontSize="Small" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="NewPrice" Margin="25,2,8,4" TextColor="Black" FontSize="Small" />
<Label Text="{Binding new_price}" Margin="32,1,8,4" TextColor="Black" FontSize="Small" />
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
My cs code
private void reject(object sender, EventArgs args)
{
foreach (var v in ProductsListView.SelectedItems)
{
ProductsListView.ItemSelected.Remove(v);
}
DisplayAlert("Rejected","Request Rejected!!", "OK");
}
I am getting this error:
listview does not contain a definition for selecteditem, ItemSelected

You can try cast it to ProductListView,
var selectedItems = (ListView/* or ProductListView*/)sender; //-> you need casting to access it.
And you can change list view item source
public void reject(your_list_of_model_type your_list_of_model)
{
your_list_of_model.RemoveRange(selectedItems);
ProductListView.ItemSource = your_list_of_model;
}
Solution 2 :
Here is what you could do :
This be my model class :
public class Item
{
public string ItemName { get; set; }
public string ItemDetails { get; set; }
}
And in my XAML or you can write this in code as well, bind to the Command Parameter of your Item template :
<Button Text="Delete" CommandParameter="{Binding ItemName}" Clicked="DeleteClicked"></Button>
Full Item Template will be like below :
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Orientation="Horizontal">
<Label Text="{Binding ItemName}" HorizontalOptions="StartAndExpand" FontSize="30"></Label>
<Button Text="Delete" CommandParameter="{Binding ItemName}" Clicked="DeleteClicked">
</Button>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
And in you code file you can do this :
public void DeleteClicked(object sender, EventArgs e)
{
var item = (Xamarin.Forms.Button)sender;
Item listitem = (from itm in allItems
where itm.ItemName == item.CommandParameter.ToString()
select itm)
.FirstOrDefault<Item>();
allItems.Remove(listitem);
}
IMPORTANT : This would only delete the item from the bound collection. To delete it from the original list you need to use ObservableCollection

You can add all the toggled items to a list, suppose selectedItems. And when you click REJECT button, delete the selectedItems from the datasource of listview.
The full code is like this:
MainPage.xaml:
<StackLayout Orientation="Vertical">
<!-- Place new controls here -->
<Button Text="APPROVE"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
<Button Text="REJECT"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"
Clicked="reject"/>
<ListView x:Name="ProductsListView"
HasUnevenRows="True"
BackgroundColor="#ecf0f1"
SeparatorVisibility="None"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Vertical" Margin="6,4,6,4"
BackgroundColor="White">
<StackLayout Orientation="Horizontal">
<Label Text="{Binding name}" Margin="32,1,8,4" TextColor="Black" FontSize="Small" />
<Switch IsToggled="false" Margin="210,2,2,2" Toggled="Switch_Toggled" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="{Binding retail_modified_item_id}" Margin="25,10,4,4" TextColor="Black" FontSize="12" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="OldPrice" Margin="25,2,8,4" TextColor="Black" FontSize="Small"/>
<Label Text="{Binding old_price}" Margin="32,1,8,4" TextColor="Black" FontSize="Small" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="NewPrice" Margin="25,2,8,4" TextColor="Black" FontSize="Small" />
<Label Text="{Binding new_price}" Margin="32,1,8,4" TextColor="Black" FontSize="Small" />
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
MainPage.xaml.cs:
public partial class MainPage : ContentPage
{
ObservableCollection<ItemModel> allItems = new ObservableCollection<ItemModel>();
List<ItemModel> selectedItems = new List<ItemModel>();
public MainPage()
{
InitializeComponent();
InitializeData();
ProductsListView.ItemsSource = allItems;
}
private void reject(object sender, EventArgs e)
{
foreach (var v in selectedItems)
{
allItems.Remove(v);
}
DisplayAlert("Rejected", "Request Rejected!!", "OK");
}
private void Switch_Toggled(object sender, ToggledEventArgs e)
{
var switch1 = (Switch)sender;
var item = (ItemModel)switch1.BindingContext;
var isSelected = !item.selected;
if (isSelected)
{
selectedItems.Add(item);
}
else
{
selectedItems.Remove(item);
}
}
private void InitializeData() {
allItems.Add(new ItemModel { name = "Onion Rings, Medium",
retail_modified_item_id = 1000630,
old_price = 1.29,
new_price = 9.45,
selected = false
});
allItems.Add(new ItemModel
{
name = "Hashbrowns",
retail_modified_item_id = 1000739,
old_price = 0.99,
new_price = 8.5,
selected = false
});
allItems.Add(new ItemModel
{
name = "Amstel Light, Single",
retail_modified_item_id = 1002038,
old_price = 3.5,
new_price = 18,
selected = false
});
}
}
ItemModel.cs:
class ItemModel
{
public string name { get; set; }
public int retail_modified_item_id { get; set; }
public double old_price { get; set; }
public double new_price { get; set; }
public bool selected { get; set; }
}