Thursday, November 19, 2015

Binding Collection to ListView control in UWP Explained

Introduction


List is a common and basic construct of many apps e.g Contacts app in your smartphone. In this article i will show how you can make list of your own template in UWP and bind it to a collection of items you want to display. Just follow the simple steps below.

Content 


  1. Creating project
  2. Creating Model class
  3. Adding List control to Page
  4. Adding DataTemplate to List
  5. Map Properties of Model class to DataTemplate 
  6. Creating ObserveableCollection (List) of item to bind to UI
  7. Bind ObserveableCollection to List control
  8. Working with images

Step 1: 

Open Visual studio and create new Windows Universal project. Name it 'ListBinding' or whatever you want. VS automatically added MainPage.xaml to your project double click to view it.

Step 2: Add Model Class

As Class is like a blue print. It have some properties and we can make as many objects from it which have different values for those properties. In case of List same phenomena exist. List is made of items and each item have some template (e.g an image and text next to it). So we make an class (say it as model) whose object will bind to one item of list.

Add new Class 'Car' in the project and add following properties to it

        public string Brand { get; set; }
        public string Model { get; set; }
        public string Color { get; set; }


Step 3: 

Double click MainPage.xaml and add following code to it

        <ListView x:Name="MyList">
            
        </ListView>

Step 4:

Now add code between ListView tag

<ListView.ItemTemplate>
                <DataTemplate>
                   
                </DataTemplate>
 </ListView.ItemTemplate>

<ListView.ItemTemplate> is telling we are adding template to ListView and </DataTemplate> telling here's the template

Step 5:

Now we will tell where to display properties of Car. Add code to <DataTemplate>

                    <Grid>
                        <TextBlock Text="{Binding Brand}"></TextBlock>
                        <TextBlock Text="{Binding Model}"></TextBlock>
                        <TextBlock Text="{Binding Color}"></TextBlock>
                    </Grid>

You could have any number of properties of model and controls and bind them the way you want.

Till now what we have done? we added a ListView to display list of items and then added DataTemplate to it <DataTemplate> can contain only one item so we added a Grid container and added code to it. Inside Grid we defined three text blocks for our three properties of Car class. Bind it to properties of our Model (Car). Make sure name after Binding is the same as property of class to which you want to bind that TextBlock.

MainPage.xaml will look like this:



Step 6: 

Now we should have some data list to show. Expand MainPage.xaml and double click MainPage.xaml.cs file. Add following code. (Add using System.Collections.ObjectModel; namespace as well to use ObersvableCollection Class. You could use List<T> as well but ObservableCollection notify the ListView when values of its objects are changed)

    ObservableCollection<Car> dataList = new ObservableCollection<Car>();
    Car c1 = new Car() { Brand = "Ferrari", Model = " Lamborghinis", Color = "Red" };
    Car c2 = new Car() { Brand = "Honda", Model = "GLI", Color = "Black" };
    Car c3 = new Car() { Brand = "Porsche", Model = "968 snowplow", Color = "White" };
    dataList.Add(c1);
    dataList.Add(c2);
    dataList.Add(c3);
    MyList.ItemsSource = dataList;

Note: I am using temporary data objects for 3 cars here but these could be any objects got from database or other data sources.
It will look like:





Run the project by clicking local machine (windows 10) you will see overlapped text why? cause inside Grid we just declared three TextBlocks. We did'nt set their layout, now just enclose them with <StackPanel> like this:

                        <StackPanel>
                            <TextBlock Text="{Binding Brand}"></TextBlock>
                            <TextBlock Text="{Binding Model}"></TextBlock>
                            <TextBlock Text="{Binding Color}"></TextBlock>
                        </StackPanel>
Now run again to see this:



Wednesday, November 18, 2015

Getting into UWP (Universal Windows platform)- Windows10 apps

Introduction


In this article i will go through the technical terms and technologies used to develop for universal windows platform. After reading this you would get the overall idea what universal apps are all about.

Content


Microsoft have announced that windows 10 would be final windows version! What it mean? Is windows 10 perfect? Doesn't it need changes? 
Answer is yes! it would evolve and change like other software products but it will only get updates, not next version of windows. Why so? It cause of the fact that all windows platforms (mobile, desktop and Xbox etc) has converged to a single Universal Platform. Which means all have same OS (kernel), now no such thing as Windows Phone 8 or 8.1 now its just Windows on phone.


So if you develop app for windows 10 it would run on all devices running windows 10 like Mobiles, Xbox, Hololens etc. Hope you got the idea of "Universal" word in UWP.

2 .NET vs .NET Core


Windows applications are developed on top of .NET framework. It consists a runtime (CLR) and FCL(Foundation class library) I am keeping things simple here. Previously .NET was shipped as single unit and it had different subsets to cater need of different platform e.g compact subset of .NET was introduced for mobile devices which provide APIs specific to compact devices. In simple words .NET had different customized subsets for every platform which provide APIs according to platform it developed for. It caused many problems like you can't use your same code base for different platform. 
To overcome this problem idea of .NET core was introduced. It uses modular approach which enables us to use same code base for different platforms. .NET core is set of packages delivered through NuGet. It has unified BCL (Base Class Library) which can be used in any platform. When it code is compiled only those APIs which used by app are merged with that app. 

You can read more about .NET Core here

3. XAML and C#


Till this point you know what are universal apps technically. Now we will briefly see what languages could be used to develop Universal apps.
Applications have two major parts: Front end (Display) and Back end (Code to handle user interaction)

 XAML(Extensible Markup Language) is used to create front end of universal windows 10 apps. XAML is XML based language proprietary of Microsoft. As clear from word "Markup" it have tags for different GUI elements e.g button just like (not really) HTML. Here we would call those controls.

To develop backend we can use C#. Every page have a backend C# (.cs) file and frontend in XAML. If you are an android developer a page is just like an 'activity' which have a backend java file. For example if we have a button on page (XAML) we can handle it's click event in it's backend .cs file.

If you know about WPF XAML/C# is the same here

Monday, November 9, 2015

Setting up IDE for Universal windows apps (UWP)- Visual Studio

Before we start learning UWP we must have IDE (Integrated Development Environment) to develop universal apps. IDE for universal windows apps is Visual Studio, which is Microsoft product so it has very easy and user friendly setup and environment. But for absolute beginners this article could be of help if you stuck somewhere during setting up environment especially on windows 8 or 8.1

On Windows 10


Idea of universal apps came with Windows 10, it’s recommended to build Universal Windows apps. Any version of Visual studio 2015 could be used to develop UWPs. You can download visual studio here. Which version? Well it depends on your need. This is article is for Enterprise edition.
Follow these steps:

  1. Run vs_enterprise.exe you have just downloaded from here
  2. Leave all options as it is but if you don’t want install all features deselect the items you don’t want but make sure:
    • “Universal windows app development tools” is checked
    • If you expand this option you may choose to install Emulator or not. Leave it checked if you don’t have Windows 10 phone to test apps
  3. Click on “Run” button at bottom right. (I have already installed it so mine is “Update”)
  4. Visual studio will start installing. Click finish when done
  5. Open Visual studio and go to File->New Project
  6. Now go to -> Installed -> Templates -> Your Language (e.g. Visual c#) -> Windows -> Universal. Name your project and click OK! You are good go with Universal Windows apps!


On Windows 8.1

If you are on Windows 8.1 you need to install update 2919355 to install Visual Studio 2015. If this update won’t work install all available updates and try again to install this update. If installed successfully, rest of the procedure is same as given above for windows 10! Happy learning!
Note: There are some bad point about Windows 8.1

  • You won’t have the option to see GUI against your XAML code. You can just write code in XAML but will not able to see it unless you deploy it on some Windows 10 device.
  • You have only option to deploy apps on Remote Machine if don’t have Windows 10 phone or emulator


JumpStart


Some useful links to start with UWP:

Tuesday, November 3, 2015

All you need to start with UWP windows platform

This article is intended to cover all those basics for those who never been on windows platform.

Contents

  1. .NET
  2. WPF vs Windows Forms
  3. Universal Core
  4. DirectX
  5. XAML