SQLite-net and SQLite-net extensions with Universal Apps

So I wanted to get my hands dirty with some SQLite in Universal Apps.
Turns out I had my hands full with trying to figure out why stuff wasn’t working… so here a small blog post to help others if they have the same problems.

Let me explain the setup.

* Univeral app template
* Installed SQLite SDK for Windows Runtime (Windows 8.1) and Windows Phone 8.1
* Installed SQLite-net nuget ( to be able to work with helper methods and attributes )
https://github.com/praeclarum/sqlite-net
I used the PCL version https://github.com/oysteinkrog/SQLite.Net-PCL
* Installed SQLite-net extensions nuget ( to be able to handle relationships through attributes )
https://bitbucket.org/twincoders/sqlite-net-extensions

First problem, while using the SQLite-net in combination with SQLite-net extensions, the SQLConnection method needs an extra parameter to identify for what platform you want to run SQLite.
So what you’ll see in most tutorials:

is not correct, you’ll need to put:

But where do we find this SQLitePlatformWinRT implementation? Well there is a nuget for this too! BUT alas in Universal this won’t load because of the Windows Phone project that is also inside the shared solution.
Only way to circumvent this is by copy/pasting the source code, because the code is correct for both platforms in an Universal setup!
Thanks StackO for this: http://stackoverflow.com/questions/27506374/sqlite-net-platform-for-windows-phone-8-1
The source code can be found here: https://github.com/oysteinkrog/SQLite.Net-PCL/tree/master/src/SQLite.Net.Platform.WinRT

Second problem, when doing all this, everything works great – but I was unable to check if the database exists after I created it with the SQLConnection method!
Again all tutorial say, just check the local storage like this:

So if you’ll get an exception the file does not exists, so there would not be a DB. But even though I had no file, I was able to perform queries!
Seems SQLite-net uses a pre compiler directive NETFX_CORE that is being hit when I only supply a db name to the SQLConnection method. The code is in the SQLite.cs file here https://github.com/praeclarum/sqlite-net/blob/master/src/SQLite.cs

In other words the db was created in the temporaryfolder!
To fix this we need to supply a full path while first creating the db so change the SQLConnection method again to:

After this, the db will be inside the ApplicationData.Current.LocalFolder and so you can again use the GetFileAsync(dbName) method to verify if your db is available or not.

I hope this helps some people… happy coding

Win RT – Masked edit box [community help]

Ok here is the deal, I’ve been looking for a good Masked Edit box for Win8 RT and only found one from SyncFusion.

But of course like any dev I didn’t want to have 3th party control libs in my project. Open source projects aren’t a problem, but the big Win RT toolkits I know of don’t have one available.

So hence my question, who would like to help out and create a community Masked Edit box? I’ve already started with something that works, but is very limited! So if someone wants to improve this, please be my guest 🙂

What I started with is a behavior that can be used on a TextBox. It currently has one dependency property called Mask where you can define simple masks. The only fixed chars that are available for the mask are 9 ( for numeric placeholders ) and # ( for all chars placeholders ). So you could already set up a mask like this: 99.99.###.999

But the behavior still has some flaws!

  • Copy paste a large string will not trigger a correct mask formatting
  • While deleting and again entering chars, will sometime result in the need to enter the same char twice

Like I said, it’s just a start… so who is up for it? If you feel the urge to help out, take a look at the project on GitHub and do a fork and a pull request 🙂

Picture library image control for Windows 8 store apps

So on a recent Windows 8 store app project, we wanted to let the user pick images from his hard drive to use them inside the app.

But with Windows 8 store apps we are a bit restricted on rights to get a hold on files anywhere on the pc’s hard drive. Sure when you select the file you can read it, but when the app restarts that location could be no longer available to the app itself due to rights restrictions.

So, how could we solve this? We could store the images binary inside some sort of database… but for our app that would be a bit too much. Other solution is just using the default Picture library that is available on the pc itself!
It’s easy to give the app rights to this folder… it’s right there in the Capabilities section all you have to do is switch it on!

image

With that in place we only needed to create an image control that would allow us to use a normal string, representing the path to the location of the image, as source. But the control should also let the user select images and copy those over to the picture library so we can reuse them later!

So let me introduce to you the PictureLibraryImage control!
It’s a user control that contains an Image and has some extra Dependency Properties.

The xaml looks like this – note there are 2 fading animations, they are used to let the Placeholder image fade out and the Source image fade in, after it has been loaded!

The properties we are introducing are:

  • Placeholder : we use this to show a dummy image when there has no source been set yet
  • Source : the path to an image inside the picture library
  • FolderName : the name for the folder we use to put the user selected images

When you place the control in your app and run the app, you can tap on it to get a hold of a FilePicker, this will let the user choose an image! When an image is chosen we copy it over to the given FolderName location inside the Picture library… the code looks like this:

Now comes the last part of our control! We have to be able to use a string pointing to a file inside the picture library as source…

This is actually very easy with the Source dependency property in place and the Picture Library capability. We only have to read out the file and set it as BitmapImage to the image ssource inside the control! The code for this is

Only thing left to do is use it in your project… the source can be binded to some MVVM property of course.


Let me get one thing straight, this is not by any chance the most elegant solution… but for our needs it served the purpose very well.

Just go through the code, maybe there are other things you could reuse instead of the actual control itself 🙂

Everything is up on my Github here… so download, use and any suggestions or improvements are welcome!

Twitter integration in Windows 8

Integrating Twitter in your own Windows 8 store app requires a lot of knowledge of their API, this because of the strict requirement of authentication through OAuth ! We needed this twitter integration, because we want to show the twitter avatars of several users in our app!

If you are up to it, you can implement your own REST code… But if you are a bit like me and would think others are far more educated to get it right, you can go for a library that does all the hard work for you!

I choose to use Linq2Twitter ( made by @JoeMayo ) for our latest Windows 8 store application, because for me, the Linq format just seems the best way to deal with the API.

Now let me show you how you can add that twitter integration in your Windows 8 app!

First things first, when you want to do any twitter API calls from within your own app, you’ll need to register the app through their Developer site, be sure to also fill in a callback URL ! When this is done and your app was verified, you’ll get 2 keys that are needed in your .net code:

  • Consumer key
  • Consumer secret

When you have that in place, you can add the code needed to get your user to allow your app to talk with his twitter account. Within a Windows 8 store app, this  is done with the WinRtAuthorizer from Linq2Twitter. Just take care of saving the passed through user credentials, so you can reuse them the next time your app starts!

 

When this is done, you normally should have an authorized twitter context that you can use inside your app. What I needed in our app was retrieving several twitter user handle images and also needed to be able to tweet a certain text.

For searching a lot of users at the same time you can use the following code:

 

What we do here is perform a twitter lookup with a string concatenated list of twitter screen names. If the search went ok, we get back an Enumerable list of twitter Users that contain a lof of info about the user! In our case we needed the user.ProfileImageUrl

So that’s it, nothing more to it, be sure to check out the codeplex site of Linq2Twitter for much more details on what you can do with this library.

#ComDayBe – Flyout control in XAML through Callisto for Windows 8

@BartLannoeye ( his blog ) and I did a session on Building the Windows 8 Community app, last week at Community Day 2012, this as members of the WiPhug user group.

Here we are with part 3 and this time we will be talking about using the appbar and implementing a Flyout Control. More detail on what it is and when to use it, is given here…

But why would we need to put a blog post up about it, well because if you go through all the examples on the MSDN site, you’ll notice that there is no XAML version available!! Yep with Windows 8 RP there is still no XAML flyout control out of the box!

But there is a good alternative for this, that is by using the Callisto lib created by Tim Heuer! If you want you can simply add it through the Callisto NuGet. This lib contains several neat features, but for me the FlyOut control for XAML is by far the most valueable.

So once refernced, how do you add a flyout control… this is done through code behind on your view page. In our case we want to trigger the visibility of the flyout when the user presses an appbar button.

So we add an appbar, ad a button and hook up the Click event to a method on our code behind. This looks like this in XAML:

On thing to notice here, is the fact that I’m using a static resource for the button! It’s called FilterAppBarButonStyle, I’ve added this myself in the Common\StandardStyles.xaml file. It’s a Filter Icon for the appbar, looking like this:

FilterButton

This icon is actually a font instead of an image, and you can get it for free, because the font itself is already installed on your machine!! The style definition is done in XAML and the code is:

 

You’ll notice that we set a Content property to some special value, well this value represents one char from the font Segoe UI… and you can get that value by opening the Character map in Windows 8. More on this technique can be found explained here… by Jerry Nixon

Now that our button is in place we only need to create the flyout control in the code behind method, this is don like this:

The flyout control can contain any ui control, in our case we add a Menu control with ToggleMenuItems. If you look again, you’ll also see that at the beginning of the ShowFlyoutMenu method, we set the Placement of the Flyout above the sender, in this case the appbar button!

Well again nothing that difficult, but it gives your app a fancy UI element!

The demo can be found underneath…

Callisto AppBar demo solution

#ComDayBe – Share contract through MVVM in Windows 8

@BartLannoeye ( his blog ) and I did a session on Building the Windows 8 Community app, last week at Community Day 2012, this as members of the WiPhug user group.

So this is the second post in reference to our session, this time on how you can use a share contract through MVVM.

So one of the new neat features of Windows 8 is the Share Contract, it allows you to ‘share data’ from within your own app with other apps. You can read in more detail here what it is all about and sure check this list of possible data types you can use to share data here…

In our app we currently only share simple text/html basically a title and a description that will contain an URL to an external webpage with more info. So in the Community Calendar app this will be enabled on the Event detail page, so that you can share the selected event through email for example. And on the User Group detail page, so you can share the selected user group.

Adding a share contract isn’t that difficult, but we faced one problem and that is that our data to shre resides inside our MVVM ViewModel and not on our View. So how do you go about this…

First thing you’ll need to do is create a ShareData class. This little class will represent our data that we will share to other apps. In our case a Title, Description and some Text. Depending on the target app, some of these data properties will be used to acquire data.

 

Secondly you need to create a ShareManager class, put it somewhere inside a folder in your project. It is a singleton class, because we will need a same instance to be accessible on different places.

 

The ShareManager holds your ShareData class and we will be filling that up from our ViewModels! In the Initialize method, you’ll need to hook up to the DataRequested event, because that event will be triggered when you click on the Share button on your Charms bar in Windows 8! The only thing to do inside the method you’ve hooked up, is presenting the needed ShareData to the requester.

Now if you want to enable the Sharing, you’ll need to let Windows 8 know which Views have the Share ability. You do this by instantiating the ShareManager in the code behind of the View.

 

There is nothing more you need to do in the View itself… the body work is done in the ViewModel. So also in the ViewModel you’ll need to instantiate the ShareManager and when we want to share Event Data we add it when our SelectedEvent data get’s set in the ViewModel by passing the data to the ShareManager.

And that’s it, nothing more to it 🙂

I added a demo project so you can go through the code yourself!

Share Contract demo solution

#ComDayBe – Image manipulation in Windows 8 metro app

@BartLannoeye ( his blog ) and I did a session on Building the Windows 8 Community app, yesterday at Community Day 2012, this as members of the WiPhug user group.

During this session I presented some technical items on how to make your Windows 8 app more attractive… Because of the fact that we currently only shared the slide deck, I’ll be putting up some small blog posts with code references so you can use these inside your own app as well!

First post is about doing Image manipulation in Windows 8 metro.

Our Community app presents a list of events that contain sessions. Such a session can be given by one speaker or more speakers. What we wanted to achieve was to let the user of our app directly see the image(s) of the speaker(s) when he looks at the session list. But the trick here is that because of the use of XAML templates we only have one Image control inside our session list with a given Width and Height. So we need to transform the given images so that they will fit. The effect we are after is this, one speaker = one large image, more speakers = smaller images inside one large one:

image

Now how do you do this… well it’s very easy and this thanks to the WriteableBitmapEx lib available on codeplex or through NuGet. But let me suggest you get the source code because you’ll need to tweak one small thing to get a good result! ( more on this later ) This library gives you a whole range of different extensions on the WriteableBitmap class that is available in .Net namespace Windows.UI.Xaml.Media.Imaging. With these extensions you can manipulate your images.

So when you added a reference to the WriteableBitmapEx, you’ll only need a WriteableBitmap inside your code and you are set! What we do in our app, if the session is only given by one speaker we will just be downloading the image from the web ourselves and return it to the image control.

Downloading images from the web is done by using the FromStream extension.

 

UPDATE: if you get version 1.0.2.0 of the WriteableBitmapEx, you don’t need to change the source code, because as of that version the problem has been fixed!

But befor we continue, do note that the current code base of the FromStream method swaps Red en Blue colour channels! The effect you’ll get are speaker images that look a lot like Navi people from Avatar 🙂 . So therefore, open up the WinRT project of the WriteableBitmapEx solution and search for the FromStream method, it is inside the WriteableBitmapConvertExtensions.cs file! Just put in comment the for block that is underneath the pixelData.DetachPixelData();

But what do we do when we have several speakers and only the same amount of image space inside our XAML? Well we just resize the original images and merge them inside one larger one at specific positions… we currently only support up to 4 speakers, so I didn’t use a sophisticated algorithm to do the transformations.

To do this kind of manipulation we use the Blit method. The Blit method is used on the Target image and you’ll have to give it a set of 4 parameters. The first one is a rectangle indicating where in the new Target image you will be placing the Original image. But the neat thing here is, that by setting this first rectangle parameter you can also in one go resize the Original image! The second parameter is the actual Original image itself. And the third parameter is a source rectangle, also here a neat thing, you can if you want only take out a part of the original image! But we use the complete image… The last parameter is a BlendMode and this is set to Additive.

Now how does this look in code: