I have a post here. Everything works fine when I use CollectionView to Group data. However I want to display the Data Group without using the CollectionView. Specifically I use BindableLayout.ItemsSource in StackLayout.
I thought of nesting
PageOne.xaml
<StackLayout x:Name="stdata">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout>
<Label Text="{Binding SupplierName}"/>
<StackLayout BindableLayout.ItemsSource="{Binding BindingContext.SupplierList, Source={x:Reference stdata}}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Label Text="{Binding NameProduct}"/>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
PageOne.xaml.cs
var getcart = JsonConvert.DeserializeObject<List<CartUser>>(mycart);
cartUsers = getcart;
foreach (var item in cartUsers)
{
if (!SupplierList.Any(supplierid => supplierid.SupplierName == item.SupplierName))
{
SupplierList.Add(new SupplierIDGrouping(item.SupplierName, item.SupplierID, item.IsVisibleShippingBrand, item.NameShippingBrand));
}
SupplierList.Single(supplierid => supplierid.SupplierName == item.SupplierName).Add(item);
}
BindableLayout.SetItemsSource(stdata, SupplierList);
The data I received
UI display data
It shows a list of 2 SupplierName. However the product list it does not display.
Am I wrong about binding {Binding BindingContext.SupplierList, Source={x:Reference stdata}}. Hoping for any help. Thank you
Related
I build this expandable view like so:
<expandable:ExpandableView
x:Name="expandableView"
TouchHandlerView="{x:Reference arrow}"
CommandParameter="some text"
Command="{Binding Path=TapCommand, Source={x:Reference page}}"
ExpandAnimationLength="100">
<expandable:ExpandableView.PrimaryView>
<Label x:Name="arrow" Text="down"/>
</expandable:ExpandableView.PrimaryView>
<expandable:ExpandableView.SecondaryViewTemplate>
<DataTemplate>
<ListView x:Name="list_cat1">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<Label Text="{Binding subCatName}" >
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="GetClick"/>
</Label.GestureRecognizers>
</Label>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<!--
<ListView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>mono</x:String>
<x:String>monodroid</x:String>
<x:String>monotouch</x:String>
<x:String>monorail</x:String>
<x:String>monodevelop</x:String>
<x:String>monotone</x:String>
<x:String>monopoly</x:String>
<x:String>monomodal</x:String>
<x:String>mononucleosis</x:String>
</x:Array>
</ListView.ItemsSource>
-->
</ListView>
</DataTemplate>
</expandable:ExpandableView.SecondaryViewTemplate>
</expandable:ExpandableView>
First, I gave it data via the itemsource from the xaml. This worked and I even got the correct click event assigned to it.
Now I wanna feed data from code. Unfortunately, I cannot access: x:Name in listview. It doesnt exist in code.
How can I feed a list of data into this expandable view?
Thank you!
I need to bind grouped data collection to a FlexLayout, like in CollectionView which has 'IsGrouped' property. Is there anything like that in FlexLayout? Currently, I can bind non-grouped collection of data using BindableLayout as like below
<FlexLayout BindableLayout.ItemsSource="{Binding DataList}"
Wrap="Wrap"
JustifyContent="Start"
AlignItems="Start"
AlignContent="Start">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Frame WidthRequest="154" Padding="0" CornerRadius="10" HasShadow="True">
<StackLayout Orientation="Vertical" Padding="10" HorizontalOptions="FillAndExpand">
<Image Source="{Binding Image}" WidthRequest="130" HeightRequest="130" HorizontalOptions="Center"/>
<Label Text="{Binding Title}" FontFamily="RobotoMedium" TextColor="#001B48" FontSize="8"></Label>
</StackLayout>
</Frame>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
The reason for choosing FlexLayout is the necessity of making my app looks good in landscape mode too while listing out the data. Now I need to list out grouped collection of data in same way.
Option 1
In your case if you want to display data collection with group , you could use ListView(or CollectionView) and set the ViewCell with BindableLayout .
Sample code
<ListView //...>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<FlexLayout BindableLayout.ItemsSource="{Binding DataList}"
Wrap="Wrap"
JustifyContent="Start"
AlignItems="Start"
AlignContent="Start">
//...
</FlexLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView >
Here is a similar issue that you can have a refer .
Option 2
If you don't want to use ListView , you can also set the BindableLayout in the DataTemplate of another BindableLayout . Make sure that you set the correct path of ItemsSource .
I have a listview grouped, and everytime i touch the group header, all the items in the group hide, but for some reason the cells remain
I have tried to set a binded IsVisible property to all elements in the ViewCell, but still cant make it work
Heres my ListView xaml code:
<ListView x:Name="GroupsList"
ItemsSource="{Binding Dishes}"
IsGroupingEnabled="True"
SeparatorColor="Black"
SeparatorVisibility="Default"
HasUnevenRows="True"
GroupShortNameBinding="{Binding Key}">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell Height="50">
<StackLayout
VerticalOptions="FillAndExpand"
BackgroundColor="LightSlateGray">
<Button BackgroundColor="Transparent"
BorderColor="Transparent"
BorderWidth="0"
Text="{Binding Key}"
TextColor="White"
HorizontalOptions="StartAndExpand"
Command="{Binding BindingContext.SelectGroupHeader, Source={x:Reference DishesPage}}"
CommandParameter="{Binding Key}"
ContentLayout="Right, 300"
ImageSource="next_disclosure"></Button>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ContentView Padding="2, 5, 5, 0"
IsVisible="{Binding IsVisible}">
<Frame Padding="2"
HasShadow="False"
BackgroundColor="White">
<StackLayout Orientation="Horizontal">
<Label Margin="10"
Text="{Binding Name}"
TextColor="Black"
FontSize="Medium"
HorizontalOptions="StartAndExpand"></Label>
</StackLayout>
</Frame>
</ContentView>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Here is my ViewModel code:
private async Task SelectedGroupHeader(string item)
{
foreach(var group in Dishes)
{
if(item == group.Key)
{
foreach(var dish in group)
{
if (dish.IsVisible)
{
dish.IsVisible = false;
}
else
{
dish.IsVisible = true;
}
}
}
}
}
before hiding:
after hiding
The problem is that you are setting ContentView.IsVisible to false when you want to hide the items, but when you do that you hide the ContentView and the items remain in the list, so you still see the items, but without a ContentView (blanks)!
One way i found out you can achieve your purpose is to store somewhere the items of the tapped group and clear its content when you tap on it. When you do that the group becomes empty, and thus the items in the ListView are not visible anymore. When you tap again in the group header you add again the items to the group so that the ListView displays again your items.
The code i got working is more or less as follows:
In XAML i only removed the binding to ContentView.IsVisible:
<ListView x:Name="GroupsList"
ItemsSource="{Binding Dishes}"
IsGroupingEnabled="True"
SeparatorColor="Black"
SeparatorVisibility="Default"
HasUnevenRows="True"
GroupShortNameBinding="{Binding Key}">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell Height="50">
<StackLayout
VerticalOptions="FillAndExpand"
BackgroundColor="LightSlateGray">
<Button BackgroundColor="Transparent"
BorderColor="Transparent"
BorderWidth="0"
Text="{Binding Key}"
TextColor="White"
HorizontalOptions="StartAndExpand"
Command="{Binding BindingContext.SelectGroupHeader, Source={x:Reference DishesPage}}"
CommandParameter="{Binding Key}"
ContentLayout="Right, 300"
ImageSource="next_disclosure"></Button>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ContentView Padding="2, 5, 5, 0">
<Frame Padding="2"
HasShadow="False"
BackgroundColor="White">
<StackLayout Orientation="Horizontal">
<Label Margin="10"
Text="{Binding Name}"
TextColor="Black"
FontSize="Medium"
HorizontalOptions="StartAndExpand"></Label>
</StackLayout>
</Frame>
</ContentView>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
In your ViewModel you would have to do something like:
private async Task SelectedGroupHeader(string item)
{
foreach(var group in Dishes)
{
if(item == group.Key)
{
if(!group.IsHidden)
{
group.Clear();
group.IsHidden = true; // This is simply a flag you can set in your group class to keep track of if the group is collapsed or not
}
else
{
AddItemsToGroup(group)// Add this group all the elements that belongs to it.
group.IsHidden = false;
}
}
}
}
I hope this helps!
Note: this only works if your collection of items is an ObservableCollection, so that the ListView gets notified when the collection changes!
Latest Xamarin on Mac as of writing:
<ContentPage.Content>
<StackLayout>
<ListView x:Name="ItemsListView" ItemsSource="{Binding Items}" VerticalOptions="FillAndExpand" HasUnevenRows="true" RefreshCommand="{Binding LoadItemsCommand}" IsPullToRefreshEnabled="true" IsRefreshing="{Binding IsBusy, Mode=OneWay}" CachingStrategy="RecycleElement" ItemSelected="OnItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<StackLayout Padding="10">
<Label Text="{Binding Summary}" LineBreakMode="NoWrap" Style="{DynamicResource ListItemTextStyle}" FontSize="Medium" />
<Label Text="{Binding Reporter}" LineBreakMode="NoWrap" Style="{DynamicResource ListItemDetailTextStyle}" FontSize="Micro" />
</StackLayout>
<StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand">
<Label Text="{Binding Start}" FontSize="Medium" VerticalOptions="Center"/>
<Switch IsToggled="{Binding Result}" Toggled="Handle_Toggled" VerticalOptions="Center"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
How do I get the bound item to a Switch control in a ListView. The item is in the list of items bound to the ListView, provided by the ViewModel. You can 'switch' the item's toggle without selecting the row.
void Handle_Toggled(object sender, Xamarin.Forms.ToggledEventArgs e)
{
// In this event handler, how do I get the bound item from the ListView??
}
Normally, what you'd need to do, is to react to the changes of property "Result" in your item class, and keep your logic out of the Page class.
If you need to handle in the event, you can do it this way:
void Handle_Toggled(object sender, Xamarin.Forms.ToggledEventArgs e)
{
var switch = sender as Switch;
var item = switch.Parent.BindingContext as ItemViewModel;
}
Replace ItemViewModel by your item's type.
How do I implement an ItemTemplate within a ListView using XAML?
If I do not use ItemTemplate, then my binding works and I receive no errors.
However, I want to format my list view.
As a result, I am attempting to use ItemTemplate but continue to hit a runtime exception:
Xamarin.Forms.Xaml.XamlParseException: Position 30:30. Cannot assign property "View": type mismatch between "Xamarin.Forms.TextCell" and "X…
I receive a runtime exception with the following XAML:
<ListView Grid.Row="1" Grid.Column="0" ItemsSource="{Binding Services}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<TextCell Text="{Binding Name}" Detail="{Binding Description}" />
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Any suggestions?
ViewCell is a class which you can use to create custom cells layouts
TextCell is a predefined cell with predefined layout.
You cannot use a Cell inside another Cell (eg. TextCell in a ViewCell).
You can create a custom cell like this:
<ListView Grid.Row="1" Grid.Column="0" ItemsSource="{Binding Services}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Orientation="Vertical">
<Label Text="{Binding Name}" />
<Label Text="{Binding Description}" />
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
OR use a predefined one:
<ListView Grid.Row="1" Grid.Column="0" ItemsSource="{Binding Services}">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Name}" Detail="{Binding Description}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
A list of predefined cells is here: http://developer.xamarin.com/guides/cross-platform/xamarin-forms/controls/cells/