Develop Reference

C# Xamarin Forms Populating CollectionView from ViewModel is always null

I am trying to populate a collection view from a ViewModel, however when I try to bind the data to the collection view, the ViewModel is null.
xaml.cs file
ObservableCollection<ReportsClass> newKidList = new ObservableCollection<ReportsClass>();
public ReportsViewModel viewmodel { get; set; }
public ReportsPage()
{
InitializeComponent();
viewmodel = new ReportsViewModel();
this.BindingContext = viewmodel;
PreviousDateRange.CornerRadius = 20;
NextDateRange.CornerRadius = 20;
DateTime firstDate = currentDate.StartOfWeek(DayOfWeek.Sunday);
DateTime secondDate = currentDate.AddDays(7).StartOfWeek(DayOfWeek.Saturday);
DateRange.Text = firstDate.ToString("MMMM d") + " - " + secondDate.ToString("MMMM d");
Kids.SetBinding(ItemsView.ItemsSourceProperty, nameof(viewmodel.kids));
}
Here is my view model
public class ReportsViewModel
{
public ObservableCollection<ReportsClass> kids { get; set; }
FirebaseStorageHelper firebaseStorageHelper = new FirebaseStorageHelper();
WebServiceClass webServiceClass = new WebServiceClass();
DateTime currentDate = DateTime.Now;
public ReportsViewModel()
{
GetKids();
}
public async void GetKids()
{
var parentId = await SecureStorage.GetAsync("parentid");
kids = await webServiceClass.Reports(Convert.ToInt32(parentId), currentDate.StartOfWeek(DayOfWeek.Sunday), currentDate.AddDays(7).StartOfWeek(DayOfWeek.Saturday));
}
}
And here is the method that gets the data for the view model
public async Task<ObservableCollection<ReportsClass>> Reports(int parentid, DateTime startDate, DateTime endDate)
{
var content = new FormUrlEncodedContent(new[]
{
new KeyValuePair<string, string>("parentid", parentid.ToString()),
new KeyValuePair<string, string>("startDate", startDate.ToString("yyyy-MM-dd H:mm:ss")),
new KeyValuePair<string, string>("endDate", endDate.ToString("yyyy-MM-dd"))
});
var response = await client.PostAsync(string.Format("https://example.com/api/index.php?action=reports"), content);
var responseString = await response.Content.ReadAsStringAsync();
ObservableCollection<ReportsClass> items = JsonConvert.DeserializeObject<ObservableCollection<ReportsClass>>(responseString);
return items;
}
What am I doing wrong? The purpose of me doing it this way is so I can update an item in the collectionview
Here is my ReportsClass
public class ReportsClass
{
public ReportsClass(string firstName)
{
first_name = firstName;
}
public string first_name { get; set; }
}

OPTION A:
Fix the syntax of Kids.SetBinding, to not get null. Refer to the CLASS ReportsViewModel, not to the INSTANCE viewmodel:
Kids.SetBinding(ItemsView.ItemsSourceProperty, nameof(ReportsViewModel.kids));
The kids still won't appear in list. To fix, kids needs OnPropertyChanged:
public ObservableCollection<ItemModel> kids {
get => _kids;
set {
_kids = value;
OnPropertyChanged();
}
}
private ObservableCollection<ItemModel> _kids;
See the other code in Option B. Adapt as desired.
When you need XAML to see a DYNAMIC change, you need OnPropertyChanged. This is an implementation of INotifyPropertyChanged. Add this call to properties (that XAML binds to) of ReportsClass:
// Inheriting from `BindableObject` is one way to obtain OnPropertyChanged method.
public class ReportsClass : Xamarin.Forms.BindableObject
{
public ReportsClass(string firstName)
{
first_name = firstName;
}
public string first_name {
get => _first_name;
set {
_first_name = value;
// This tells XAML there was a change.
// Makes "{Binding first_name}" work dynamically.
OnPropertyChanged();
}
}
private string _first_name;
}
OPTION B:
Didn't find an answer anywhere that does everything correctly, so here is a complete sample, for future reference:
Remove Kids.SetBinding(...). (It can be fixed as shown in OPTION A, but its easier to get it correct in XAML, so below I show it in XAML.)
Bindings from Page to VM. See xaml below.
Create ObservableCollection with setter that does OnPropertyChanged. This informs XAML when the list is ready, so page updates. (This is an implementation of INotifyPropertyChanged, as Jason mentioned.)
Use Device.BeginInvokeOnMainThread(async () to create an async context, that is queued to run after constructor returns. (This fixes the issue Jason mentioned, which is that a constructor isn't an async context, so should not DIRECTLY call an async method such as QueryItemsAsync, or your GetKids.) This is more reliable.
PageWithQueryData.xaml:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TestXFUWP.PageWithQueryData">
<ContentPage.Content>
<StackLayout>
<CollectionView ItemsSource="{Binding Items}">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Label Text="{Binding Name}" />
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
<CollectionView.EmptyView>
<Grid>
<Label Text="Loading ..." FontSize="24" TextColor="Blue" BackgroundColor="LightBlue" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
</Grid>
</CollectionView.EmptyView>
</CollectionView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
PageWithQueryData.xaml.cs:
public partial class PageWithQueryData : ContentPage
{
public PageWithQueryData()
{
InitializeComponent();
// ... other initialization work here ...
// BUT remove `Kids.Binding(...);` line. See XAML: `ItemsSource="{Binding Items}"`.
BindingContext = new VMWithQueryData();
}
}
VMWithQueryData.cs:
class VMWithQueryData : Xamarin.Forms.BindableObject
{
public VMWithQueryData()
{
// Start an async task to query.
Xamarin.Forms.Device.BeginInvokeOnMainThread(async () => {
await QueryItemsAsync();
});
// Alternative implementation: Start a background task to query.
//QueryItemsInBackground();
}
public ObservableCollection<ItemModel> Items {
get => _items;
set {
_items = value;
OnPropertyChanged();
}
}
private ObservableCollection<ItemModel> _items;
private async Task QueryItemsAsync()
{
var names = new List<string> { "One", "Two", "Three" };
bool queryOneAtATime = false;// true;
if (queryOneAtATime) {
// Show each item as it is available.
Items = new ObservableCollection<ItemModel>();
foreach (var name in names) {
// Simulate slow query - replace with query that returns one item.
await Task.Delay(1000);
Items.Add(new ItemModel(name));
}
} else {
// Load all the items, then show them.
// Simulate slow query - replace with query that returns all data.
await Task.Delay(3000);
var items = new ObservableCollection<ItemModel>();
foreach (var name in names) {
items.Add(new ItemModel(name));
}
Items = items;
}
}
// Alternative implementation, using a background thread.
private void QueryItemsInBackground()
{
Task.Run(() => {
var names = new List<string> { "One", "Two", "Three" };
bool queryOneAtATime = false;// true;
if (queryOneAtATime) {
// Show each item as it is available.
Items = new ObservableCollection<ItemModel>();
foreach (var name in names) {
// Simulate slow query - replace with query that returns one item.
System.Threading.Thread.Sleep(1000);
Items.Add(new ItemModel(name));
}
} else {
// Load all the items, then show them.
// Simulate slow query - replace with query that returns all data.
System.Threading.Thread.Sleep(3000);
var items = new ObservableCollection<ItemModel>();
foreach (var name in names) {
items.Add(new ItemModel(name));
}
Items = items;
}
});
}
}
ItemModel.cs:
public class ItemModel
{
public ItemModel(string name)
{
Name = name;
}
public string Name { get; set; }
}
This also demonstrates <CollectionView.EmptyView> to display a message to user, while the data is being queried.
For completeness, I've included an alternative QueryItemsInBackground, that uses a background thread instead of an async method. Either approach works well.
Notice inheritance from Xamarin.Forms.BindableObject. This is one way to get an implementation of INotifyPropertyChanged. You can use any other MVVM library or technique.

Move this line of code to the end of your constructor
this.BindingContext = viewmodel;

How to binding XDocument element to combobox in MVVM?

I have a XDocument read from xml file:
public ObservableCollection<Product> GetProducts()
{
ObservableCollection<Product> _products = new ObservableCollection<Product>();
XDocument doc = XDocument.Load(#".\Config\MCU.xml");
foreach (XElement productRow in doc.Root.Elements("MCU"))
{
var m = new Product(productRow.Element("MCUName").Value, Convert.ToUInt32(productRow.Element("MCUNumber").Value), Convert.ToUInt32(productRow.Element("FlashAddress").Value),
Convert.ToUInt32(productRow.Element("PageCount").Value), Convert.ToUInt32(productRow.Element("PageSize").Value), productRow.Element("BinFile").Value,
Convert.ToUInt32(productRow.Element("RAMCodeAdd").Value), Convert.ToUInt32(productRow.Element("MainCR").Value), Convert.ToUInt32(productRow.Element("CRTrimmingAdd").Value),
Convert.ToUInt32(productRow.Element("CRTrimmingLength").Value), Convert.ToUInt32(productRow.Element("UIDAdd").Value), Convert.ToByte(productRow.Element("UIDLength").Value),
productRow.Element("UID").Value, productRow.Element("UserArea").Value);
_products.Add(m);
}
return _products;
}
Now I want to binding XElement MCUName to combobox:
<ComboBox x:Name="cb_MCUType" SelectedItem="{Binding MCUName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
ItemsSouce in the code behind:
public MainWindow()
{
InitializeComponent();
cb_MCUType.ItemsSource = App.ProductDb.GetProducts();
}
But this doesn't work, the combobox populate the Product, how should I fix this? Thanks!
Update:
Thanks for the replies. As you suggested, now I would like to write this in MVVM, so I change my original code:
XAML:
<ComboBox x:Name="cb_MCUType" ItemsSource="{Binding ProductsList}" SelectedValue="{Binding SelectedProduct}" DisplayMemberPath="MCUName" />
ViewModel:
public class MainViewModel : INotifyPropertyChanged
{
private ProductDB pd = new ProductDB();
public MainViewModel()
{
DefaultValue_Load();
}
public ObservableCollection<Product> ProductsList { get; set; }
private Product _selectedProduct;
public Product SelectedProduct
{
get { return _selectedProduct; }
set
{
_selectedProduct = value;
NotifyPropertyChanged("SelectedProduct");
}
}
public void DefaultValue_Load()
{
ProductsList = new ObservableCollectioin<Product>(pd.GetProducts());
}
}

When you create the Products in GetProducts() you provide MCUName as the first parameter in the constructor. For the following sample, I'll assume, that there is a property McuName on every product:
public MainWindow()
{
InitializeComponent();
cb_MCUType.ItemsSource = App.ProductDb.GetProducts().Select(p => p.McuName);
}
It is worth to mention, that this is not a clean MVVM implementation. You should consider to redesign your application to follow the MVVM patter.

Save application data on closing

I'm coding a Phone book. It's fully coded and I'm really happy with the results (first ever finished application!). It's a phone book coded in WPF, and I'm using a DataGrid to simply store the values of the people added. The thing is I can add people and it's all smooth until I shut it down and all stored data is lost. This always happens with all the smaller projects I've done but alot of them were just application that could run a few numbers through an equation and give me an answer and I didn't require the data I had gotten. But with my phone book I want my user to open it and use it over and over again. Thank you in advance :D
EDIT: I forgot to mention that my DataGrid isn't binded to an SQL database so i cant update it on opening after a close.

There are Closing and Closed events in every Window, to begin with.

As mentioned in the comments, your question is a little vague, but here's a worked example for you using binary serialization to create a file with your data in isolated storage (see MSDN Isolated Storage)
I assume you have some kind of backing class for your DataGrid so in this case, I have created a class called Contact. Note the [Serializable] attribute:
[Serializable]
public class Contact {
public String Name { get; set; }
public String Number { get; set; }
public Contact(String name, String number) {
Name = name;
Number = number;
}
}
I then have a list of these:
private List<Contact> contacts;
You can override the OnClosing method of your Window and then save your data down to a file:
protected override void OnClosing(CancelEventArgs e) {
base.OnClosing(e);
using (IsolatedStorageFile isoStore = IsolatedStorageFile.GetStore(IsolatedStorageScope.User | IsolatedStorageScope.Domain | IsolatedStorageScope.Assembly, null, null)) {
if (isoStore.FileExists("contacts.dat")) {
// We already have an old one, delete it
isoStore.DeleteFile("contacts.dat");
}
using (IsolatedStorageFileStream fs = isoStore.CreateFile("contacts.dat")) {
BinaryFormatter bf = new BinaryFormatter();
bf.Serialize(fs, contacts);
}
}
}
And finally after you have done whatever initialisation you need to do, you can look for this file and restore your contacts if they are there as below. Note I have added some dummy entries if there is no backup:
using (IsolatedStorageFile isoStore = IsolatedStorageFile.GetStore(IsolatedStorageScope.User | IsolatedStorageScope.Domain | IsolatedStorageScope.Assembly, null, null)) {
if (isoStore.FileExists("contacts.dat")) {
IsolatedStorageFileStream fs = isoStore.OpenFile("contacts.dat", System.IO.FileMode.Open);
BinaryFormatter bf = new BinaryFormatter();
contacts = (List<Contact>) bf.Deserialize(fs);
}else {
// We don't have a backup file, create some dummy entries
contacts = new List<Contact>();
contacts.Add(new Contact("John Smith", "1234567"));
contacts.Add(new Contact("Emma Brown", "7654321"));
}
}
MyDataGrid.ItemsSource = contacts;

The ItemsSource of your DataGrid should be set or bound to an IEnumerable<T>. To save the data to a file on disk you could then serialize all items in this IEnumerable<T> to a file. You then deserialize it back again when the application starts. The following sample code should give you the idea.
MainWindow.xaml:
<DataGrid x:Name="dataGrid" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Name}" />
<DataGridTextColumn Binding="{Binding Number}" />
</DataGrid.Columns>
</DataGrid>
MainWindow.xaml.cs:
public partial class MainWindow : Window
{
private const string _fileName = "phonebook.txt";
public MainWindow()
{
InitializeComponent();
this.Loaded += (s, e) =>
{
//create a List<Item> that contains the data from the file on a background thread
Task.Run(() => LoadData()).ContinueWith(task =>
{
//...and set the ItemsSource property of the DataGrid to the returned List<Item>
dataGrid.ItemsSource = task.Result;
}, System.Threading.CancellationToken.None, TaskContinuationOptions.None, TaskScheduler.FromCurrentSynchronizationContext());
};
this.Closing += (s, e) => SaveData();
}
public List<Item> LoadData()
{
List<Item> items = new List<Item>();
if (System.IO.File.Exists(_fileName))
{
string[] lines = System.IO.File.ReadAllLines(_fileName);
foreach (string line in lines)
{
string[] columns = line.Split(new char[] { ';' }, StringSplitOptions.RemoveEmptyEntries);
if (columns.Length == 2)
{
items.Add(new Item()
{
Name = columns[0],
Number = columns[1]
});
}
}
}
else
{
//populate the DataGrid with some default data...
items.Add(new Item { Name = "Name1", Number = "000-111" });
items.Add(new Item { Name = "Name2", Number = "111-222" });
}
return items;
}
private void SaveData()
{
IEnumerable<Item> items = dataGrid.ItemsSource as IEnumerable<Item>;
if (items != null)
{
using (System.IO.StreamWriter sw = new System.IO.StreamWriter(_fileName))
foreach (Item item in items)
sw.WriteLine($"{item.Name};{item.Number}");
}
}
}
Item.cs:
public class Item
{
public string Name { get; set; }
public string Number { get; set; }
}
The "phonebook.txt" file will be saved in the output directory - typically c:\YourProjectFolder\bin\Debug or \bin\Release when running your application from Visual Studio - of your executable (.exe) unless you change the value of the _fileName field.

Add localization resources to be shared across multiple projects

Due to architecture design specifications, I have an application that fills its views from ClassLibraries. The application itself behaves like a sort of Integrator.
Now I need to add localization resources and I can successfully achieve it by adding *.resw files but only if the control is declared inside of the Application project.
What I actually need is to being able to share those resources across the ENTIRE SOLUTION somehow.
Then, the point is to being able to translate any control's content of the solution by using localization resources, preferably using the structure explained above.
For example, I have this following view, which fills the TextBlocks' content depending on the selected language:
<ComboBox x:Name="Languages"
ItemsSource="{Binding Languages}"
SelectedItem="{Binding SelectedLanguage, Mode=TwoWay}">
<i:Interaction.Behaviors>
<iCore:EventTriggerBehavior EventName="SelectionChanged">
<iCore:InvokeCommandAction Command="{Binding ChangeLanguage}" />
</iCore:EventTriggerBehavior>
</i:Interaction.Behaviors>
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding LanguageName}" />
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<TextBlock Text="{Binding Model.HelloText}" FontSize="50" Foreground="Red"/>
<TextBlock Text="{Binding Model.HowAreYouText}" FontSize="50" Foreground="Red"/>
<BFview:BFView />
</StackPanel>
Where BFView is a view stored in another project (has two dummy textblocks also)
The Model of that view:
public class MainModel : TranslatableStrings
{
private string helloText, howareuText;
public string HelloText
{
get { return this.helloText; }
set { SetProperty(ref this.helloText, value); }
}
public string HowAreYouText
{
get { return this.howareuText; }
set { SetProperty(ref this.howareuText, value); }
}
}
And the base class of the Model is just a contractual class since it has no implementation, but a base type:
public abstract class TranslatableStrings : BindableBase { }
Then, the View data context is the following one:
public class MainViewModel : BaseViewModel
{
private ObservableCollection<MainViewListRscs> languages = new ObservableCollection<MainViewListRscs>();
private ICommand changeLang;
private MainModel model = new MainModel();
public MainViewModel()
{
Languages = new ObservableCollection<MainViewListRscs>()
{
new MainViewListRscs { LanguageCode = "es-ES", LanguageName = "Español" },
new MainViewListRscs { LanguageCode = "en-EN", LanguageName = "English" },
new MainViewListRscs { LanguageCode = "fr-FR", LanguageName = "Français" },
new MainViewListRscs { LanguageCode = "de-DE", LanguageName = "Deutsch" }
};
}
public ICommand ChangeLanguage
{
get { return changeLang = changeLang ?? new DelegateCommand(OnChangeLanguageRequested); }
}
public ObservableCollection<MainViewListRscs> Languages
{
get { return this.languages; }
set
{
this.languages = value;
OnPropertyChanged();
}
}
public MainViewListRscs SelectedLanguage { get; set; }
public MainModel Model
{
get { return this.model; }
set { this.model = value; }
}
private void OnChangeLanguageRequested()
{
Logger.Debug("MAINVIEW", SelectedLanguage.LanguageName + " selected.");
TranslateManager.UpdateStrings<TranslatableStrings>(SelectedLanguage.LanguageCode, this.Model);
}
public override Task OnNavigatedFrom(NavigationEventArgs args)
{
return null;
}
public override Task OnNavigatedTo(NavigationEventArgs args)
{
return null;
}
}
And the TranslateManager:
public class TranslateManager
{
public async static void UpdateStrings<T>(string langCode, T instance) where T : TranslatableStrings
{
//Get all the classes that implement TranslatableStrings
var currentAssembly = instance.GetType().GetTypeInfo().Assembly;
var translatableClasses = currentAssembly.DefinedTypes.Where(type => type.BaseType == typeof(T)).ToList();
//Open RESX file
ResourceLoader resx = ResourceLoader.GetForCurrentView(langCode);
foreach(var Class in translatableClasses)
{
foreach(var property in Class.DeclaredProperties)
{
string value = resx.GetString(property.Name);
var vmProp = instance.GetType().GetTypeInfo().GetDeclaredProperty(property.Name);
vmProp.SetValue(instance, value);
}
}
}
}
I have achieved changing the two TextBlocks of the MainView but not the view in another project. What I would need to do is to get a list of assemblies contained in a solution. I guess that getting just this would make everything work since I'm using a generic implementation.
Any suggestion will be much appreciated.
Thanks!

Your translation files are loaded as resources. So you can access them anywhere, even in other projects by doing something like
private ResourceLoader _resourceLoader = new ResourceLoader();
var someTranslation =_resourceLoader.GetString("your_localization_key");
Wrap this code nicely into a lib so that you can have an easy access to it from everywhere, and there you go !

Creating a Pivot in background code from Linq feed

I've currently got a class that gets and dispatches an XML feed using Linq to XML to a ListBox in my XAML page. I took this from a tutorial, and was wondering, would I be able to make it appear in a pivot?
My idea is to load the feed, and create a pivot page just in background code for each item (Something like, foreach item in my data, create a new pivot, with other content)
Is this possible?
I currently get data into a ListBox by Binding the loading and using "TextBlock Text="{Binding Id}"/>" in XAML, and loading the feed in the background code as follows:
myFeed.LoadFeed(//name of the listbox that currently has to exist in XAML)
Here is my code that loads the XML feed and dispatches to a Listbox
public class FeedItem
{
public string Id { set; get; }
public string Text { set; get; }
}
public class Feed
{
ListBox myContext;
public void LoadFeed(ListBox context)
{
myContext = context;
HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create(new Uri("http://myDataSource"));
request.BeginGetResponse(new AsyncCallback(ReadCallback), request);
}
private static readonly XNamespace m = "http://schemas.microsoft.com/ado/2007/08/dataservices/metadata";
private void ReadCallback(IAsyncResult asynchronousResult)
{
HttpWebRequest request =
(HttpWebRequest)asynchronousResult.AsyncState;
HttpWebResponse response =
(HttpWebResponse)request.EndGetResponse(asynchronousResult);
XDocument doc = XDocument.Load(response.GetResponseStream());
List<FeedItem> feedItems = (from question in doc.Descendants(m + "properties")
select new FeedItem()
{
Id = question.Descendants().ToList()[0].Value,
Text = question.Descendants().ToList()[1].Value
}).ToList();
myContext.Dispatcher.BeginInvoke(() => { myContext.ItemsSource = feedItems; });
}
}
What can be used to hold the data so it can go in a pivot?
How do i parse the response item-by-item, into a new pivot?

Yes, you can. You need to provide a datatemplate to the Pivot control. Give attention to the header template which is defined at Pivote level not on the PivotItem's one.
<Grid x:Name="LayoutRoot" Background="Transparent">
<controls:Pivot ItemsSource="{Binding MyPivots}">
<controls:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding MyTitle}"/>
</DataTemplate>
</controls:Pivot.HeaderTemplate>
<controls:Pivot.ItemTemplate>
<DataTemplate>
<controls:PivotItem>
<TextBlock Text="{Binding YourRssText}" />
</controls:PivotItem>
</DataTemplate>
</controls:Pivot.ItemTemplate>
</controls:Pivot>
And the code-behind class:
public partial class MainPage : PhoneApplicationPage{
public List<RssFeed> MyPivots { get; set; }
// Constructor
public MainPage()
{
MyPivots = new List<RssFeed>
{
new RssFeed{ MyTitle = "Title1", YourRssText = "Body1"},
new RssFeed{ MyTitle = "Title2", YourRssText = "Body2"},
new RssFeed{ MyTitle = "Title3", YourRssText = "Body3"},
};
InitializeComponent();
this.DataContext = this;
}
}
public class RssFeed
{
public string MyTitle { get; set; }
public string YourRssText { get; set; }
}