Iris Classon
Iris Classon - In Love with Code

WinRT app guide: Step 11: Using a valueconverter to work with element visibility

To read the other steps in the step by step guide for creating a Metr0/ WInRT application go here

We are getting closer now! We need to add function to add and edit category names.

To do this I’ve added a neat field within the edit field that is bound to the selected listview item, all this is in XAML wich is great, it saves us from more mess in the codebehind. Now, whenever the category name is edited it will be updated. If a new item is added with a new category, the new category is also added. Unfortunatly for now the category will only be updated for that item - just to keep it very simple for now.

The new layout :)

Now, I’ve also rearranged the layout, this to make sure that the application supports the minimum requirement when it comes to resolution. We will have to tweek this more later, but in case we forget this will work for now.

Working with resolutions in Windows Store Apps

In order to save us up some space the edit field for the category is only visible when the toggle button is on. Believe it or not, this is XAML only - and a converter. We have added a bool to visibility converter to handle the visibility of the category field based on the state of the toggle switch. Neat, isn’t it?

[sourcecode language="csharp”]
using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Data;

namespace Mihsp.Common
public sealed class BooleanToVisibilityConverter : IValueConverter

    public object Convert(object value, Type targetType, object parameter, string language)  
        return (value is bool && (bool)value) ? Visibility.Visible : Visibility.Collapsed;  

    public object ConvertBack(object value, Type targetType, object parameter, string language)  
        return value is Visibility && (Visibility)value == Visibility.Visible;  


Reference the converter
[sourcecode language="XML”]

<Common:BooleanToVisibilityConverter x:Key="BoolToVis” />

Using the Converter
[sourcecode language="XML”]
Visibility=”{Binding ElementName=toggle, Path=IsOn, Converter={StaticResource BoolToVis}}”

This is all for today, I had way more to show, but will wait with that for next blog post to keep the steps small.

Next time we will implement asyncronous CRUD with SQLite, as if you ran the application from last time, you might have noticed some funny behaviour ;) I want to show the importance of asyncronous operations, and we need a before and after for that as I mentioned last time.


Leave a comment (via email)

Last modified on 2012-10-10