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 .
Related
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
I'm trying to implement a CarouselView to display a set of images on my app. Apparently, I can't remove the Whitespace at the Bottom of the CarouselView no matter what combinations I tried.
I've placed BackgroundColor property for CarouselView [Red], Grid[Green] (inside DataTemplate), and IndicatorView [Blue] to see which of them is consuming the rest of the screen despite the lack of StackLayout and it seems that either CarouselView or Grid is causing the unwanted behaviour.
Here's my XAML Code with roughly nothing on the ViewModel but a Mock Database for the Image Collection:
<ContentPage.Content>
<Grid ColumnDefinitions="*"
RowDefinitions="Auto,Auto,Auto,1*">
<Label Grid.Row="0" Grid.Column="0"
Text="CarouselView Test"
TextColor="Black"
FontAttributes="Bold"
FontSize="20"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
Padding="10" />
<CarouselView Grid.Row="1" Grid.Column="0" BackgroundColor="Red" HeightRequest="{Binding ScreenWidth}"
x:Name="TheCarousel"
ItemsSource="{Binding ImageSourceCollection}"
IndicatorView="indicatorView">
<CarouselView.ItemTemplate>
<DataTemplate>
<Grid RowDefinitions="Auto" ColumnDefinitions="Auto" BackgroundColor="Green" HorizontalOptions="Center" VerticalOptions="Center">
<Image Grid.Row="0" Grid.Column="0" Source="{Binding .}" />
</Grid>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView Grid.Row="2" Grid.Column="0" BackgroundColor="Blue"
x:Name="indicatorView"
IndicatorColor="LightGray"
IndicatorSize="10"
SelectedIndicatorColor="Black" />
</Grid>
</ContentPage.Content>
And here's a screenshot of my current build with the CarouselView/Grid consuming most of the Screen Space:
CarouselView has some weird behaviors on size calculating,in your scenario the only way is get the height it(template) needs in code(viewmodel), and bind it to the HeightRequest on CarouselView .
Xaml
<CarouselView HeightRequest="{Binding xxx}"
View model
public double xxx {
get
{
// calculate the height according to the width by ratio
return height;
}
}
I think you need to set Space between rows and columns to Zero if you want to make your indicatorView stick to your CarouselView
So what actually worked for me.
I set Grid Row Definition to ex.(300) and then Carousel Height Request to 350.
I'm setting Image Width based on Screen Width, but I tried it Manually ex (400) and still worked, don't get confused.
<Grid RowDefinitions="300">
<CarouselView x:Name="carouselView"
Grid.Row="0"
ItemsSource="{Binding HomeCarousel}">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Frame HasShadow="False"
CornerRadius="0"
Margin="0"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
HeightRequest="350">
<SwipeView>
<Image Source="{Binding ImageSource}"
Aspect="AspectFill"
WidthRequest="{DynamicResource FullScreenWidth}"
HorizontalOptions="Center" />
</SwipeView>
</Frame>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</Grid>
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'm looking for a way to dynamically generate card-like controls that look like these:
I have been doing some search and have found this article that shows you how to implement CardView on a Xamarin.Android project. But I'm using Xamarin.Forms so I can compile for iOS as well.
I also tried to use a ListView with ViewCells and a couple StackLayout tags, but wasn't able to even get close to that, here is the code:
<ListView x:Name="listView">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Height="300">
<StackLayout>
<StackLayout Orientation="Horizontal">
<Image Source="{Binding UserAvatar}" />
<Label Text="{Binding UserName}" />
</StackLayout>
<Image Source="{Binding BittImage}" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I'm pretty new to Xamarin, so if I'm missing something basic, please let me know guys.
You are on the right track. Use a ListView, with a Frame as the root element and a margin, and set the background color of the ListView as appropriate. This should give you the card look. Then you fill in the card as you require.
<ListView x:Name="listView" BackgroundColor="Gray">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Height="300">
<Frame HasShadow="true" Margin="5">
<StackLayout>
<StackLayout Orientation="Horizontal">
<Image Source="{Binding UserAvatar}" />
<Label Text="{Binding UserName}" />
</StackLayout>
<Image Source="{Binding BittImage}" />
</StackLayout>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
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/