How to create a Quran app for Windows Phone (w/ sample code)

WARNING: You should always double-check what you copy-pasted from the Internet. Holy Text is a sensitive matter, double check with an online Mushaf al-Madinah here, or an offline Mushaf (this will give you the bonus of reading the Quran anyways 🙂 ).

Before we continue, I’d like to state the purpose of this blog post… I wanted to create a Juz ‘Amma (surah 78 to 114) app to help me refresh and re-memorize the Juz 30 (you know when you were kids your brain is like paper, anything you memorize will quickly stick like pen-on-paper, and as you grow older and get distracted with life, your brain is slowly turning into water, washing everything that you have memorized away?). Then I realized that others who have more time than me, and others who have memorized more Juz than me, could actually create a more complete Quran app. So hopefully the points in this blog + the sample source code will help you if you have that goal of creating a Quran app.

Also, it’s been 4 years since I shared my .NET Prayer Times Calculator, and Windows Phone 7 Prayer Times App presentation, so it’s time for me to create another religious app that benefits myself (because I will be primarily using it to help memorize the Quran) and hopefully others 🙂

Right, now that we have the initial warning + the purpose explained, let’s get on with the step-by-step, shall we?

1. Find the authoritative body for Quran printing

In this case, there is the King Fahd Complex for the Printing of the Holy Quran. I have not been there myself, but you can have a virtual tour of the physical building complex here on their site.

Virtual Tour of King Fahd Quran Complex

Virtual Tour of King Fahd Quran Complex


2. Know the difference between Riwayat Hafs and Riwayat Warsh (and possibly others too)

Before you even download the Quran Fonts, you need to know there are 2 major Riwayats: Hafs and Warsh, as you can see from this page of the King Fahd Quran Complex site:

Hafs and Warsh

Hafs and Warsh



NO, THERE IS NOT MORE THAN 1 VERSION OF THE QURAN. These just refer to different methods of recitation, THE MEANINGS DO NOT CHANGE.

The recitation method history of Warsh goes (usually written on the back of the mushaf) “the riwayat of Imam Warsh from Nafi’ al-Madini from Abu Ja’far Yazid ibn al-Qa’qa’ from ‘Abdullah ibn ‘Abbas from Ubayy ibn Ka’b from the Messenger of Allah, may Allah bless him and grant him peace, from Jibril, peace be upon him, from the Creator”.

And the recitation method history of Hafs goes (usually written on the back of the mushaf) “the riwayat of Hafs ibn Sulayman ibn al-Mughira al-Asadi al-Kufi of the qira’a of ‘Asim ibn Abi’n-Nujud al-Kufi from Abu ‘Abdu’r-Rahman ‘Abdullah ibn Habib as-Sulami from ‘Uthman ibn ‘Affan and ‘Ali ibn Abi Talib and Zayd ibn Thabit and Ubayy ibn Ka’b from the Prophet, may Allah bless him and grant him peace.”

To understand the difference, go here to listen to Sheikh Abdul Baset Abdul Samat recitations in Warsh. Click on the Al-Falaq link and listen carefully. Notice the difference?

If you don’t notice the difference, click here to listen to Sheikh Abdul Baset’s Hafs Murattal version. And listen to the same surah Al-Falaq.

The difference is in the beginning recitation. In Hafs, we say “Qul (space) a’udhu” and in Warsh we say “Qula ‘udhu” . Very subtle, right?

Now that you know the difference, stick to the majority and the one that King Fahd Complex for the Printing of the Holy Quran advocates: the riwayat Hafs recitation. You see, this is why in point no. 1, I invite you all to to find the authoritative body; because if there are differences in opinions, return it to point no. 1 🙂

3. Download the Quran Font

And this is why I explained Hafs vs Warsh previously, because the font name will have a suffix “_Hafs” or “_Warsh” after it. In this case, you need to download the Uthmani Hafs font from King Fahd Complex for the Printing of the Holy Quran.

There are 2 downloads: the .OTF Font File and the Microsoft Word file. Download both. First install the font, by double-clicking the .OTF file and then click “Install” button. After font is installed (you may need to restart if not running Windows 8), open the Microsoft Word Document. See the screenshot below. Amazing right, now you have the full Quran, from the authoritative King Fahd Complex for the Printing of the Holy Quran, in Microsoft Word format that you can Search (find the word Allah for example) and Copy-Paste (which we will use to create the Quran app).

Quran Unicode using Uthmani Hafs Font

Quran Unicode using Uthmani Hafs Font



Now, some app developers use Tanzil.Net to get the XML version or CSV version of the surahs and ayats. My personal opinion: if we already have an authoritative body like King Fahd Complex for the Printing of the Holy Quran providing a Microsoft Word version of the complete Quran, why go somewhere else? 🙂

4. Use the .OTF as a Resource Build Type in Visual Studio

Now we get to the technical details of building the Quran App. First copy-paste the Font to your Windows Phone Visual Studio project. Choose “Resource” as the Build Action Type:

Font Build Action Type Resource

Font Build Action Type Resource


5. Copy-paste ayat to TextBlock

This is the XAML that will produce the first ayat of the first surah:

If you continue this, you will eventually get to a screenshot like this:

Windows Phone Quran Sample App

Windows Phone Quran Sample App


6. Optionally download a reciter audio

You can see a list of Quran reciters audio files here. For me, I use Mishari Rashid al-`Afasy. Finally, I use a DispatcherTimer to sync the highlighted ayat. You can either break the surat into multiple ayat .mp3 (sur001ayat001.mp3, sur002ayat002.mp3) or keep just one single surah001.mp3 and use a metadata file that contains the timing of each ayat in the file.

7. Download my Windows Phone Quran App sample

I could not figure out how to make my VisualStudio.com repository public, so I am sharing this the old-fashioned way like I did share my .NET Prayer Times Calculator 4 years ago –> https://github.com/zeddy

Hopefully this blog post and the sample source code will help you in creating your own beautiful Quran App 🙂

Reader Comments (1) on “How to create a Quran app for Windows Phone (w/ sample code)

  1. Well Sir I have tried this in windows phone 8.1 and this font is just visible in designer mode whenever I run the application in emulator or a device then it’s not working

Leave a Reply