Recently I’ve worked on UWP app for Raspberry and Windows 10 Mobile and I had to increase the look and feel of the main view. I’ve used the UWP GridView with templates to better view. I’ve used Visual Studio 2015 with C#6 to achieve this objective. I try to explain now the main constructors of the page.
First of all create a blank UWP universal app.
Now simply add a GrisView. We can add on the code behind (for the example) an ObservableCollection<string> and ue it as ItemSource.
I have initialized the list with ten items for example, and now attach the list to the view.
Now we’re ready to run!
This is not really a good result, isn’t it?
Now try to increase our view to better view our items. On the first thing, the Items in the GridView are added in a Variable Sized Wrap Grid that is similat to a Panel. This is supplied from an “Item Control” that generates the items for the panel. Ok, but how can do that?
Take a look…
and this is the result. Nothig exiting, right?
I have only added the template, no style! But with some changes…
better, yeah?
But what’s changed? Ok, let’s go with order:
First of all I changed the ObservableCollection<string> with ObservableCollection<TheItem> where “TheItem” is a class as follow:
I’ve defined something of my interest, for example a name for the item or the Background. This class implements the INotifyPropertyChanged interfate to allow the XAML to receive each changes from the element. Here I didn’t implemented the notify from the properties because in this example I don’t change anything in the elements. But in a real implementation the programmer have to implement the property in extended mode with the OnPropertyChanged in each set of property.
But go ahead. The XAML looks like this one:
The “Data” field in the Path tag is a big series of letters and numbers. This is a special syntax to define a path and draw a shape. Maybe in a future post I’ll describe well the syntax and how to use it. For now this is not our main problem and take a look to the special items with binding. They have the binding to the properties of our class. Now I have made ten instances of this class and added to the ObservableCollection and voilà! as shown before.
But our troubles are not over! The icon beside the text is always the same one! I would change it as I change my “Name” property. This is a little bit triky.
First of all define some kind of path icons as string.
obviously are truncated because are very long.
Second assign the instances of the class “TheItem” to the ObservableCollection well built.
This is the easiest part. In the class “TheItem” we have to build some properties and methods to fill properly the icons. Insert two properties:
- string PathString
- Geometry PathGeometry
add one methods:
private void AssociateItemPath(string path)
and now the implementation:
and run the new app!
I know is not a wonderful application, but I know you can understand the powerful of this king of programming.
Stay tuned!