I have this Task which bring data from firebase :
public async Task<List<Player>> GetPlayersData()
{
var playersData = (await client.Child("Players")
.OnceAsync<Player>())
.Select(f => new Player
{
PlayerName = f.Object.PlayerName,
PlayerTime = f.Object.PlayerTime,
PlayerRank = f.Object.PlayerRank
}).ToList();
return playersData;
}
it worked perfectly , but i want to get the (playersData) to put it as "ItemSource" in "Listview" in XAML, so i call the task in the page constructor :
public RankTable()
{
InitializeComponent();
BindingContext = this;
client = new FirebaseClient("https://numbergame-*****firebaseio.com/");
GetPlayersData();
}
Now it will run the task and brings the players data but I don't know how to control it and put it as ItemSource in the Following XAML code :
<StackLayout>
<CollectionView Grid.ColumnSpan="2" Grid.RowSpan="2" SelectionMode="None" ItemsSource="{Binding ??}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Frame HasShadow="True" BackgroundColor="Beige" CornerRadius="15"
IsClippedToBounds="True" Visual="Material" InputTransparent="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label Text="{Binding PlayerRank}" FontSize="15" Grid.Column="1"/>
<Label Text="{Binding PlayerName}" FontSize="15" Grid.Column="2"/>
<Label Text="{Binding PlayerTime}" FontSize="15" Grid.Column="3"/>
</Grid>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
any help please and sorry for my bad english..
<CollectionView x:Name="Players" ... /
// GetPlayersData is async so you can't call it from the constructor
protected override void OnAppearing()
{
Players.ItemsSource = await GetPlayersData();
}
Related
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?
I'm following the exelent tutorial (Link) on Multilingual in Xamarin.Forms
Everything is working well but I have one issue.
In my application I'm using Navigation drawer by Syncfusion as I'm generating the menu Items in a ListView as seen below.
DrawerPage.xaml
<ListView x:Name="listView"
SelectionMode="Single"
RowHeight="70"
ItemSelected="listView_ItemSelected"
SeparatorColor="Transparent">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Margin="32,10,0,0"
VerticalOptions="Center" >
<Grid RowDefinitions="1*, Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0"
Grid.Column="0"
HorizontalTextAlignment="Start"
HorizontalOptions="Start"
FontSize="25"
FontFamily="Material-Outlined"
Style="{StaticResource IconLabelStyle}"
Text="{Binding Icon}" />
<Label Grid.Row="0"
Grid.Column="1"
HorizontalTextAlignment="Start"
HorizontalOptions="Start"
Margin="10,0,0,0"
Text="{Binding Name}"
FontSize="16"/>
</Grid>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
DrawerPage.cs
private static string MAP = Lang.ResourceManager.GetString("Map");
private static string MAPICON = IconFont.ResourceManager.GetString("LocationOn");
private static string SETTINGS = Lang.ResourceManager.GetString("Settings");
private static string SETTINGSICON = IconFont.ResourceManager.GetString("Settings");
public partial class DrawerPage : ContentPage {
drawerNavItems();
}
private void drawerNavItems()
{
List<MenuItem> itemList = new List<MenuItem>();
itemList.Add(new MenuItem { Icon = MAPICON, Name = MAP });
itemList.Add(new MenuItem { Icon = SETTINGSICON, Name = SETTINGS });
listView.ItemsSource = itemList;
}
The issue I'm having is that I don't understand how I'm supposed to use the helper class in the tutorial link above to translate the drawer menu items.
In Xaml we can just translate the strings like this
Text="{helpers:Translate Support}"
But how do I do the same in the code Behind ?
I can't believe I have spent a day trying to get this to work! I began developing in Xamarin.Forms last month and for the most part things have been going pretty smooth. My background is ASP.Net MVC and Windows Forms so the MVVM concept is new to me.
The issue that I am having is very frustrating and seems silly really. I imagine it could be my implementation possibly because I am not using MVVM but am performing all binding in the code behind? I have a page that has a search box and a ListView controll. Each of the items in the ListView is fairly simple... it only consists of a few labels and a switch. The ListView is bound every time someone performs a search. The problem that I am having is that every time someone performs a search it refreshes the Model everyting is bound to... this in turn triggers the Switches Toggle Event. Within the Toggle Event I have code that would update the database when the value is changed so I do not want this fired off every time the model changes. It is very frustrating as there does not appear to be a Click Event. See Xaml and the Method I am using below:
public async void SearchItems()
{
PageLoaded = false;
if(string.IsNullOrEmpty(this.txtSearch.Text)) { return; }
this.LoadSearch.IsRunning = true;
// Populate Locations For Item
string ItemType = HttpUtility.UrlEncode(this.SelectItemType.SelectedItem.ToString());
string Search = HttpUtility.UrlEncode(this.txtSearch.Text.ToLower());
string url = string.Format("https://test.com/api/LocationsSearch?itemType={0}&search={1}", ItemType, Search);
LocationsList = new List<Locations>();
var json = await func.GetIBApi(url);
LocationsList = Newtonsoft.Json.JsonConvert.DeserializeObject<List<Locations>>(json);
this.ItemsList.ItemsSource = LocationsList;
this.LoadSearch.IsRunning = false;
PageLoaded = true;
}
Toggle Event:
private async void Switch_Toggled(object sender, ToggledEventArgs e)
{
try
{
if (PageLoaded)
{
bool isPrimary = e.Value;
ViewCell cell = (sender as Switch).Parent.Parent.Parent as ViewCell;
var location = cell.BindingContext as Locations;
string display = "";
if (isPrimary)
{
display = "Are you sure you want to make this the 'Primary Location'?";
}
else
{
display = "Are you sure you want to unset this as the 'Primary Location'? Note: Make sure you set another location as the 'Primary' on this PartNumber!";
}
var result = await App.Current.MainPage.DisplayAlert("Primary Change Confirmation", display, "Yes", "No");
if (result)
{
string url = string.Format("https://test.com/api/LocationsSearch?partNumber={0}&location={1}&isPrimary={2}", location.ID, location.Location, isPrimary);
var json = await func.PostIBApi(url);
await Navigation.PopModalAsync();
}
}
}
catch (Exception e2)
{
}
}
XAML:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="IBMobile.Views.LocationsPage"
xmlns:local2="clr-namespace:FontAwesome"
Visual="Material">
<ContentPage.IconImageSource>
<FontImageSource FontFamily="{StaticResource FontAwesomeSolid}" Glyph="{x:Static local2:IconFont.MapMarkerAlt}" />
</ContentPage.IconImageSource>
<ContentPage.Content>
<StackLayout Padding="25">
<Picker x:Name="SelectItemType" SelectedIndexChanged="SelectItemType_SelectedIndexChanged" />
<SearchBar x:Name="txtSearch" SearchButtonPressed="TxtSearch_SearchButtonPressed" Placeholder="Search..." FontSize="Title"></SearchBar>
<ActivityIndicator Color="#007D5D" IsRunning="false" x:Name="LoadSearch" HorizontalOptions="Center" />
<ListView x:Name="ItemsList" ItemTapped="ItemsList_ItemTapped" HasUnevenRows="True" BackgroundColor="White">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout VerticalOptions="FillAndExpand">
<Grid VerticalOptions="FillAndExpand" Padding="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"></ColumnDefinition>
<ColumnDefinition Width="3*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Label TextColor="#007D5D" Text="{Binding ViewID}" FontSize="Title" VerticalTextAlignment="Center" Grid.Column="0" Grid.Row="0"></Label>
<Label TextColor="#007D5D" Text="{Binding Location}" FontSize="Title" VerticalTextAlignment="Center" Grid.Column="1" Grid.Row="0"></Label>
<Label Text="Primary" Grid.Column="2" Grid.Row="0"></Label>
<Switch IsToggled="{Binding IsPrimary}" x:Name="Toggle1" ThumbColor="#007D5D" Grid.Column="2" Grid.Row="1" Toggled="Switch_Toggled"/>
<Label Text="{Binding Description}" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2"></Label>
<Label Text="{Binding Message}" Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="3" FontSize="Small" TextColor="Red"></Label>
</Grid>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
if (PageLoaded)
{
//entered handler
bool isPrimary = e.Value; //we are invoking the handler again from inside itsself
// all the mess comes from this
Use another lock:
if (PageLoaded && !_internal)
{
//entered handler
_internal=true;
bool isPrimary = e.Value;
_internal=false;
Im unable to set the selectedItem in a listview control. Ive set the binding context and can debug the code without issue. Onload of the form I can see the get and set method being called but when I select an item in the listview the set is not called. I cannot understand why
private NavigationItems _SelectedNavigationItem;
public NavigationItems SelectedNavigationItem
{
get { return _SelectedNavigationItem; }
set
{
if (value != null)
{
_SelectedNavigationItem = value;
NavigateToPage(value);
}
}
}
public async void NavigateToPage(NavigationItems selectedItem )
{
switch (selectedItem.Id)
{
case "Appointments":
await Navigation.PushAsync(new MyAppointments());
break;
case "Companies":
await Navigation.PushAsync(new Companies());
break;
case "Messages":
await Navigation.PushAsync(new Messages());
break;
default:
break;
}
}
View
<!-- Navigation -->
<ListView Grid.ColumnSpan="2" Margin="20,30,20,10" Grid.Row="1"
ItemsSource="{Binding NavigationCollection}"
SelectedItem="{Binding SelectedNavigationItem}"
HasUnevenRows="false"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell >
<Grid Padding="5,5,5,5" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<!--Icon-->
<Image Aspect="AspectFit" Grid.Column="0" HeightRequest="18" WidthRequest="18" Source="{Binding Icon}"/>
<!--Navigation Name-->
<Label Margin="10,0,30,0" Grid.Column="1" Grid.ColumnSpan="2" Style="{StaticResource SecondaryLabelStyle}" Text="{Binding Name}" FontSize="Medium"/>
<!--Navigation Totals-->
<Frame VerticalOptions="Center" Grid.Column="3" Style="{StaticResource CircleFrameStyle}">
<Label TextColor="#d2d2d2" HorizontalTextAlignment="Center" VerticalOptions="Center" Text="{Binding Total}" FontSize="Small">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ForgotPassword}" />
</Label.GestureRecognizers>
</Label>
</Frame>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Everything appears to be in order but something strange is happening. Ive also tried setting mode=TwoWay explicitly in the xaml but I know listview mode is twoway by default.
Kevin
I think doing your setter code this way will solve your problems
private NavigationItems _SelectedNavigationItem;
public NavigationItems SelectedNavigationItem
{
get { return _SelectedNavigationItem; }
set
{
if (_SelectedNavigationItem != value)
{
_SelectedNavigationItem = value;
NavigateToPage(value);
}
}
}
I am currently working on a Xamarin CrossPlatform project and have implemented a Listview bound to an ObservableCollection. Everything works out fine until I remove an Item from the ListView. The images in the follow up items within the ListView disappear randomly - not all of them and a different amount of them every time. I guess it has something to do with the MemoryStream, but what do I have to change? Here´s the relevant part of my Model that is bound to the ListView:
public string ImageBase64
{
get
{
return imagebase64;
}
set
{
if (imagebase64 != value)
{
imagebase64 = value;
OnPropertyChanged(nameof(ImageBase64));
OnPropertyChanged(nameof(ImageSource));
}
}
}
public ImageSource ImageSource
{
get
{
if (!string.IsNullOrEmpty(imagebase64))
{
return ImageSource.FromStream(() => new MemoryStream(Convert.FromBase64String(imagebase64)));
}
else
{
return null;
}
}
}
Here´s the relevant XAML:
<ListView x:Name="listView" Margin="20" ItemsSource="{Binding}" ItemSelected="OnListItemSelected" HasUnevenRows="True" SeparatorColor="{StaticResource primaryGreen}" SeparatorVisibility="Default">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Margin="0,5,0,5">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="65" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="45" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Grid.RowSpan="3" Margin="-2,-2,-2,-2" Source="{Binding ImageSource}" HorizontalOptions="Start" VerticalOptions="Center" Aspect="AspectFill"/> <!-- This is the displayed Image -->
<Label Margin="10,0,0,0" Grid.Column="1" Grid.Row="0" FontAttributes="Bold" FontSize="18" TextColor="{StaticResource primaryGreen}" Text="{Binding VorNachname}" VerticalTextAlignment="Start" HorizontalTextAlignment="Start"/>
<Label Margin="10,0,0,0" Grid.Column="1" Grid.Row="1" Text="{Binding MediumSelected.Wert, StringFormat='via {0}'}" HorizontalOptions="FillAndExpand" VerticalTextAlignment="Start" HorizontalTextAlignment="Start"/>
<StackLayout Margin="10,0,0,0" Grid.Column="1" Grid.Row="2" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label Text="{Binding Alter,StringFormat='Alter: {0}'}" VerticalTextAlignment="Start" HorizontalTextAlignment="Start" HorizontalOptions="Start"/>
</StackLayout>
<StackLayout Margin="0,0,0,-5" Grid.Column="2" Grid.RowSpan="3" Orientation="Vertical" HorizontalOptions="End" VerticalOptions="End">
<Button WidthRequest="40" HeightRequest="40" BackgroundColor="White" BorderWidth="0" BorderColor="White" Image="socialmedia_18.png" Clicked="OnChangeClicked" CommandParameter ="{Binding}" VerticalOptions="EndAndExpand" />
<Button Margin="0,-15,0,0" WidthRequest="40" HeightRequest="40" BackgroundColor="White" BorderColor="White" Image="cancel_18.png" Clicked="OnDeleteClicked" CommandParameter ="{Binding}" VerticalOptions="End" />
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
...and the Code behind:
async void OnDeleteClicked(object sender, EventArgs e)
{
Helper.TrackEvent("PeopleList_OnDeleteClicked");
//Get selected Person
Person person = (Person)((Button)sender).CommandParameter;
//Remove from Model
DBHelper.DBModel.People.Remove(person);
//Update database
App.Database.UpdateWithChildren(DBHelper.DBModel);
}
EDIT:
Resizing the images does not help, same problem. I tried it by binding a testvariable ImageSourceThumb to the ListViewItemImage:
public ImageSource ImageSourceThumb
{
get
{
if (!string.IsNullOrEmpty(imagebase64))
{
return ImageSource.FromStream(() => new MemoryStream(ImageResizer.ResizeImage(Convert.FromBase64String(imagebase64), 64, 64)));
}
else
{
return null;
}
}
}
I had a similar problem. When I loaded or updated my listview not all the images showed up.
I fixed my problem resizing the images. Huge images gived me a outofmemory exception. Resizing those images to a smaller resolution fixed these problems.