We Keep Coding

Xamarin - ListView showing all property values but one

I have a Content Page in which I want to show an invoice, for that I have two listviews.
The first one contains the name of the customer, the date and the total cost.
The thing is to get the total cost I have used Shell navigation with parameters and it works fine just not in the listview.
So here is my ViewModel
[QueryProperty(nameof(Total), "total")]
public class InvoiceViewModel : BindableObject
{
string _total;
public string Total
{
get => _total;
set
{
_total = Uri.UnescapeDataString(value ?? string.Empty);
OnPropertyChanged();
}
}
public InvoiceViewModel()
{
_oListOrders = new ObservableCollection<CrOrder>();
GetListCart();
}
private ApiService _apiService = new ApiService();
public List<Invoice> _oListCart = new List<Invoice>();
public ObservableCollection<CrOrder> _oListOrders;
public List<Invoice> ListCart
{
get => _oListCart;
set
{
_oListCart = value;
OnPropertyChanged();
}
}
private async void GetListCart()
{
// call database here
var customerId = Convert.ToInt32(CurrentPropertiesService.GetCustomer());
var customer = await _apiService.GetCustomerById(customerId, CurrentPropertiesService.GetToken());
_oListCart.Add(new Invoice
{
Name = customer.Data.Name,
Date = DateTime.UtcNow,
Total = Convert.ToDecimal(_total),
ListOrders = await GetListOrders()
});
}
private async Task<ObservableCollection<CrOrder>> GetListOrders()
{
// call database here
var cartId = Convert.ToInt32(CurrentPropertiesService.GetCart());
var orders = await _apiService.GetOrdersByCart(cartId, CurrentPropertiesService.GetToken());
ObservableCollection<CrOrder> collection = new ObservableCollection<CrOrder>(orders.Data);
return collection;
}
}
Here is what I have in my View
<ContentPage.Content>
<StackLayout BackgroundColor="#A7A7A7">
<Label Text="{Binding Total}" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"></Label>
<ListView x:Name="ListViewCart" ItemsSource="{Binding ListCart}" HasUnevenRows="True" IsPullToRefreshEnabled="False" >
<ListView.ItemTemplate>
<DataTemplate x:DataType="model:Invoice">
<ViewCell>
<Frame HasShadow="True" Margin="2" BorderColor="Gray">
<Grid Margin="0" HorizontalOptions="FillAndExpand" VerticalOptions="Center" HeightRequest="150" 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"/>
<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, 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">
<ListView x:Name="ListViewOrders" ItemsSource="{Binding ListOrders}" HasUnevenRows="True" IsPullToRefreshEnabled="False" >
<ListView.ItemTemplate>
<DataTemplate x:DataType="model:CrOrder">
<ViewCell IsEnabled="False">
<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>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>...
And on my ContentPage I don't have anything
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class InvoicePage : ContentPage
{
public InvoicePage()
{
InitializeComponent();
//BindingContext = new InvoiceViewModel();
}
}
So on my View I have put a label to check what I thought was happening. So the label shows right the total but when I use the ListView binging it doesn't work I don't know why it is null there.
As you can see the label works fine but where it sais "Monto Total" it shows nothing. Please help I don't know what is going on. Thanks.
EDIT
I tried naming the Total property different and then when I add my Invoice entity to my list I do this
Total = Convert.ToDecimal(TotalCart),
But it isn't working eitherway. I don't know why the first time it returns the value fine but the second it doesn't.
After debbuging I have realized when getting the total property that the first time when GetListCart is being called the value is null and the second time, when the label text is set it returns the correct value. Why is this happening?

How to bind images to a list where the grid that is nesting the images has a different bindingcontext?

I am currently working with a list that i bind through my viewmodel and then a service.
In the list i bind an image and a label. I can successfully get the label binded, but the image does not show. The reason for this seems to be because i change the bindingcontext in the grid where the image is nested inside. I change the bindingcontext in order to get an accurate width for the image.
If i move the image outside the grid, then it shows, so now i am trying to get the bindingcontext in order again.
What i tried to do with the image was to add a new bindingcontext
BindingContext="{x:Reference Name=gridFollowers}" Source="{Binding image}"
where gridFollowers is what i name my stacklayout where the original binding is made, but unfortunately the image still does not show.
here is the full code:
<StackLayout x:Name="gridFollowers"
BindableLayout.ItemsSource="{Binding headerService.CurrentHeader}">
<BindableLayout.ItemTemplate >
<DataTemplate>
<Grid WidthRequest="75">
<Grid.RowDefinitions>
<RowDefinition Height="8*" />
<RowDefinition Height="2*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="7.5*" />
</Grid.ColumnDefinitions>
<Grid
Grid.Row="0"
Grid.Column="0"
BindingContext="{x:Reference Name=headerImage}"
WidthRequest="{Binding Height}">
<ffimageloading:CachedImage
x:Name="headerImage" BindingContext="{x:Reference Name=gridFollowers}"
Source="{Binding image}" />
</Grid>
<Label Grid.Row="1" Grid.Column="0"
Text="{Binding firstname}" />
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
How can i make it so the image shows?

I try your code and modify some code as following, please replace your code.
<Grid
Grid.Row="0"
Grid.Column="0"
WidthRequest="{Binding Height, Source={x:Reference headerImage}}">
<ffimageloading:CachedImage x:Name="headerImage" Source="{Binding image}" />
</Grid>
Update:
please check headerService.CurrentHeader data.
Please check if binding viewmodel to page.cs bindingcontext by code behind.
<Grid.RowDefinitions>
<RowDefinition Height="8*" />
<RowDefinition Height="2*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="7.5*" />
</Grid.ColumnDefinitions>
<Grid
Grid.Row="0"
Grid.Column="0"
WidthRequest="{Binding Height, Source={x:Reference headerImage}}">
<ffimageloading:CachedImage x:Name="headerImage" Source="{Binding image}" />
</Grid>
<Label
Grid.Row="1"
Grid.Column="0"
Text="{Binding firstname}" />
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
public partial class Page8 : ContentPage
{
public ObservableCollection<imagemodel> models { get; set; }
public Page8 ()
{
InitializeComponent ();
models = new ObservableCollection<imagemodel>()
{
new imagemodel(){firstname="first image", image="a1.jpg"},
new imagemodel(){firstname="second image",image="a2.jpg"}
};
this.BindingContext = this;
}
}
public class imagemodel
{
public string firstname { get; set; }
public string image { get; set; }
}

Cannot bind grid to viewmodel - no data appears in the grid

Please see the XAML below:
<?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:local="clr-namespace:App1"
x:Class="App1.MainPage">
<ContentPage.BindingContext>
<local:PersonViewModel />
</ContentPage.BindingContext>
<StackLayout>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Label Grid.Column="1" Text="First Name" />
<Label Grid.Column="2" Text="Surname" />
<Label Grid.Column="3" Text="Date Of Birth" />
</Grid>
<ListView x:Name="listView" ItemsSource="{Binding people}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Label Grid.Column="1" Text="{Binding FirstName}" />
<Label Grid.Column="2" Text="{Binding Surname}" />
<Label Grid.Column="3" Text="{Binding Age}" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
and the View Model:
public class PersonViewModel
{
public ObservableCollection<Person> people = new ObservableCollection<Person>();
public PersonViewModel()
{
people.Add(new Person { Age = 36, FirstName = "Andrew", Surname = "Smith" });
people.Add(new Person { Age = 65, FirstName = "David", Surname = "White" });
people.Add(new Person { Age = 39, FirstName = "Bert", Surname = "Edwards" });
}
}
Only the column headings display. Why does the data not display?
I have spent all afternoon trying to get this to work. I have read lots of different answers, however I still cannot get any data to display.

You are missing the Grid Column Definitions (if it is the same as the header, so your xaml should look like this:
<StackLayout>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="* />
<ColumnDefinition Width="* />
<ColumnDefinition Width="* />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Label Grid.Column="1" Text="First Name" />
<Label Grid.Column="2" Text="Surname" />
<Label Grid.Column="3" Text="Date Of Birth" />
</Grid>
<ListView x:Name="listView" ItemsSource="{Binding people}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="* />
<ColumnDefinition Width="* />
<ColumnDefinition Width="* />
</Grid.ColumnDefinitions>
<Label Grid.Column="1" Text="{Binding FirstName}" />
<Label Grid.Column="2" Text="{Binding Surname}" />
<Label Grid.Column="3" Text="{Binding Age}" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>

How to add columns to listview in windows phone 8.1,c#?

Hi I am struggling to add columns to listview in windows phone 8.1. I want 2 columns:
Column 1 = Item
Column 2 = Quantity
I have managed to add an item to a listview but the second item goes to the next row. I want both of the items to be displayed on the same row, so the second item should be displayed in a second column.
Here is my code
protected override void OnNavigatedTo(NavigationEventArgs e)
{
var listViewItem = (new ListViewItem { Content ="Vanilla"});
var listViewItem2 = (new ListViewItem {Content ="1"});
listView.Items.Add(listViewItem);
listView.Items.Add(listViewItem2);
}

<ListView x:Name="itemListView"
Margin="120,0,0,60"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
SelectionChanged="ItemListView_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="110" Margin="6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="110" Height="110">
<Image Source="{Binding Image}" Stretch="UniformToFill"/>
</Border>
<StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
<TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextStyle}" MaxHeight="60"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

In my opinion you should create an object that contains two properties:
public class ListViewItem
{
public int Index { get; set; }
public string Name { get; set; }
}
Then assign a object(s) you want to your ListView:
protected override void OnNavigatedTo(NavigationEventArgs e)
{
var listViewItem = new ListViewItem { Name= "Vanilla", Index = 1 };
listView.Items.Add(listViewItem);
}
Then you can simply create a ItemTemplate for your ListView:
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Index}"/>
<TextBlock Grid.Column="1" Text="{Binding Name}"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
I wrote this on the fly, so there might be some syntax errors :P

How to add ListView with datatemplate to Button Flyout in windows store app 8.1 c#

I have a requirement like when I click on Button Flyout should come with the list of dynamic data and specified template. Below is the code in Xaml. But the Flyout is not Loading with any data.
<Button Content="Folders" >
<FlyoutBase.AttachedFlyout>
<Flyout >
<ListView x:Name="lstEmailFolder" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<Image Source="/Images/Favorite_icon.png" Height="30" Width="30" Grid.Column="1" />
<TextBlock Text="{StaticResource Foldername}" Width="30" Height="30" Foreground="White" FontSize="20"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Flyout>
</FlyoutBase.AttachedFlyout>
</Button>

You havent bind Itemsource property to Listview and instead of Text="{StaticResource Foldername}" use Text="{Binding Foldername}"
xaml
<Button Content="Display Flyout">
<Button.Flyout>
<Flyout>
<ListView x:Name="lstEmailFolder" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Foldername}" Width="30" Height="30" Foreground="White" FontSize="20"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Flyout>
</Button.Flyout>
</Button>
c#
this.InitializeComponent();
List<FlyoutData> data = new List<FlyoutData>();
data.Add(new FlyoutData("Folder1"));
data.Add(new FlyoutData("Folder2"));
lstEmailFolder.ItemsSource = data;
public class FlyoutData
{
public string Foldername { get; set; }
public FlyoutData(string Foldername)
{
this.Foldername = Foldername;
}
}