User Interface

The application contains one simple main page and one user panel.

MainView

The MainView is a simple page with an image (PictureBox) anchored only at the top to stay centered, two labels, also anchored only at the Top, and a StockPanel anchored at the top and at the bottom in order to resize vertically to fill the page.

MainView

However, there is a trick in the MainView: 📱 Responsive Properties! The view is arranged differently when running in a Phone or in a Phone in Landscape mode.

Phone View

Phone (Landscape View)

StockPanel

The StockPanel view contains a DataRepeater control. it repeats the template panel and all its children vertically (or horizontally) to display all the records in the data source.

Each child control can be bound to a field in the data source.

StockPanel showing the binding of the value label

Once the control is designed, all the child controls in the template are wired to the data source, the system takes care of the rest. It's enough to run a loop like the one below to update all the items in the panel:

foreach (var m in model)
{
	if (m.Watching)
	{
		changed |= StockManager.UpdateQuote(m);
	}
}

Bidirectional Binding

In the code snippet above you'll notice the check on the m.Watching property. That property is bound to the switch control in the Data Repeater. When the user switches it on or off, it automatically updates the Watching property in the data model.

Advanced Binding

Notice that the label next to the "Last Update" label says no data. We can use the Advanced Binding configuration to configure the binding of the last update label to display "no data" when the incoming value is null.

Advanced Binding