SQLite Database in Windows phone app – Part 3 (SQLite Exploration)

This is the third blog post of the series in which I am going to show you how to explore sqlite database stored in windows phone app.

If you have missed my last two blog posts you can refer to them from the links given below

 

SQLite Database in Windows phone app – Part 1 (Installation and Setup)

SQLite Database in Windows phone app – Part 2 (SQLite Operations)

 

Follow the steps given below

 

Step 1:
Download the IsoStoreSpy tool and SQLite Studio.

 

You can refer to the following blog post for downloading and setting up IsoStoreSpy tool.

http://windowsapptutorials.com/windows-phone/isolated-storage/how-to-access-isolated-or-local-storage-data-of-windows-phone-app-silverlightwinrt/

 


 

For SQLite Studio you can refer to the following link

http://sourceforge.net/projects/sqlitemanstudio/

 


 

Step 2:
Now using isostorespy tool you can easily export it on your pc from local storage.

 


 

Pressing the following button as highlighted in the figure you can download the sqlite database from the windows phone local storage.

 

Step 3:
Open the downloaded database file using SQLite studio.

 


 

You can browse the contents of your database easily.

 


 

I hope this post will be helpful to you.


SQLite Database in Windows phone app – Part 2 (SQLite Operations)

In my last blog post I have explained you how to install and setup SQLite Database in your Windows Phone app Project. In this post I will explain you how to create or delete a database and how to perform different operations like insertion, deletion & searching etc.

We will be working on the same project that we have created in last post. So if you have missed that post you can view it from the link given below. And follow the steps given below.

SQLite Database in Windows phone app – Part 1 (Installation and Setup)

 

Step 1: Create a new folder called Database in your project and add a class to it having the name Schema.cs.

 


 

Step 2: Now create a table called Students in form of class that we need to include in our Records.sqlite database.
The class having the name Students with all the getter and setter methods have been given below.

 


 

 

Note: One property needs to act as primary key and its value should be unique for each record. In this example Id of student acts as primary key.

Step 3: So it’s time to perform all SQLite operations. So I thought to make a single helperclass called ‘DatabaseHelper.cs’ in Database folder and handle all the SQLite operations with this helperclass.

 

 

Step 4: This is the main step where we will be writing all the SQLite operations in the helperclass.

 

 

1. Creating a Database While creating a database we need to first check whether it exists or not. If not then create a new database. The code for the following is given below.

 

 

Note: You can create more than one table in a database. In this post we have just created one table to keep things simple.

2. Deleting a Database
Note that database is created as a storage file in Windows Phone app so to delete it you only need to delete the following storage file. The code for the following is given below.

 

 
 3. Adding a new record The best practice while adding a new record in the database is to first check whether database with following name exists previously or not and then insert a new record. The code for the following is given below.  

 


 
4. Updating an existing record
To update a record in database we first need to query that object from the database and then only we can make changes to it. The code for the following is given below.

 

 

Note: In this example we are updating the marks of the student with given id using the search query.

5. Deleting an existing record Similar to updating an existing record you first need to query the record from the database and then perform the deletion operation. The code for the following is given below.

 


 
6. Selecting all students from the database
The code for fetching all the records from student table is given below.

 

 
Note: The full code for the DatabaseHelper.cs is given in this link.

Step 5: Now after writing the code for database operations the next step is to create the UI for the above and bind the data to it. On MainPage.xaml create 4 different buttons as shown in the figure below.

 

 

The code for the Design view is as following  
 

 
Different buttons are

1. Create Button– This button is used to create a new database. The code for the click event handler is as given below

 
 
 

2. Delete Button– This button is used to delete the current database if exists. The code for click event handler is given below.

 
 
 
3. Add a new record Button– This button navigates to new page. Where we can add a new record into the students table. The code for click event handler is given below.

 

 

4. Display all records Button– This button navigates to a new page. Where we can view all the records and delete them from the table. The code for click event handler is given below.  

 

 

Step 6: Create two new pages having the name AddRecord.xaml and Display.Xaml in your project.

 


 

AddRecord Page

In this page we insert a new record into the table

 


 

The code for xaml page is given below

 

 

When use clicks on the insert button the record is inserted into the database. The code for the click event handler is given below.

 

 

Display Page

In this page we display all the records that are present in the database as shown in the figure below.

 

 

The code for the xaml is

 

 

And the code for the Display.xaml.cs is as following

 

 

Note: In both of the pages we have made use of the functions defined in DatabaseHelper.cs.

 

Step 7: Add the following code for back button press in App.xaml.cs to control the navigation from one page to another.

 


 


 
If you have any doubts related to this post you can download the full source code of the project from the link given below.

SQLiteDatabase.zip

In my next blog post I shall explain you how to explore SQLite Database using IsoStoreExplorer tool.

http://windowsapptutorials.com/windows-phone-8-1/sqlite-database-in-windows-phone-app-part-3-sqlite-exploration/

SQLite Database in Windows phone app – Part 1 (Installation and Setup)

While developing applications there may be a need to store data and access it for later use. Windows Phone provides us with different ways to store our application data depending on the size. But when dealing with large data involving multiple entries, database is the appropriate method.

 

Windows phone 8.1 Runtime app supports SQLite database. So in this article I will explain you how to install and setup SQLite database reference in your windows phone application.

Follow the steps given below

 

Step 1:
Create a new Project having the name SQLiteDatabase.

 


 

Step 2:
Install the SQLite for Windows phone 8.1 SDK

Go to Tools->Extensions and Updates

 


 

Then type the keyword sqlite in search bar in the online tab. And install the SDK SQLite for Windows Phone 8.1

 


 

Note: If you don’t find the required library in Visual Studio gallery you can download it from the required web page.

 

Step 3:
Add the SQLite Reference to your Project

 


 

Go to References->Windows Phone 8.1->Extensions

 


 

When done, you will see that the proper references to SQLite and Visual C++ 2013 Runtime have been added to your project

 


 

Step 4:
Change the target Platform of your Project

You may have already noticed, that the references show a warning symbols, to resolve that the next thing to do, before compiling the solution is changing the architecture of the target platform. This is the fact that the engine of Sqlite is written in C ++, and the default target platform set in the project is Any CPU. This mode is not supported.

So in order to resolve this go to Configuration Manager as shown in the figure below

 


 

In the next dialog, we note that we have several choices of platforms, Any CPU (the default), ARM, x64 and x86.

Now we change the target platform accordingly. If you want to debug your app on Phone then choose the ARM Platform. But if you wish to debug your app on Emulator or Windows PC select x86 or x64 configuration depending on your processor if it is 32 bits or 64 bits.

 


 

Note: Every time you change your debugging option from emulator to phone you need to change the debug configuration accordingly.

 

Step 5:
Installing sqlite-net package

After installing the library for SQLite, we need sqlite-net NuGet package. With this library, we will be able to perform all the operations that you normally do in a database, such as Insert, Delete, Update and run search queries. This package provides two helper classes (SQLite.cs and SQLiteAsync.cs).

To install it right click on the project->Manage NuGet Packages and search for sqlite-net

 


 

Finally we have completed the SQLite setup. In the next blog post I will be explaining you how to perform different operations like insertion, deletion and searching in SQLite database.

 

http://windowsapptutorials.com/windows-phone/sqlite-database-in-windows-phone-app-part-2-sqlite-operations

Pass data from User Control to Parent page in Windows Phone 8.1

While using User Controls in Windows Phone, we often get into a situation where we need to pass some kind of data from the user control to the parent page, when any operation is performed on the user control. Delegates can be used to pass data from the User Control to the Parent page. We reference C# Corner’s article to apply the same logic in Windows Phone 8.1

Step 1: Create a User Control

Firstly, we create an User Control with a button in it.

Step 2: Declare a delegate on the User Control

Create a delegate on the user control, that can encapsulate a method that takes no input and returns a DateTime type.

Step 3: Create an event on the User Control

Declare an event on the user control, that is of the delegate type that we created.

Step 4: Using User Control in the Parent Page

Next, we use the User Control in our MainPage.xaml.

Step 5: Subscribe to the User Control event in the Parent Page

Our main page will subscribe to the event that we created on the user control, to get notification of when the event is fired on the user control.

Step 6: Execute the Event Explicitly in the User Control

Next, when the button click functionality is done, we explicitly execute the event by calling the GetDataFromChild event, passing the required data.

Run the application and click the button. On the clicking of the button, when we make the explicit call to the event from the user control, the parent page receives the notification through the UChild_GetDataFromChild method.

User_Control_Data_Passing.zip

Wrap Grid with Variable Sized Items for Windows Phone 8.1

In this tutorial I will show you how to wrap variable sized ListView Items in Windows Phone 8.1. This is how our end product looks.

.wrap_grid

Here are the steps:

Step 1: Create a custom WrapGrid

Firstly we would be creating a custom WrapGrid by overriding MeasureOverride and ArrangeOverride methods of Panel. So we have added a new class WrapPanel in our project under Controls folder.
controls_folder

The WrapGrid class to be added is as follows.

Step 2: Define ItemsPanelTemplate

We will be defining the ItemsPanelTemplate for the ListView to be used. Define this as local resources.

Step 3: Define DataTemplate for the ListView

Next we arbitrarily define a DataTemplate for the ListView which we are using. Define this as local resources.

Step 4: Define ListView Style

For our convenience and for allowing reusability we will be defining a Style for our ListView as local resource.

Step 5: Add a ListView in MainPage.xaml

Next, we add a ListView in our MainPage.

Step 6: Add a AddItems method to populate items.

We call this function in the OnNavigatedTo event handler to set the ItemSource of our ListView.

That’s it. Try running the app in the emulator and see the magic for yourself. Download the full source code for your reference.

Windows Phone 8.1/Windows 10 WinRT

Download full project Wrap Grid 8.1

Windows Phone 8.1 Silverlight

Code for implementing it in Windows Phone 8 is quite similar. You can grab the following project if you are working on Windows Phone 8 or Windows Phone 8.1 Silverlight.

Download full project Wrap Grid WP8

Implementing Tab View in Windows Phone 8.1 or Windows 10

In this tutorial I will show you how to implement a tab view using Pivot Items in Windows Phone 8.1 WinRT app or Windows 10 app using just a few lines of codes.

first_tab

If you are developing for Windows Phone 8 or Windows Phone 8.1 Silverlight then follow this article:
http://windowsapptutorials.com/windows-phone/ui/how-to-implement-tab-view-in-windows-phone-8/

We will use a StackPanel for the tabs and bind its Background property to the SelectedIndex of the Pivot, converting it to a desired color using a Converter. Here are the steps:

Step 1: Add a Pivot in your MainPage.xaml

Firstly we add a Pivot with two Pivot Items.

Step 2: Add a StackPanel for the Tabs

Add a StackPanel for the tabs and bind its Background property to the SelectedIndex of the HomePagePivot.

Next, we will define the converter which we are using to convert the SelectedIndex to a corresponding color. Also we pass the tab number(0, 1, 2…) as a converter parameter.

Step 3: Define a Index to Color Converter

We will use this converter to changed the selected tab’s background to a different color.

If the selected index matches with the tab index then the background is set to DarkGray otherwise we set it to Gray.

Step 4: Add a Reference to the Converter in MainPage.xaml

Next we add a reference to the converter in our MainPage.xaml and use it.

Step 5: Add Tap Event Handler to the StackPanels

We need to add a Tap event handler to change the selected PivotItem when one of the tabs are tapped. This can be done by using the following code.

Try running the app in the emulator and it should work perfectly.

Download the full project source for your reference.

Download full project TabViewWP8-1.zip

Cheers to Chayan for sharing the source code. 😀

How to use Converters in Windows phone app (Silverlight/WinRT)

ValueConverters can be used whenever we need to present data in an easy and controllable way such that it doesn’t interfere with other layers of the application.

Converters are called by the Data Binding mechanism whenever binding actually occurs (for example, when a control is notified about the change in the underlying property).

 

ValueConverters need to implement IValueConverter, a simple two-method interface. The two methods are

1) Convert – Modifies the source data before passing it to the target for display in the UI.

2) ConvertBack – Modifies the target data before passing it to the source object. This method is called only in TwoWay bindings.

For more reference you can see this link.

In this following blog post I shall be demonstrating you how to create an indexvalue
converter for your Windows phone app. The different steps you need to follow are

 

Step 1:

First create a class having the name IndexToColorConverter in your Project.

 

 

And add the following code to it as shown below.

 


 

Silverlight

WinRT  
Note: The only difference between Silverlight and WinRT is that the data type of parameter culture has been changed to string in WinRT.

 

Step 2:

Open the XAML page where you need to use this converter and add the following code in the namespace of the XAML page.


Note: Here Tips8 is the name of the Project. You need to replace it with your own project name.

 

Step 3:

Add the following code into PhoneApplicationPage page resources section in the XAML. It will create a Static resource within the XAML page with a specific key which will be used by the UI elements further.

 



  Note: The name of the key can be same as the Class name of color converter or something else. In order to avoid confusion we have kept both names as same.   Step 4: Now in the UI element just bind the property you wish to do so. For example in our project we have binded the Background Property and have assigned the IndexToColorConverter to it. The code for the following is

Note: Here index is the object property to which button is binded.

 

If you have any doubts regarding data binding you can refer to the following blog post.

http://windowsapptutorials.com/windows-phone/data-binding/data-binding-in-windows-phone-app-one-way-binding/


Reading and Writing in an Existing text file in Windows phone app (Silverlight / WinRT)

This is a small blog post in which I shall be explaining you how to read and write to an existing text file which is present locally in your project.

Let us suppose the text file is having the name myfile.text and is present under main root directory.

 


 

Step 1:

Now first thing you need to do is to set Build Action to Content. And, change Copy to Output Directory to Copy Always. This will ensure the file itself ships with your application. If it doesn’t, you won’t have a file to read.

 


 

Step 2:

Now you can read and write your text files easily as shown in the code below

 

Windows Phone Silverlight

Reading

 

 

Writing

 

 

WinRT

In WinRT you can access files in the local app data store using the “ms-appdata:///local/” protocol. To access files in the app package, use Windows. ApplicationModel. Package. Current. InstalledLocation.

Reading

 

 

Writing

 

 

Note: Suppose your file is not located in main directory and is located under the root folder Files as shown below.

 


 

Then file name would be


Note: You can use the same technique for an xml or json file.


Working with Azure Mobile Services in Windows Phone 8.1

This this program how to create our Azure Mobile Service JavaScript on Windows Azure. We hope by reading this tutorial you will be able to create your Azure Mobile services.

Step 1: Create a new mobile service

Log into the Management Portal. At the bottom of the navigation pane, click +NEW. Expand Compute and Mobile Service, then click Create.

Step 2: Create a Mobile service

In the Create a Mobile Service dialog, select Create a free 20 MB SQL Database, select JavaScript runtime, then type a subdomain name for the new mobile service in the URL textbox.

Step 3: Specify database settings

In Name, type the name of the new database, then type Login name, which is the administrator login name for the new SQL Database server, type and confirm the password, and click the check button to complete the process.

Step 4. Create a new table technologies

Using the Azure Management portal create a new table. In the Data tab of Mobile Services click on create to create a new table. Here we have named our table technologies. You can also set insert, update, delete and read permissions for the table.

Step 4: Create Windows Phone App

Follow these steps to create a new Windows Phone 8.1 WinRT project.

  • Open Visual Studio 2013
  • Select Visual C# -> Windows Store->Windows Phone Apps
  • Select Blank App (XAML)

Step 5: Add a reference of the Windows Azure Mobile Services Managed Client to the project

Step 6: You need the key and application URL to work with Windows Azure Mobile Services.

Step 7: Then copy and paste the above code into your App.xaml.cs file

Step 8: Create an entity class as in the following

Step 9: Create global variables

Add global variables in MainPage.xaml.cs

Step 10: XAML Design Code

Step 11: Design in Phone Emulator

Step 13: Now write the following code to the Button_Click event

Step 14: Run the Program then Insert Value

Click save button. You may now check if the data was successfully inserted using your Azure portal.

Lazy Loading ListView Items in Windows Phone 8.1 WinRT app

In this tutorial I will show how to use incrementally load ListView items in a Windows Phone 8.1 WinRT app.

Here are the steps.

Step 1: Add a ListView in your page

Add a ListView and define its DataTemplate in your page.

Step 2: Get the ListView’s ScrollViewer

In windows phone 8.1 ListView we cannot get reference of the ScrollViewer. You can find the ScrollViewer of your ListView by using VisualTreeHelper. Get the ScrollViewer using the following function.

Step 3: Add ListView Loaded event handler

In ListView’s Loaded event handler subscribe to the ScrollViewer‘s view changed event handler.

Step 4: Fetch more items in the View Changed event handler

In the view changed event handler of the ScrollViewer calculate the scroll progress and fetch more items if the progress is more than a certain threshold. In our case we call the fetchCountries function when the progress is more than 0.7. Also incall is set to true so that multiple calls at the same time can be avoided.

Our function fetchCountries adds 20 items every time it is called. The function sets the variable incall to false after all items have been added. Also endoflist is set to true when no more items are left.

Step 5: Add Main Grid Loaded function

In the Page’s main grid loaded function set the ListView’s ItemSource and call the fetch function to add initial items.

That’s it. Your ListView with lazy loading will now work perfectly.
Download the full project source code for reference.
Download Lazy Loading ListView

Checkout a related post on using ListView in android.

Using ListView in Android