Universal – Depechie’s outing

How to add a Tag list into WinRT universal apps

** Update: also look at an alternative solution Shawn Kendrot did here: http://visuallylocated.com/post/2015/02/20/Creating-a-WrapPanel-for-your-Windows-Runtime-apps.aspx

Sometimes you like to present a list of items to the user. But the requirements for that list are so, that it must remain compact, wrap at the screen edge and editable in that sense that you can remove items quickly.
This kind of list is often represented by tags, so how do you do this in an universal app, let me show you how!

First thing that is very important to note, is the fact that we will be using a RichTextBlock with an InlineUIContainer. We do this, because the RichTextBlock handles the screen wrapping/overflow! That will enable us to add tags and each time a new one is added to the list, the RichtTextBlock will validate if it will still fit the current line, if not it will add a new line and wrap.

And to be honest that’s it! Only thing left to do is add the real tags, that are actual Buttons inside the InlineUIContainer. In the current demo application I’m doing this in the code behind of the MainPage file, there is a method called SetTags.

var tagParagraph = (Paragraph) (from paragraph in TagRichTextBlock.Blocks
    where paragraph.Name.StartsWith("Tags")
    select paragraph).FirstOrDefault();

var tagIds = from tag in General.GetInstance().TagSelection.Tags
    select tag.Id;

var buttonsToRemove = from item in tagParagraph.Inlines.Cast<InlineUIContainer>()
    where !tagIds.Contains(((Button) item.Child).Name)
    select item;

foreach (InlineUIContainer container in buttonsToRemove)
    tagParagraph.Inlines.Remove(container);

var tagParagraph = (Paragraph) (from paragraph in TagRichTextBlock.Blocks

where paragraph.Name.StartsWith("Tags")

select paragraph).FirstOrDefault();

var tagIds = from tag in General.GetInstance().TagSelection.Tags

select tag.Id;

var buttonsToRemove = from item in tagParagraph.Inlines.Cast<InlineUIContainer>()

where !tagIds.Contains(((Button) item.Child).Name)

select item;

foreach (InlineUIContainer container in buttonsToRemove)

tagParagraph.Inlines.Remove(container);

In that method we will first go through the newly selected Tags and search for the corresponding buttons inside the RichTextBlock, when found we remove them.

After that we will be adding all new Tags.

var buttonIds = from item in tagParagraph.Inlines.Cast<InlineUIContainer>()
    select ((Button) item.Child).Name;

var tagsToAdd = from item in General.GetInstance().TagSelection.Tags
    where !buttonIds.Contains(item.Id)
    select item;

foreach (Tag tag in tagsToAdd)
{
    var container = new InlineUIContainer();
    RichTextBlock inlineRichTextBlock = new RichTextBlock() {IsTextSelectionEnabled = false};
    Paragraph inlineParagraph = new Paragraph();
    inlineParagraph.Inlines.Add(new Run() {Text = string.Format("{0} ", tag.Label), FontSize = 14});
    inlineParagraph.Inlines.Add(new Run()
    {
        Text = "\uE106",
        FontFamily = new FontFamily("Segoe UI Symbol"),
        FontSize = 10
    });
    inlineRichTextBlock.Blocks.Add(inlineParagraph);

    var tagButton = new Button()
    {
        Content = inlineRichTextBlock,
        Style = (Style)Application.Current.Resources["TagButtonStyle"],
        Name = tag.Id
    };
    tagButton.Click += OnTagButtonClicked;
    container.Child = tagButton;

    tagParagraph.Inlines.Add(container);

var buttonIds = from item in tagParagraph.Inlines.Cast<InlineUIContainer>()

select ((Button) item.Child).Name;

var tagsToAdd = from item in General.GetInstance().TagSelection.Tags

where !buttonIds.Contains(item.Id)

select item;

foreach (Tag tag in tagsToAdd)

{

var container = new InlineUIContainer();

RichTextBlock inlineRichTextBlock = new RichTextBlock() {IsTextSelectionEnabled = false};

Paragraph inlineParagraph = new Paragraph();

inlineParagraph.Inlines.Add(new Run() {Text = string.Format("{0} ", tag.Label), FontSize = 14});

inlineParagraph.Inlines.Add(new Run()

{

Text = "\uE106",

FontFamily = new FontFamily("Segoe UI Symbol"),

FontSize = 10

});

inlineRichTextBlock.Blocks.Add(inlineParagraph);

var tagButton = new Button()

{

Content = inlineRichTextBlock,

Style = (Style)Application.Current.Resources["TagButtonStyle"],

Name = tag.Id

};

tagButton.Click += OnTagButtonClicked;

container.Child = tagButton;

tagParagraph.Inlines.Add(container);

Again a bit the same concept as the removal. For each tag not yet in the current tag list, we create a new button with a specific style and add a click handler that will enable the removal. Once that button is created we add it to the RichTextBlock InlineUIContainer so it will show up on screen.

When the user presses the tag, the click event will fire an the selected tag will be removed from the list.

private void OnTagButtonClicked(object sender, RoutedEventArgs e)
{
    var tagId = ((Button) sender).Name;
    General.GetInstance().TagSelection.Tags.Remove(General.GetInstance().TagSelection.Tags.Single(item => item.Id.Equals(tagId)));
    this.SetTags();
}

private void OnTagButtonClicked(object sender, RoutedEventArgs e)

{

var tagId = ((Button) sender).Name;

General.GetInstance().TagSelection.Tags.Remove(General.GetInstance().TagSelection.Tags.Single(item => item.Id.Equals(tagId)));

this.SetTags();

}

The actual thing missing from the current implementation, is the fact that it’s not an real control yet… so if anyone feels the urge, please be my guest 🙂

Soure code can be found on my GitHub here…

This is how it looks!

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:

_dbConnection = new SQLiteConnection(dbName);

1	_dbConnection = new SQLiteConnection(dbName);

is not correct, you’ll need to put:

_dbConnection = new SQLiteConnection(_SQLitePlatformWinRT, dbName);

1	_dbConnection = new SQLiteConnection(_SQLitePlatformWinRT, dbName);

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:

StorageFile sqliteDB = await ApplicationData.Current.LocalFolder.GetFileAsync(dbName);

1	StorageFile sqliteDB = await ApplicationData.Current.LocalFolder.GetFileAsync(dbName);

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

196 #if NETFX_CORE 
197 			SQLite3.SetDirectory(/*temp directory type*/2, Windows.Storage.ApplicationData.Current.TemporaryFolder.Path); 
198 #endif

196 #if NETFX_CORE

197 SQLite3.SetDirectory(/*temp directory type*/2, Windows.Storage.ApplicationData.Current.TemporaryFolder.Path);

198 #endif

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:

_dbConnection = new SQLiteConnection(_SQLitePlatform, Path.Combine(_SQLitePlatform.DatabaseRootDirectory, dbName));

1	_dbConnection = new SQLiteConnection(_SQLitePlatform, Path.Combine(_SQLitePlatform.DatabaseRootDirectory, dbName));

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

Migrating from SL8.0 ProtectData to RT8.1 PasswordVault

Back in the SilverLight days when you created a Windows Phone app that needed to store user credentials, there was only one good way to do this!
You had to use the ProtectData class with it’s Protect and Unprotect methods.

The reference post about how to do this was given by Rob Tiffany here http://robtiffany.com/encrypting-your-credentials-on-windows-phone-7-5/!

But of course you now want to create a new Universal app and you wonder what the new way of storing credentials in a safe way is today… Well it’s called PasswordVault!
Read about it here http://msdn.microsoft.com/en-us/library/windows/apps/xaml/windows.security.credentials.passwordvault.aspx.

Big advantage of using PassworVault, is that it will roam the settings across devices! So in other word, if you first installed the Windows Phone app and entered your credentials. Than download the Windows Store app, you’ll no longer need to enter your credentials because the app uses the same Vault and can already read the needed info out of it!

Now let me show you how you implement these 2 options, so you’ll have a clear overview of how to migrate from one to the other.

First up, the use of ProtectData.
What I tend to do is protect all account data in one go by first creating a json string from the given data and storing that as a protected byte array inside a file on the Windows Phone.
Small note: the Account class in the examples below is just a small POCO with UserName and Password properties.

private void StoreHashedCredentials(List<Account> accountList, string fileName)
{
    string accountListJson = JsonConvert.SerializeObject(accountList);

    //Convert Password and Salt values to byte[] arrays
    byte[] accountsByte = Encoding.UTF8.GetBytes(accountListJson);

    //Encrypt Password and Salt byte[] arrays using Protect() method
    byte[] protectedAccountsByte = ProtectedData.Protect(accountsByte, null);

    //Save byte[] arrays as two files in Isolated Storage
    SaveToFile(protectedAccountsByte, fileName);
}

private void SaveToFile(byte[] encryptedPasswordData, string fileName)
{
    IsolatedStorageFile getApplicationFile = IsolatedStorageFile.GetUserStoreForApplication();
    if (getApplicationFile.FileExists(fileName))
        getApplicationFile.DeleteFile(fileName);

    IsolatedStorageFileStream fileAsStream = new IsolatedStorageFileStream(fileName, System.IO.FileMode.Create, FileAccess.Write, getApplicationFile);
    Stream writer = new StreamWriter(fileAsStream).BaseStream;
    writer.Write(encryptedPasswordData, 0, encryptedPasswordData.Length);
    writer.Close();
    fileAsStream.Close();
}

private void StoreHashedCredentials(List<Account> accountList, string fileName)

{

string accountListJson = JsonConvert.SerializeObject(accountList);

//Convert Password and Salt values to byte[] arrays

byte[] accountsByte = Encoding.UTF8.GetBytes(accountListJson);

//Encrypt Password and Salt byte[] arrays using Protect() method

byte[] protectedAccountsByte = ProtectedData.Protect(accountsByte, null);

//Save byte[] arrays as two files in Isolated Storage

SaveToFile(protectedAccountsByte, fileName);

}

private void SaveToFile(byte[] encryptedPasswordData, string fileName)

{

IsolatedStorageFile getApplicationFile = IsolatedStorageFile.GetUserStoreForApplication();

if (getApplicationFile.FileExists(fileName))

getApplicationFile.DeleteFile(fileName);

IsolatedStorageFileStream fileAsStream = new IsolatedStorageFileStream(fileName, System.IO.FileMode.Create, FileAccess.Write, getApplicationFile);

Stream writer = new StreamWriter(fileAsStream).BaseStream;

writer.Write(encryptedPasswordData, 0, encryptedPasswordData.Length);

writer.Close();

fileAsStream.Close();

}

When that is done, you’ll be able to read it out again when needed! Most of the time you’ll do this at app startup.

private void RetrieveHashedCredentials(out List<Account> accountList)
{
    accountList = new List<Account>();

    //Read byte[] arrays from files
    byte[] protectedAccountsByte = ReadFromFile(FileName);

    if (!ReferenceEquals(protectedAccountsByte, null))
    {
        //Decrypt Password and Salt byte[] arrays using Unprotect() method
        byte[] accountsByte = ProtectedData.Unprotect(protectedAccountsByte, null);

        //Convert byte[] arrays to strings and display in the text boxes
        string accountListJson = Encoding.UTF8.GetString(accountsByte, 0, accountsByte.Length);
        if (!string.IsNullOrEmpty(accountListJson))
            accountList = JsonConvert.DeserializeObject<List<Account>>(accountListJson);
    }
}

private byte[] ReadFromFile(string fileName)
{
    IsolatedStorageFile getApplicationFile = IsolatedStorageFile.GetUserStoreForApplication();
    byte[] data = null;

    if (getApplicationFile.FileExists(fileName))
    {
        IsolatedStorageFileStream fileAsStream = new IsolatedStorageFileStream(fileName, System.IO.FileMode.Open, FileAccess.Read, getApplicationFile);
        Stream reader = new StreamReader(fileAsStream).BaseStream;
        data = new byte[reader.Length];
        reader.Read(data, 0, data.Length);
        reader.Close();
        fileAsStream.Close();
    }

    return data;
}

private void RetrieveHashedCredentials(out List<Account> accountList)

{

accountList = new List<Account>();

//Read byte[] arrays from files

byte[] protectedAccountsByte = ReadFromFile(FileName);

if (!ReferenceEquals(protectedAccountsByte, null))

{

//Decrypt Password and Salt byte[] arrays using Unprotect() method

byte[] accountsByte = ProtectedData.Unprotect(protectedAccountsByte, null);

//Convert byte[] arrays to strings and display in the text boxes

string accountListJson = Encoding.UTF8.GetString(accountsByte, 0, accountsByte.Length);

if (!string.IsNullOrEmpty(accountListJson))

accountList = JsonConvert.DeserializeObject<List<Account>>(accountListJson);

}

private byte[] ReadFromFile(string fileName)

{

IsolatedStorageFile getApplicationFile = IsolatedStorageFile.GetUserStoreForApplication();

byte[] data = null;

if (getApplicationFile.FileExists(fileName))

{

IsolatedStorageFileStream fileAsStream = new IsolatedStorageFileStream(fileName, System.IO.FileMode.Open, FileAccess.Read, getApplicationFile);

Stream reader = new StreamReader(fileAsStream).BaseStream;

data = new byte[reader.Length];

reader.Read(data, 0, data.Length);

reader.Close();

fileAsStream.Close();

}

return data;

}

So you see it’s very easy to store a whole collection of account info in your isolated storage in a secure way!
Now when you upgrade your app to WP 8.1 RT, you’ll want to do this in a different way! By using the PasswordVault to ensure that your credentials are still stored in a secure way AND are roaming across devices.

When you want to use the PasswordVault in your app, you’ll need to select your own app key. Because everything stored and retrieved from the vault is done with that key! This is needed because otherwise, when linking your WP and Win Store app, you won’t be able to read out the same credentials.

Getting all credentials from the vault is done through the FindAllByResource method, supplying the app key. Do note that you’ll need to check for exceptions that can occur by doing this, because if the given app key is not yet present in the vault, you’ll get an exception!
After that, you’ll need to request the password for each credential that you got from the vault! Don’t forget this, because when using the FindAllByResource method the passwords will still be empty. Getting the password is done by using the RetrievePasword method.

private async Task InitializeSettingsService()
{
    _vault = new PasswordVault();
    IReadOnlyList<PasswordCredential> credentials = null;
    try
    {
        credentials = _vault.FindAllByResource(Constants.VAULTRESOURCENAME);
    }
    catch (Exception exception)
    {
        //Just catch the exception! When the vault has not yet setup a collection for the given resource, we get an exception!
    }

    if (credentials != null)
    {
        this.Accounts.Clear();
        foreach (var passwordCredential in credentials)
        {
            passwordCredential.RetrievePassword();
            this.Accounts.Add(new Account()
            {
                UserName = passwordCredential.UserName,
                Password = passwordCredential.Password
            });
        }
    }
}

private async Task InitializeSettingsService()

{

_vault = new PasswordVault();

IReadOnlyList<PasswordCredential> credentials = null;

try

{

credentials = _vault.FindAllByResource(Constants.VAULTRESOURCENAME);

}

catch (Exception exception)

{

//Just catch the exception! When the vault has not yet setup a collection for the given resource, we get an exception!

}

if (credentials != null)

{

this.Accounts.Clear();

foreach (var passwordCredential in credentials)

{

passwordCredential.RetrievePassword();

this.Accounts.Add(new Account()

{

UserName = passwordCredential.UserName,

Password = passwordCredential.Password

});

}

So now we already know how to get hold of everything in the vault, but how do we store or remove accounts?
Well there are 2 methods for this, Add and Remove, so as easy as that. Do note there is no Update method.

public async Task AddAccount(Account accountToAdd)
{
    //Reinitialize the vault to see if the given account is already available
    await this.InitializeSettingsService();
    Account accountFromVault = this.Accounts.FirstOrDefault(item => item.UserName.Equals(accountToAdd.UserName, StringComparison.OrdinalIgnoreCase));
            
    if(accountFromVault == null)
        _vault.Add(new PasswordCredential(Constants.VAULTRESOURCENAME, accountToAdd.UserName, accountToAdd.Password));

    if (accountFromVault != null && !accountFromVault.Password.Equals(accountToAdd.Password, StringComparison.Ordinal))
    {
        _vault.Remove(new PasswordCredential(Constants.VAULTRESOURCENAME, accountFromVault.UserName, accountFromVault.Password));
        _vault.Add(new PasswordCredential(Constants.VAULTRESOURCENAME, accountToAdd.UserName, accountToAdd.Password));
    }

    Account accountFromMemory = this.Accounts.FirstOrDefault(item => item.UserName.Equals(accountToAdd.UserName, StringComparison.OrdinalIgnoreCase));
    if (accountFromMemory != null)
    {
        if (!accountFromMemory.Password.Equals(accountToAdd.Password, StringComparison.OrdinalIgnoreCase))
        {
            this.Accounts.Remove(accountFromMemory);
            this.Accounts.Add(accountToAdd);
        }
    }
    else
        this.Accounts.Add(accountToAdd);
}

public async Task RemoveAccount(Account accountToRemove)
{
    //Reinitialize the vault to see if the given account is already available
    await this.InitializeSettingsService();
    Account accountFromVault = this.Accounts.FirstOrDefault(item => item.UserName.Equals(accountToRemove.UserName, StringComparison.OrdinalIgnoreCase));

    if (accountFromVault != null)
        _vault.Remove(new PasswordCredential(Constants.VAULTRESOURCENAME, accountToRemove.UserName, accountToRemove.Password));

    Account accountFromMemory = this.Accounts.FirstOrDefault(item => item.UserName.Equals(accountToRemove.UserName, StringComparison.OrdinalIgnoreCase));
    if (accountFromMemory != null)
        this.Accounts.Remove(accountFromMemory);
}

public async Task AddAccount(Account accountToAdd)

{

//Reinitialize the vault to see if the given account is already available

await this.InitializeSettingsService();

Account accountFromVault = this.Accounts.FirstOrDefault(item => item.UserName.Equals(accountToAdd.UserName, StringComparison.OrdinalIgnoreCase));

if(accountFromVault == null)

_vault.Add(new PasswordCredential(Constants.VAULTRESOURCENAME, accountToAdd.UserName, accountToAdd.Password));

if (accountFromVault != null && !accountFromVault.Password.Equals(accountToAdd.Password, StringComparison.Ordinal))

{

_vault.Remove(new PasswordCredential(Constants.VAULTRESOURCENAME, accountFromVault.UserName, accountFromVault.Password));

_vault.Add(new PasswordCredential(Constants.VAULTRESOURCENAME, accountToAdd.UserName, accountToAdd.Password));

}

Account accountFromMemory = this.Accounts.FirstOrDefault(item => item.UserName.Equals(accountToAdd.UserName, StringComparison.OrdinalIgnoreCase));

if (accountFromMemory != null)

{

if (!accountFromMemory.Password.Equals(accountToAdd.Password, StringComparison.OrdinalIgnoreCase))

{

this.Accounts.Remove(accountFromMemory);

this.Accounts.Add(accountToAdd);

}

else

this.Accounts.Add(accountToAdd);

}

public async Task RemoveAccount(Account accountToRemove)

{

//Reinitialize the vault to see if the given account is already available

await this.InitializeSettingsService();

Account accountFromVault = this.Accounts.FirstOrDefault(item => item.UserName.Equals(accountToRemove.UserName, StringComparison.OrdinalIgnoreCase));

if (accountFromVault != null)

_vault.Remove(new PasswordCredential(Constants.VAULTRESOURCENAME, accountToRemove.UserName, accountToRemove.Password));

Account accountFromMemory = this.Accounts.FirstOrDefault(item => item.UserName.Equals(accountToRemove.UserName, StringComparison.OrdinalIgnoreCase));

if (accountFromMemory != null)

this.Accounts.Remove(accountFromMemory);

}

So there you have it, everything you need to know to convert your apps!