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!

TagList

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.

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.

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.

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!

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 🙂

MVVM binding a ListView to an Enum with translation

Sometimes we need to visualize a list of enum values to the user, so he can make a
selection and if possible we would like to make this reusable for any enum used in our app.

But there are some problems when we would try to get this done… Enums are great for storing some kind of selection, but they are not easy to use in an MVVM list binding scenario! Certainly not if they need to be presented in a readable manner nor while different languages are supported.

But there is a way to get this done! Let me show you a solution while using a Windows Phone 8.1 store app, but the code will also work in Windows 8 store app and most of it will also run in a Windows Phone Silverlight app.

The enum we will be using…

The setup of this example is simple, we have a page with a ListView that’s bound to an enum in our ViewModel.

You’ll notice that the ItemSource is not binding to some collection! It’s the actual type of the enum and through the user of a converter we will return the needed display values. We are also showing the selected value inside a textblock, to show you that we are really getting an enum value!

In our ViewModel we have following properties.

The actual enum will be returned through the SelectionType property and the return type is System.Type. Also when the ListView has a selected index change, you’ll see that we’re using that current selected index to determine what enum value was actually chosen and we set that to the SelectedValue property.

So how do you initialize this, just by getting the type of your enum! In this example we init it in our constructor.

Now a ListView can’t do anything with an enum type, so we need to convert this in our EnumTypeToListConverter. The actual convert part looks like this.

We get the enum type as value parameter and use this to get all values of the given type through use of the general Enum.GetValues method. With this we have all values that the given enum has, but these aren’t yet usable to present inside the app! To fix this, we use a resource loader to get a nice display value for each enum value from the current loaded language resource! Finally we convert this to a list and return it to the ListView.

For this all to work you’ll need to add some resource files for each language you are going to support and inside each resource file you’ll need to add a display value for each enum value.

In our case we are using following format [enum type name]_[enum value]. So for our gender enum this gives following resource entries. For adding these resources, take a look at this good explanation here…

image

With all this in place you’ll get following result

 

As always a complete working version can be found on my github here…