HisTech Up

Walkthrough: Data Binding for UWP – Part 2 – Converters

Introduction

user

Christian Hissibini

I am a Tech enthusiast who loves to blend Dev & Design on Web and Mobile Platforms. I am also a Windows Platform Dev MVP


LATEST POSTS

Xamarin: Stratégie de partage de code pour iOS et OS X 10th April, 2016

Walkthrough: Data Binding for UWP – Part 3 – Compiled Binding 31st March, 2016

Non classé

Walkthrough: Data Binding for UWP – Part 2 – Converters

Posted on .

Create a converter

If you run the code now you’ll note that the red Border (the BadassStatus) is visible for all the Aliens. However, we need to display it only when the Power exceeds 500. To address we’re going to use a little trick.  We going to add a Converter to the Page.Resources that will let us give us back Visible if there is the Power exceeds 500 and Collapsed otherwise.

To do this Add a New Folder to the Project call it Converters.  Then Add a new Class to the Converters folder called BadAssToVisible.cs.  Here is the code that you should add replacing the generated namespace and class.

using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Data;
 
namespace DataBindingHOL.Converters
{
    public class BadAssToVisible : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string culture)
        {
            return (int) value > 500 ? Visibility.Visible : Visibility.Collapsed;
            
        }
 
        public object ConvertBack(object value, Type targetType,
            object parameter, string culture)
        {
            throw new NotImplementedException();
        }
    }
}

Now go back to the MainPage.xaml file.

Add the following to the Page attributes.

xmlns:converters="using:DataBindingHOL.Converters"

 

And then, in order to use the Converter in our XAML we need to load it so add the following right before the Grid.


        


Now let’s use the converter.  To do this use a  Binding on Visibility attribute of the right-hand Border control – BadassStatus – The Border should now look like this:


We are done!

profile

Christian Hissibini

I am a Tech enthusiast who loves to blend Dev & Design on Web and Mobile Platforms. I am also a Windows Platform Dev MVP

There are no comments.

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

View Comments (0) ...
Navigation