call variable from codebehind inside DataTemplate with Xamarin Forms - c#

It would recover from the codebehind firstGrid and secondGrid objects.
But these are inside a DataTemplate, as I can recall them from the codebehind?
Thank you.
Here is my code:
<control:CarouselView x:Name="carouselView">
<control:CarouselView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="46*"></RowDefinition>
<RowDefinition Height="0.2*"></RowDefinition>
<RowDefinition Height="53.8*"></RowDefinition>
</Grid.RowDefinitions>
<!-- griglia del carousel, tutta la struttura inizia qui-->
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*"></ColumnDefinition>
<ColumnDefinition Width="35*"></ColumnDefinition>
<ColumnDefinition Width="45*"></ColumnDefinition>
<ColumnDefinition Width="10*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Button Image="backBlueArrow.png" BorderColor="Transparent" BackgroundColor="Transparent" Clicked="clickmePrev" Grid.Column="0"></Button>
<!--<Image Source="backBlueArrow.png" x:Name="backClickArrow" Aspect="AspectFit" Grid.Column="0"></Image>-->
<StackLayout Margin="0,0,10,0" VerticalOptions="Center" HorizontalOptions="End" Grid.Column="1">
<Image HeightRequest="70" Source="{Binding Immagine}" Aspect="AspectFit"></Image>
</StackLayout>
<!-- griglia superiore, riprende i dati tra le barre bianche-->
<Grid Grid.Row="0" Grid.Column="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40*"></RowDefinition>
<RowDefinition Height="60*"></RowDefinition>
</Grid.RowDefinitions>
<Label Text="{Binding Descrizione}" Margin="{Binding Margine}" TextColor="#fff" FontSize="Small" VerticalTextAlignment="End" HorizontalTextAlignment="Start" Grid.Row="0"/>
<Label Text="{Binding Valore}" FontSize="Large" TextColor="#fff" VerticalTextAlignment="Start" HorizontalTextAlignment="Start" Grid.Row="1"/>
<Image Margin="-25,-5,0,0" Source="{Binding ImmagineBatteriaEmoticon}" HeightRequest="50" x:Name="emoticonBattery" Grid.Row="1" VerticalOptions="Start" HorizontalOptions="Start"></Image>
</Grid>
<Button Image="nextBlueArrow.png" BorderColor="Transparent" BackgroundColor="Transparent" Clicked="clickmeNext" Grid.Column="3"></Button>
<!--<Image Source="nextBlueArrow.png" x:Name="nextClickArrow" Aspect="AspectFit" Grid.Column="3"></Image>-->
</Grid>
<!-- griglia fare la riga bianca -->
<Grid BackgroundColor="White" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
</Grid>
<!-- griglia inferiore, ritrare i dati dei testi -->
<ScrollView Grid.Row="2">
<Grid Padding="5" Grid.Row="2" x:Name="firstGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="65*"></ColumnDefinition>
<ColumnDefinition Width="35*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Label HorizontalTextAlignment="Start" TextColor="#5B6667" Grid.Column="0" Grid.Row="0" Text="{Binding Testo1}"></Label>
<Label HorizontalTextAlignment="End" TextColor="#5B6667" Grid.Column="1" Grid.Row="0" Text="{Binding Valore1}"></Label>
<Label HorizontalTextAlignment="Start" TextColor="#5B6667" Grid.Column="0" Grid.Row="1" Text="{Binding Testo2}"></Label>
<Label HorizontalTextAlignment="End" TextColor="#5B6667" Grid.Column="1" Grid.Row="1" Text="{Binding Valore2}"></Label>
<Label HorizontalTextAlignment="Start" TextColor="#5B6667" Grid.Column="0" Grid.Row="2" Text="{Binding Testo3}"></Label>
<Label HorizontalTextAlignment="End" TextColor="#5B6667" Grid.Column="1" Grid.Row="2" Text="{Binding Valore3}"></Label>
<Label HorizontalTextAlignment="Start" TextColor="#5B6667" Grid.Column="0" Grid.Row="3" Text="{Binding Testo4}"></Label>
<Label HorizontalTextAlignment="End" TextColor="#5B6667" Grid.Column="1" Grid.Row="3" Text="{Binding Valore4}"></Label>
<Label HorizontalTextAlignment="Start" TextColor="#5B6667" Grid.Column="0" Grid.Row="4" Text="{Binding Testo5}"></Label>
<Label HorizontalTextAlignment="End" TextColor="#5B6667" Grid.Column="1" Grid.Row="4" Text="{Binding Valore5}"></Label>
<Label HorizontalTextAlignment="Start" TextColor="#5B6667" Grid.Column="0" Grid.Row="5" Text="{Binding Testo6}"></Label>
<Label HorizontalTextAlignment="End" TextColor="#5B6667" Grid.Column="1" Grid.Row="5" Text="{Binding Valore6}"></Label>
<Label HorizontalTextAlignment="Start" TextColor="#5B6667" Grid.Column="0" Grid.Row="6" Text="{Binding Testo7}"></Label>
<Label HorizontalTextAlignment="End" TextColor="#5B6667" Grid.Column="1" Grid.Row="6" Text="{Binding Valore7}"></Label>
<Label HorizontalTextAlignment="Start" TextColor="#5B6667" Grid.Column="0" Grid.Row="7" Text="{Binding Testo8}"></Label>
<Label HorizontalTextAlignment="End" TextColor="#5B6667" Grid.Column="1" Grid.Row="7" Text="{Binding Valore8}"></Label>
</Grid>
<RelativeLayout Grid.Row="2" x:Name="secondGrid" BackgroundColor="Fuchsia" HeightRequest="50" WidthRequest="100">
<Label Text="ciao"></Label>
</RelativeLayout>
</ScrollView>
</Grid>
<!--<Label Text="{Binding Testo}" />-->
</DataTemplate>
</control:CarouselView.ItemTemplate>
</control:CarouselView>
Warning: Before that is duplicated, the code is for Xamarin forms pcl. Which it is slightly different from c # with WPF.
thanks


When you use a DataTemplate, the binding concern the object you are binding and not the ViewModel you may have used.
But fear not, as Xamarin provides us ways to attach treatements to this kind of objects !
Let's say you want to click your image :
<Button Image="nextBlueArrow.png" BorderColor="Transparent" BackgroundColor="Transparent" Clicked="clickmeNext" Grid.Column="3"></Button>
May become
<Image Source="nextBlueArrow.png">
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="clickmeNext"
CommandParameter="{Binding .}" />
</Image.GestureRecognizers>
</Image>
With the clickmeNext method in your code behind like this :
public async void clickmeNext(object sender, EventArgs e)
{
Image imageSender = (Image)sender;
YourObject yourObject= (YourObject )imageSender.BindingContext;
//some actions on your instance of YourObject,
//which is the instance linked to the image
}
If I did not answer your question, don't hesitate to add to your question to make it more clear.

Related

Xamarin - Frame Shadow not showing properly

I have a Xamarin Forms project and I'm trying to show frame shadow just like this
But instead it shows like this, the shadow is only appearing on the corners
I can't get it to show everywhere like the first picture
Here is my code:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:viewmodels="clr-namespace:AppCrijoya.ViewModels"
xmlns:model="clr-namespace:AppCrijoya.Models"
x:Class="AppCrijoya.Views.InvoicePage"
x:DataType="viewmodels:InvoiceViewModel"
Title="Facturas">
<!--<ContentPage.BindingContext>
<viewmodels:InvoiceViewModel />
</ContentPage.BindingContext>-->
<ContentPage.Content>
<StackLayout BackgroundColor="White">
<CollectionView x:Name="ListViewCart"
ItemsSource="{Binding ListCart}"
SelectionMode = "Single"
SelectedItem="{Binding CartSelected}"
SelectionChangedCommand="{Binding ShowAlertCommand}"
SelectionChangedCommandParameter="{Binding CartSelected, Source={RelativeSource Self}}"
>
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="model:Invoice">
<Frame Margin="2" CornerRadius="30" HasShadow="True">
<Grid Margin="0" HorizontalOptions="FillAndExpand" VerticalOptions="Center" HeightRequest="160" RowSpacing="0" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="Nombre del Cliente:" VerticalOptions="Start"/>
<Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding Name}" VerticalOptions="Start"/>
<Image Source="arrow_dropdown.png" HeightRequest="20" WidthRequest="20" Grid.Row="0" Grid.Column="3" VerticalOptions="End"/>
<Label Grid.Row="1" Grid.Column="0" Text="Fecha Compra:" VerticalOptions="Start"/>
<Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding Date}" VerticalOptions="Start"/>
<Label Grid.Row="2" Grid.Column="0" Text="Monto Total:" VerticalOptions="Start"/>
<Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding Total, Mode=TwoWay, StringFormat='{0:N2}€'}" VerticalOptions="Start"/>
<Label Grid.Row="3" Grid.ColumnSpan="3" Text="Detalle Compra" VerticalOptions="Start"/>
<BoxView Grid.Row="4" Grid.ColumnSpan="3" Color="Gray" HeightRequest="2" HorizontalOptions="Fill" />
<Label Grid.Row="5" Grid.Column="0" Text="Nombre" VerticalOptions="Start" TextColor="#9C2424"/>
<Label Grid.Row="5" Grid.Column="1" Text="Monto" VerticalOptions="Start" TextColor="#9C2424"/>
<Label Grid.Row="5" Grid.Column="2" Text="Cantidad" VerticalOptions="Start" TextColor="#9C2424"/>
<StackLayout Grid.Row="6" Grid.ColumnSpan="3" Margin="0" Padding="0">
<CollectionView x:Name="ListViewOrders"
ItemsSource="{Binding ListOrders}"
SelectionMode = "None"
>
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="model:CrOrder">
<Grid RowSpacing="0" ColumnSpacing="0" Margin="0" MinimumHeightRequest="50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="{Binding Reference}" TextColor="Black" VerticalOptions="Center" FontSize="12" />
<Label Grid.Row="0" Grid.Column="1" Text="{Binding Price, StringFormat='{0:N2}€'}" TextColor="Black" VerticalOptions="End" FontSize="12" />
<Label Grid.Row="0" Grid.Column="2" Text="{Binding Quantity}" TextColor="Black" VerticalOptions="End" FontSize="12"/>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</Grid>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
What can I do to show the shadow all around the frame? Please help and thanks.
EDIT
This is what I have with Margin=2 on Frame
Margin=50
Padding=50
Just to show how it behaves

At first, you can create a new frame in your project to check if the cause is the renderer or not. Such as:
<Frame Margin="20" CornerRadius="10" HasShadow="True">
<Label Text="TestShaw" HorizontalOptions="Center"/>
</Frame>
If the shadow shows correctly, the cause maybe the layout or the margin of your frame. So you can change the values of it.
If the shadow shows incorrectly too, you may need to use a custom renderer for the frame. Such as:
[assembly: ExportRenderer(typeof(Myframe), typeof(MyFrameRenderer))]
namespace App36.Droid
{
public class MyFrameRenderer : Xamarin.Forms.Platform.Android.FastRenderers.FrameRenderer
{
public MyFrameRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
{
base.OnElementChanged(e);
CardElevation = 50;
SetOutlineSpotShadowColor(Xamarin.Forms.Color.Black.ToAndroid());
SetOutlineAmbientShadowColor(Xamarin.Forms.Color.Black.ToAndroid());
}
}
}
But in my project, both of them shows correctly. So if you need more information, you can check the link following.
Link: Xamarin forms Shadow on Frame in Android
And here is the frame in my project:
If the platform is ios for your project, please check this case:Forms frame isn't the same on iOS

Styling on the collection view component

Uisng the carsoule view I am trying to list planes for the msfs community however the image is very small.
<CollectionView x:Name="addOnList" Margin="0,40,0,0" Grid.Row="1" SelectionMode="Single"
VerticalScrollBarVisibility="Never">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" VerticalItemSpacing="20" HorizontalItemSpacing="20" Span="2"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10" BackgroundColor="#131313" WidthRequest="145" HeightRequest="160">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image Aspect="Fill" Source="{Binding ThumbNail}" Margin="10" WidthRequest="200" HeightRequest="200"
HorizontalOptions="Center" VerticalOptions="Center"/>
<Label Grid.Row="1" Text="{Binding Name}" TextColor="#F9B522" FontFamily="ThemeFont"
VerticalOptions="End" HorizontalOptions="Start"/>
<Label Grid.Row="1" Text="{Binding Version}" TextColor="White" FontFamily="ThemeFont"
VerticalOptions="End" HorizontalOptions="End"/>
<Button Grid.Row="3" x:Name="btnSetReminder" Text="Add to Favourites"></Button>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
<CollectionView.Footer>
<Grid HeightRequest="0"/>
</CollectionView.Footer>
</CollectionView>
What I want is Image Name over the image then I want a button to say add to favourites which would be a heart and then a the version number to the right something like this but I would like the title to be over the image and the image to be slightly bigger

The whole Grid has a HeightRequest 160 and you image can't get the HeightRequest="200".
Also the Button should in Grid.Row 2.
I would recommend you to layout this way:
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10" BackgroundColor="#131313" WidthRequest="145" HeightRequest="160">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="20"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Image Aspect="Fill" Source="sample.jpg"
HorizontalOptions="Center" VerticalOptions="Center"/>
<Label Grid.Row="1" Text="Name" TextColor="#F9B522" FontFamily="ThemeFont"
VerticalOptions="End" HorizontalOptions="Start"/>
<Label Grid.Row="1" Text="Version" TextColor="White" FontFamily="ThemeFont"
VerticalOptions="End" HorizontalOptions="End"/>
<Button Grid.Row="2" x:Name="btnSetReminder" Text="Add to Favourites"></Button>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
Here is the result:
Update:
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10" BackgroundColor="#131313" WidthRequest="145" HeightRequest="160">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="20"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Image Aspect="Fill" Source="sample.jpg"
HorizontalOptions="Center" VerticalOptions="Center"/>
<Label Grid.Row="1" Text="Name" TextColor="#F9B522" FontFamily="ThemeFont"
VerticalOptions="End" HorizontalOptions="Start"/>
<Label Grid.Row="1" Text="Version" TextColor="White" FontFamily="ThemeFont"
VerticalOptions="End" HorizontalOptions="End"/>
<StackLayout Grid.Row="2" Orientation="Horizontal">
<Button Text="left" FontSize="8" HorizontalOptions="Start" WidthRequest="50"></Button>
<Button x:Name="btnSetReminder" FontSize="8" Text="Add to Favourites" HorizontalOptions="FillAndExpand"></Button>
<Button Text="right" FontSize="8" HorizontalOptions="End" WidthRequest="50"></Button>
</StackLayout>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>

To enlarge the image and make the text and button overlay:
<Image Grid.RowSpan="3" ... />
For a heart-favourite button, please try ImageButton:
<ImageButton Source="heart.png" ... />

Nothing Show inside Stacklayout

I' m working in Xamarin forms application ,I'm currently implementing a form contains two parts one is data entering part and other part is a list view Afetr i entered data and saved it should appear in list view ,In debug i checked ListViewUsers.ItemsSource count is not 0 it has values , but listView is not showing in the form .
<ContentPage.Content>
<StackLayout>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="500"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0">
<Grid x:Name="grid">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label x:Name="labelName" Grid.Row="0" Grid.Column="0" Margin="10" FontSize="6" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="Start" Text="Name"/>
<Entry x:Name="textName" Grid.Row="0" Grid.Column="1" WidthRequest="100" FontSize="6" VerticalOptions="CenterAndExpand" HorizontalOptions="Start" HorizontalTextAlignment="Start" Text="{Binding Name}" />
<Label x:Name="labelAge" Grid.Row="1" Grid.Column="0" Margin="10" FontSize="6" Text="Age" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="Start" />
<Entry x:Name="textAge" Grid.Row="1" Grid.Column="1" WidthRequest="100" FontSize="6" VerticalOptions="CenterAndExpand" HorizontalOptions="Start" HorizontalTextAlignment="Start" Text="{Binding Age}" />
<Label x:Name="labelAddress" Grid.Row="2" Grid.Column="0" Margin="10" FontSize="6" Text="Address" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="Start" />
<Entry x:Name="textAddress" Grid.Row="2" Grid.Column="1" WidthRequest="100" FontSize="6" VerticalOptions="CenterAndExpand" HorizontalOptions="Start" HorizontalTextAlignment="Start" Text="{Binding Address}" />
<Label x:Name="labelNICNumber" Grid.Row="3" Grid.Column="0" Margin="10" FontSize="6" Text="NIC" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="Start" />
<Entry x:Name="textNIC" Grid.Row="3" Grid.Column="1" WidthRequest="100" FontSize="6" VerticalOptions="CenterAndExpand" HorizontalOptions="Start" HorizontalTextAlignment="Start" Text="{Binding NIC}" />
<Button Grid.Row="4" Grid.Column="1" HeightRequest = "30" VerticalOptions="CenterAndExpand" HorizontalOptions="Start" FontSize="6" Text="Save" Clicked="UserSaveClick" />
</Grid>
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="0">
<Label x:Name="labelNICNumber2" Grid.Row="3" Grid.Column="0" Margin="10" FontSize="6" Text="NIC" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="Start" />
<ListView x:Name="ListViewUsers" SeparatorColor="Transparent" HasUnevenRows="True" IsVisible="True" IsEnabled="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="4*" />
</Grid.ColumnDefinitions>
<Label
WidthRequest="20"
HeightRequest="15"
TextColor="Black"
FontFamily="Open Sans"
FontSize="6"
Text="{Binding Name}"
VerticalOptions="Center"
HorizontalOptions="Start"
Grid.Column="1"/>
<Label
WidthRequest="20"
HeightRequest="15"
TextColor="Black"
FontFamily="Open Sans"
FontSize="10"
Text="{Binding Age}"
VerticalOptions="Center"
HorizontalOptions="Start"
Grid.Column="2" />
<Label
WidthRequest="20"
HeightRequest="15"
TextColor="Black"
FontFamily="Open Sans"
FontSize="10"
Text="{Binding Address}"
VerticalOptions="Center"
HorizontalOptions="Start"
Grid.Column="3" />
<Label
WidthRequest="20"
HeightRequest="15"
TextColor="Black"
FontFamily="Open Sans"
FontSize="10"
Text="{Binding NIC}"
VerticalOptions="Center"
HorizontalOptions="Start"
Grid.Column="4"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</Grid>
</StackLayout>

Its hard to see whats going on here, however
I have removed the redundant column definition
I have removed the highest level stacklayout, and just used a grid
I have removed the second nested stacklayout and left the grid
I have set both Rows to * in the main grid, just to make sure
Note : if this doesn't work, remove everything except the ListView, just as a sanity check
Xaml
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="grid" Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label
x:Name="labelName"
Grid.Row="0"
Grid.Column="0"
Margin="10"
FontSize="6"
HorizontalTextAlignment="Start"
Text="Name"
VerticalOptions="CenterAndExpand" />
<Entry
x:Name="textName"
Grid.Row="0"
Grid.Column="1"
FontSize="6"
HorizontalOptions="Start"
HorizontalTextAlignment="Start"
Text="{Binding Name}"
VerticalOptions="CenterAndExpand"
WidthRequest="100" />
<Label
x:Name="labelAge"
Grid.Row="1"
Grid.Column="0"
Margin="10"
FontSize="6"
HorizontalTextAlignment="Start"
Text="Age"
VerticalOptions="CenterAndExpand" />
<Entry
x:Name="textAge"
Grid.Row="1"
Grid.Column="1"
FontSize="6"
HorizontalOptions="Start"
HorizontalTextAlignment="Start"
Text="{Binding Age}"
VerticalOptions="CenterAndExpand"
WidthRequest="100" />
<Label
x:Name="labelAddress"
Grid.Row="2"
Grid.Column="0"
Margin="10"
FontSize="6"
HorizontalTextAlignment="Start"
Text="Address"
VerticalOptions="CenterAndExpand" />
<Entry
x:Name="textAddress"
Grid.Row="2"
Grid.Column="1"
FontSize="6"
HorizontalOptions="Start"
HorizontalTextAlignment="Start"
Text="{Binding Address}"
VerticalOptions="CenterAndExpand"
WidthRequest="100" />
<Label
x:Name="labelNICNumber"
Grid.Row="3"
Grid.Column="0"
Margin="10"
FontSize="6"
HorizontalTextAlignment="Start"
Text="NIC"
VerticalOptions="CenterAndExpand" />
<Entry
x:Name="textNIC"
Grid.Row="3"
Grid.Column="1"
FontSize="6"
HorizontalOptions="Start"
HorizontalTextAlignment="Start"
Text="{Binding NIC}"
VerticalOptions="CenterAndExpand"
WidthRequest="100" />
<Button
Grid.Row="4"
Grid.Column="1"
Clicked="UserSaveClick"
FontSize="6"
HeightRequest="30"
HorizontalOptions="Start"
Text="Save"
VerticalOptions="CenterAndExpand" />
</Grid>
<StackLayout Grid.Row="1">
<Label
x:Name="labelNICNumber2"
Grid.Row="3"
Grid.Column="0"
Margin="10"
FontSize="6"
HorizontalTextAlignment="Start"
Text="NIC"
VerticalOptions="CenterAndExpand" />
<ListView
x:Name="ListViewUsers"
HasUnevenRows="True"
IsEnabled="True"
IsVisible="True"
SeparatorColor="Transparent">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="4*" />
</Grid.ColumnDefinitions>
<Label
Grid.Column="1"
FontFamily="Open Sans"
FontSize="6"
HeightRequest="15"
HorizontalOptions="Start"
Text="{Binding Name}"
TextColor="Black"
VerticalOptions="Center"
WidthRequest="20" />
<Label
Grid.Column="2"
FontFamily="Open Sans"
FontSize="10"
HeightRequest="15"
HorizontalOptions="Start"
Text="{Binding Age}"
TextColor="Black"
VerticalOptions="Center"
WidthRequest="20" />
<Label
Grid.Column="3"
FontFamily="Open Sans"
FontSize="10"
HeightRequest="15"
HorizontalOptions="Start"
Text="{Binding Address}"
TextColor="Black"
VerticalOptions="Center"
WidthRequest="20" />
<Label
Grid.Column="4"
FontFamily="Open Sans"
FontSize="10"
HeightRequest="15"
HorizontalOptions="Start"
Text="{Binding NIC}"
TextColor="Black"
VerticalOptions="Center"
WidthRequest="20" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</Grid>

Binding listview ItemSource inside DataTemplate from codebehind - xamarin forms c#

I need to bind the listview with the data.
the problem is that this listview is inside a DataTemplate, and I can not call it from codebehind.
In WPF I would have drawn the object from a sender, but with Xamarin forms will not work.
I tried to use an ObservableCollection but should not be the same, someone has suggestions?
<ContentPage.Content>
<Grid x:Name="griglia">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10*"></RowDefinition>
<RowDefinition Height="80*"></RowDefinition>
<RowDefinition Height="8*"></RowDefinition>
<RowDefinition Height="12*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Padding="7" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="15*"></ColumnDefinition>
<ColumnDefinition Width="61*"></ColumnDefinition>
<ColumnDefinition Width="6*"></ColumnDefinition>
<ColumnDefinition Width="18*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Image Grid.Row="0" Grid.Column="0" x:Name="littleLogo"></Image>
<Label Grid.Row="0" Grid.Column="1" Text="Home" FontSize="Medium" VerticalTextAlignment="Center" TextColor="#fff"></Label>
<StackLayout VerticalOptions="Center" Grid.Row="0" Grid.Column="2">
<Image HeightRequest="20" Aspect="AspectFit" x:Name="littleMen"></Image>
</StackLayout>
<Label Grid.Row="0" Grid.Column="3" x:Name="logoutLabel" Text="Logout" FontSize="Medium" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" TextColor="#fff"></Label>
</Grid>
<StackLayout x:Name="stackMap" Grid.Row="1">
<!--PORZIONE CENTRALE DELLA PAGINA-->
<!--PORZIONE CENTRALE DELLA PAGINA-->
<!--PORZIONE CENTRALE DELLA PAGINA-->
<!--PORZIONE CENTRALE DELLA PAGINA-->
<!--PORZIONE CENTRALE DELLA PAGINA-->
<ActivityIndicator x:Name="loading" IsVisible="true" Color="#fff" IsRunning="true" />
<!--<ActivityIndicator Grid.Column="1" x:Name="loading" IsVisible="true" Color="#fff" IsRunning="true" />-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="13*"></RowDefinition>
<RowDefinition Height="44*"></RowDefinition>
<RowDefinition Height="0.15*"></RowDefinition>
<!-- linea bianca che divide le due porzioni di pagina, sopra foto macchina e sotto lo slide dei dati -->
<RowDefinition Height="42.85*"></RowDefinition>
</Grid.RowDefinitions>
<!-- griglia per la freccia e la scritta selezione macchina -->
<Grid Padding="7" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="15*"></ColumnDefinition>
<ColumnDefinition Width="60*"></ColumnDefinition>
<ColumnDefinition Width="25*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Image Aspect="AspectFit" x:Name="backArrow" Grid.Row="0" Grid.Column="0" Source="backArrow.png"></Image>
<Label x:Name="selezioneMacchina" Text="Selezione macchina" Grid.Row="0" VerticalTextAlignment="Center" Grid.Column="1" TextColor="#acabac" FontSize="Small"></Label>
<Image Aspect="AspectFit" x:Name="settingsImage" HeightRequest="60" Grid.Row="0" Grid.Column="2" Source="settingsTechDealer.png"></Image>
</Grid>
<!-- griglia foto macchina e descrizioni a destra -->
<Grid Padding="7" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60*"></ColumnDefinition>
<ColumnDefinition Width="40*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Image x:Name="fotoMachine" Aspect="AspectFit" Grid.Row="0" Grid.Column="0"></Image>
<Grid Padding="7" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Label x:Name="modelloSetLabel" Text="-" Grid.Row="0" VerticalTextAlignment="Center" TextColor="#acabac" FontSize="Small"></Label>
<Label x:Name="cantiereLabel" Text="Cantiere" Grid.Row="1" VerticalTextAlignment="Center" TextColor="#5d666f" FontSize="Small"></Label>
<Label x:Name="cantiereSetLabel" Text="-" Grid.Row="2" VerticalTextAlignment="Center" TextColor="#acabac" FontSize="Small"></Label>
<Label x:Name="numeroMatricolaLabel" Text="numero matricola" Grid.Row="3" VerticalTextAlignment="Center" TextColor="#5d666f" FontSize="Small"></Label>
<Label x:Name="matricolaSerialeLabel" Text="-" Grid.Row="4" VerticalTextAlignment="Center" TextColor="#acabac" FontSize="Small"></Label>
<Label x:Name="prossimaManutenzione" Text="prossima manutenzione" Grid.Row="5" VerticalTextAlignment="Center" TextColor="#5d666f" FontSize="Small"></Label>
<Label x:Name="prossimaManutenzioneDateTrue" Text="-" Grid.Row="6" VerticalTextAlignment="Center" TextColor="#acabac" FontSize="Small"></Label>
</Grid>
</Grid>
<!-- griglia fare la riga bianca -->
<Grid Padding="10" BackgroundColor="White" Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
</Grid>
<!-- slider contenuti carousel -->
<!-- da fare qui -->
<Grid Grid.Row="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<ContentView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<!-- CAROUSEL VIEW QUI -->
<control:CarouselView x:Name="carouselView">
<control:CarouselView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="46*"></RowDefinition>
<RowDefinition Height="0.2*"></RowDefinition>
<RowDefinition Height="53.8*"></RowDefinition>
</Grid.RowDefinitions>
<!-- griglia del carousel, tutta la struttura inizia qui-->
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*"></ColumnDefinition>
<ColumnDefinition Width="35*"></ColumnDefinition>
<ColumnDefinition Width="45*"></ColumnDefinition>
<ColumnDefinition Width="10*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Button Image="backBlueArrow.png" BorderColor="Transparent" BackgroundColor="Transparent" Clicked="clickmePrev" Grid.Column="0"></Button>
<!--<Image Source="backBlueArrow.png" x:Name="backClickArrow" Aspect="AspectFit" Grid.Column="0"></Image>-->
<StackLayout Margin="0,0,10,0" VerticalOptions="Center" HorizontalOptions="End" Grid.Column="1">
<Image HeightRequest="70" Source="{Binding Immagine}" Aspect="AspectFit"></Image>
</StackLayout>
<!-- griglia superiore, riprende i dati tra le barre bianche-->
<Grid Grid.Row="0" Grid.Column="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40*"></RowDefinition>
<RowDefinition Height="60*"></RowDefinition>
</Grid.RowDefinitions>
<Label Text="{Binding Descrizione}" Margin="{Binding Margine}" TextColor="#fff" FontSize="Small" VerticalTextAlignment="End" HorizontalTextAlignment="Start" Grid.Row="0"/>
<Label Text="{Binding Valore}" FontSize="Large" TextColor="#fff" VerticalTextAlignment="Start" HorizontalTextAlignment="Start" Grid.Row="1"/>
<Image Margin="-25,-5,0,0" Source="{Binding ImmagineBatteriaEmoticon}" HeightRequest="50" x:Name="emoticonBattery" Grid.Row="1" VerticalOptions="Start" HorizontalOptions="Start"></Image>
</Grid>
<Button Image="nextBlueArrow.png" BorderColor="Transparent" BackgroundColor="Transparent" Clicked="clickmeNext" Grid.Column="3"></Button>
<!--<Image Source="nextBlueArrow.png" x:Name="nextClickArrow" Aspect="AspectFit" Grid.Column="3"></Image>-->
</Grid>
<!-- griglia fare la riga bianca -->
<Grid BackgroundColor="White" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
</Grid>
<!-- griglia inferiore, ritrare i dati dei testi -->
<!-- QUESTA E' LA PARTE DEI GRAFICI A COLONNA, VIENE VISUALIZZATA SOLO NELL'ULTIMO SLIDE-->
<RelativeLayout x:Name="test" IsVisible="{Binding stackLayout}" Grid.Row="2" BackgroundColor="#CCF4CC">
<!--<Label Text="ciao" TextColor="White"></Label>-->
<ListView SeparatorVisibility="None" x:Name="listView" RowHeight="55" IsPullToRefreshEnabled="False" SeparatorColor="Black" BackgroundColor="Aqua">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout HeightRequest="55">
<Grid Padding="0" ColumnSpacing="0" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Image Grid.Row="0" Aspect="Fill" Source="backgroundListView.png"></Image>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"></ColumnDefinition>
<ColumnDefinition Width="10*"></ColumnDefinition>
<ColumnDefinition Width="30*"></ColumnDefinition>
<ColumnDefinition Width="10*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Column="0" Margin="10,0,0,0" FontSize="Medium" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" Text="gfhghgh" TextColor="#000" />
<Label Grid.Column="1" Margin="10,0,0,0" FontSize="Small" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" Text="fghghghg" TextColor="#000" />
</Grid>
</Grid>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</RelativeLayout>
<!-- QUESTA E' LA PARTE DEI DATI IN TUTTE LE ALTRE VIEW -->
<ScrollView Grid.Row="2" IsVisible="{Binding notStackLayout}">
<Grid Padding="5" Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="65*"></ColumnDefinition>
<ColumnDefinition Width="35*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Label HorizontalTextAlignment="Start" IsVisible="{Binding notStackLayout}" TextColor="#5B6667" Grid.Column="0" Grid.Row="0" Text="{Binding Testo1}"></Label>
<Label HorizontalTextAlignment="End" IsVisible="{Binding notStackLayout}" TextColor="#5B6667" Grid.Column="1" Grid.Row="0" Text="{Binding Valore1}"></Label>
<Label HorizontalTextAlignment="Start" IsVisible="{Binding notStackLayout}" TextColor="#5B6667" Grid.Column="0" Grid.Row="1" Text="{Binding Testo2}"></Label>
<Label HorizontalTextAlignment="End" IsVisible="{Binding notStackLayout}" TextColor="#5B6667" Grid.Column="1" Grid.Row="1" Text="{Binding Valore2}"></Label>
<Label HorizontalTextAlignment="Start" IsVisible="{Binding notStackLayout}" TextColor="#5B6667" Grid.Column="0" Grid.Row="2" Text="{Binding Testo3}"></Label>
<Label HorizontalTextAlignment="End" IsVisible="{Binding notStackLayout}" TextColor="#5B6667" Grid.Column="1" Grid.Row="2" Text="{Binding Valore3}"></Label>
<Label HorizontalTextAlignment="Start" IsVisible="{Binding notStackLayout}" TextColor="#5B6667" Grid.Column="0" Grid.Row="3" Text="{Binding Testo4}"></Label>
<Label HorizontalTextAlignment="End" IsVisible="{Binding notStackLayout}" TextColor="#5B6667" Grid.Column="1" Grid.Row="3" Text="{Binding Valore4}"></Label>
<Label HorizontalTextAlignment="Start" IsVisible="{Binding notStackLayout}" TextColor="#5B6667" Grid.Column="0" Grid.Row="4" Text="{Binding Testo5}"></Label>
<Label HorizontalTextAlignment="End" IsVisible="{Binding notStackLayout}" TextColor="#5B6667" Grid.Column="1" Grid.Row="4" Text="{Binding Valore5}"></Label>
<Label HorizontalTextAlignment="Start" IsVisible="{Binding notStackLayout}" TextColor="#5B6667" Grid.Column="0" Grid.Row="5" Text="{Binding Testo6}"></Label>
<Label HorizontalTextAlignment="End" IsVisible="{Binding notStackLayout}" TextColor="#5B6667" Grid.Column="1" Grid.Row="5" Text="{Binding Valore6}"></Label>
<Label HorizontalTextAlignment="Start" IsVisible="{Binding notStackLayout}" TextColor="#5B6667" Grid.Column="0" Grid.Row="6" Text="{Binding Testo7}"></Label>
<Label HorizontalTextAlignment="End" IsVisible="{Binding notStackLayout}" TextColor="#5B6667" Grid.Column="1" Grid.Row="6" Text="{Binding Valore7}"></Label>
<Label HorizontalTextAlignment="Start" IsVisible="{Binding notStackLayout}" TextColor="#5B6667" Grid.Column="0" Grid.Row="7" Text="{Binding Testo8}"></Label>
<Label HorizontalTextAlignment="End" IsVisible="{Binding notStackLayout}" TextColor="#5B6667" Grid.Column="1" Grid.Row="7" Text="{Binding Valore8}"></Label>
</Grid>
</ScrollView>
</Grid>
<!--<Label Text="{Binding Testo}" />-->
</DataTemplate>
</control:CarouselView.ItemTemplate>
</control:CarouselView>
</ContentView>
</Grid>
</Grid>
<!--FINE PORZIONE CENTRALE DELLA PAGINA-->
<!--FINE PORZIONE CENTRALE DELLA PAGINA-->
<!--FINE PORZIONE CENTRALE DELLA PAGINA-->
<!--FINE PORZIONE CENTRALE DELLA PAGINA-->
<!--FINE PORZIONE CENTRALE DELLA PAGINA-->
</StackLayout>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Image Aspect="Fill" Source="backgroundMenuDown.png"></Image>
<Button x:Name="bottoneTextDatiUltimoIntervento" BackgroundColor="Transparent" Clicked="clickDatiUltimoIntervento" BorderColor="Transparent" BorderRadius="0" BorderWidth="0" TextColor="#3a81c5" FontSize="Medium" Text="DATI ULTIMO INTERVENTO"></Button>
</Grid>
<Image Grid.Row="3" Aspect="Fill" Source="backgroundMenuDown.png"></Image>
<Grid Grid.Row="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="33*"></ColumnDefinition>
<ColumnDefinition Width="33*"></ColumnDefinition>
<ColumnDefinition Width="34*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Image Grid.Column="0" Aspect="AspectFit" x:Name="locationDown"></Image>
<Image Grid.Column="1" Aspect="AspectFit" x:Name="cantieriDown"></Image>
<Image Grid.Column="2" Aspect="AspectFit" x:Name="flottaDown"></Image>
</Grid>
</Grid>
</ContentPage.Content>
my listview:
ItemsSource="{Binding tmpPercentage}"
my object list
public class tmpPercentange
{
public string nickname { get; set; }
public double percentage { get; set; }
public int numeroInterventi { get; set; }
}

To bind to a source it would look something like the following:
Model
public class TmpPercentange
{
public string NickName { get; set; }
public double Percentage { get; set; }
public int NumeroInterventi { get; set; }
}
ViewModel
public class MyPageViewModel
{
/*
* This does not have to be Observable. Any IEnumerable will work just fine.
* We make this Observable so that any changes to the Collection will update
* our View. It's also worth noting that any changes to a single item in our
* Collection would not update in our View as our Model does not implement
* `INotifyPropertyChanged`.
*/
public ObservableCollection Percentanges { get; set; }
}
View
<ListView ItemsSource="{Binding Percentanges}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<Label Text="{Binding NickName}" />
<Label Text="{Binding Percentage}" />
<Label Text="{Binding NumeroInterventi}" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

How to add rating bar in xamarin forms

here Im getting list of data to which Im assigning it to a listview... In that i need to display user ratings to every Item.. So when the user rating is $.. I need to display 4stars in greeen color and another 1 star in gray color.. Im unable to do this.. Can anyone please tell me
<ListView ItemSource="{Binding Data}">
<ListView.ItemTemplate>
<DataTemplate>
<Frame BackgroundColor="White" Padding="5" >
<Grid Padding="3" BackgroundColor="White" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ffimageloading:CachedImage HeightRequest="100" Aspect="AspectFill"
LoadingPlaceholder="image_loading.png" ErrorPlaceholder="image_error.png"
Source="{Binding Images}" Grid.Row="0" Grid.Column="0"/>
<!--<StackLayout Grid.Row="1" Grid.Column="0" Orientation="Vertical">
<Label x:Name="Label"
Text="{Binding FileName}" />
<Label Text="uhfuiehuegirtj"/>
<Label Text="ufoidjgoidrjiojkgorij"/>
</StackLayout>-->
<Grid Grid.Row="1" Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="{Binding CourseName}" FontAttributes="Bold" TextColor="Black" Grid.Row="0" Grid.Column="0" LineBreakMode="WordWrap"/>
<Label Text="{Binding CourseDescription}" TextColor="Black" Grid.Row="1" Grid.Column="0" LineBreakMode="WordWrap"/>
<StackLayout Grid.Row="2" Grid.Column="0" Orientation="Horizontal">
<Image Source="graystar.png" HeightRequest="20" WidthRequest="20" x:Name="Img1"/>
<Image Source="graystar.png" HeightRequest="20" WidthRequest="20" x:Name="Img2"/>
<Image Source="graystar.png" HeightRequest="20" WidthRequest="20" x:Name="Img3"/>
<Image Source="graystar.png" HeightRequest="20" WidthRequest="20" x:Name="Img4"/>
<Image Source="graystar.png" HeightRequest="20" WidthRequest="20" x:Name="Img5"/>
</StackLayout>
<StackLayout Grid.Row="3" Grid.Column="0" Orientation="Horizontal">
<Label Text="{Binding CoursePrice}" TextColor="Black" HorizontalTextAlignment="Start" FontAttributes="Bold" VerticalTextAlignment="Center"/>
<Button Image="wishlist.png" HorizontalOptions="Fill" BackgroundColor="Transparent" Clicked="btn_clicked"/>
</StackLayout>
</Grid>
</Grid>
</Frame>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

There are plenty of samples and controls out there. You don't really need to do it yourself. Syncfusion offers some nice controls for Xamarin. There is a free Community License too.
I think that's what you want -> https://www.syncfusion.com/products/xamarin

Categories