WP8 - Binding a value with a float to String conversion

Question

I have a couple of gauges in my app, and I can't figure out how to add a converter to the text binding. I read a couple of guides on msdn but I didn't manage to figure that out (I've been coding for WP8 for just a couple of weeks).

This is is a piece of the gauge:

<gauges:MarkerGaugeIndicator Value="0" 
                                             gauges:LinearGaugeRange.IndicatorOffset="35"
                                             x:Name="GaugeBarValore"
                                             IsAnimated="True">
                                    <gauges:MarkerGaugeIndicator.MarkerTemplate>
                                        <DataTemplate>
                                            <Grid Width="73" Height="35" UseLayoutRounding="False" d:LayoutRounding="Auto" Margin="10,-2,0,0">
                                                <TextBlock x:Name="GaugeBarPercent" Text="{Binding}"
                                           HorizontalAlignment="Center"
                                           VerticalAlignment="Center"
                                           FontSize="20"
                                           FontWeight="Thin" Margin="6,4,32,4" Width="35"/>
                                                <Grid.RenderTransform>
                                                    <CompositeTransform Rotation="90" TranslateX="49" TranslateY="12" />
                                                </Grid.RenderTransform>
                                            </Grid>
                                        </DataTemplate>
                                    </gauges:MarkerGaugeIndicator.MarkerTemplate>
                                </gauges:MarkerGaugeIndicator>

The binding itself works, but I can see a lot of decimal numbers while the value moves from a round value to another. I want to add a converter like this method:

private String double2String(double valore)
    {
        return Convert.ToString(Math.Round(valore)) + "%";
    }

I just don't know where to put this method and how to add this as a converter inside the binding.

Thank you for your help! :) Sergio

Answer 1

Create a class to hold your Converter method that implements IValueConverter interface, Example class is bellow. You have to implement method Convert and ConvertBack.

public class DoubleToString : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return Math.Round((double)value).ToString() + "%";
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return double.Parse(value as string);
    }
}

then add the namespace to your XAML page.

xmlns:convert="clr-namespace:Your_project_name"

Next add your converter as a Resource type i to your XAML page..

<phone:PhoneApplicationPage.Resources>
    <convert:DoubleToString x:Key="DoubleConvert" />
</phone:PhoneApplicationPage.Resources>

The x:Key value is the name we are going to call in our binding statement.

Then perform the data binding. I have a simple slider and a textblock with sliders value bound to the textblocks Text property

<StackPanel>
        <Slider Name="slider" Maximum="100" Minimum="0"  />
        <TextBlock Text="{Binding Value, ElementName=slider, Converter={StaticResource DoubleConvert}}" />
</StackPanel>

Answer 2

Define this converter as a resource in your parent view

<UserControl.Resources>
        <local:double2String x:Key="convertDouble" />
</UserControl.Resources>

And add it to the binding

<TextBlock x:Name="GaugeBarPercent" Text="{Binding, Converter={StaticResource convertDouble}}"

Don't forget to import the namespace where the converter is defined to your view

xmlns:local="clr-namespace:YOUR_NAMESPACE"

Answer 3

The easier way is to use StringFormat. Like this:

<Label Text="{Binding Path=SomeProperty, StringFormat='{0:F2}%' }"/>