.NET Tips and Tricks

Blog archive

Massaging Bound Data in WPF and Silverlight

I was recently asked by a WPF programmer how to modify a value passed between bound properties in a XAML file. You can't, for instance, integrate math into a binding expression, as this example does, to divide the value returned by 2:

<Image Height="100" Width="100" Name="MyImage" Source="Me.jpg" 
     Opacity="{Binding ElementName=MySlider, Path=Value/2}" /&rt;
This doesn't work, either:
<Image Height="225" Width="300" Name="CurrentImage" Source="Me.jpg" 
     Opacity="{Binding ElementName=MySlider, Path=Value}/2" /&rt;
While XAML gives you a lot of options when binding a property on one control to something else, modifying the data isn't allowed; at least, not directly. The answer is to use a custom converter. Programmers usually create converters to handle converting the data type of one property to the data type to another property (though XAML will handle a lot of conversions -- numerics to strings, for instance --on its own). But you can also use converters to massage the data in any way you want. This example, for instance, binds the Opacity setting for an Image control to the value in a slider control:
<Slider Margin="10" Name="MySlider" Minimum="0.0" 
     Maximum="2" Value="0.5"/&rt; 
<Image Height="100" Width="100" Name="MyImage" Source="Me.jpg" 
     Opacity="{Binding ElementName=MySlider, Path=Value}" /&rt;

Let's say that you want the transparency to be one-half of the value in the Slider: a converter will solve the problem. This converter, for instance, divides the number passed to it by 2 in its Convert method:

[ValueConversion(typeof(int), typeof(int))]
public class Divider : IValueConverter
{
    public object Convert(object value, Type targetType, 
        object parameter, System.Globalization.CultureInfo culture)
    {
        return object/2;
    }
    public object ConvertBack(object value, Type targetType, 
        object parameter, System.Globalization.CultureInfo culture)
    {
        return object * 2;        
    }
}

You need to do three things to use your converter. First, define a namespace for your converter (I've assumed that the converter is in the same project as the XAML file and the namespace for the project is MyApp):

<Window x:Class="MyClass"
  …
  xmlns:current="clr-namespace:MyApp"&rt;

Then you have to add your converter to your resources. I'm adding this converter to the Window's resources with the key MyDivider:

<Window.Resources&rt;
  <current:Divider x:Key="MyDivider"/&rt;
</Window.Resources&rt;

Finally, invoke your converter by passing the resource's key to the StaticResource object's constructor to retrieve it from the resources collection, and then passing that result to the Binding object's Converter property, like this:

<Image Height="100" Width="100" Name="MyImage" Source="Me.jpg" 
       Opacity="{Binding ElementName=MySlider, Path=Value 
               Converter={StaticResource MyDivider}}

Posted by Peter Vogel on 08/09/2012 at 1:16 PM


comments powered by Disqus

Featured

  • GitLab Takes Over VS Code Extension, Plans Improvements

    DevOps specialist GitLab has officially taken over the control of a GitLab extension for Microsoft's open source, cross-platform Visual Studio Code editor.

  • VS Code Python Tool Now Does Native Notebooks

    The Python Extension for VS Code Insiders team is previewing the newest implementation of notebooks, used frequently in data science with offerings such as Jupyter Notebooks.

  • As .NET 5 Nears, Content/Documentation Reorganization Starts

    A GitHub project is seeking to reorganize documentation and developer content in advance of the November debut of .NET 5, a unification of all things .NET that combines. .NET Core and other components.

  • Windows Devs Get Cross-Platform Page, Issues Repo

    Developers doing their coding on the Windows OS have received two new resource gifts from Microsoft: a new landing page for those using cross-platform technologies and a new GitHub repo with which to report issues to Windows engineering teams.Developers doing their coding on the Windows OS have received two new resource gifts from Microsoft: a new landing page for those using cross-platform technologies and a new GitHub repo with which to report issues to Windows engineering teams.

  • What's New in Entity Framework Core 5.0 Preview 7

    Microsoft shipped the seventh preview of Entity Framework Core 5.0, boosting its data access technology with a factory to create DbContext instances and more.

.NET Insight

Sign up for our newsletter.

Terms and Privacy Policy consent

I agree to this site's Privacy Policy.

Upcoming Events