CODEWITHSUNDEEP
wpfdata-bindingmvvm
Jeff LaFay
Jeff LaFay

Reputation: 13350

WPF Data Binding and Formatting

I have a bool property in my ViewModel called IsConnected and I would like to bind it to a TextBlock in my MainWindow. Rather than have the textblock read true or false I need it to say Connected or Disconnected instead. Forgive me because I'm new to WPF. If someone could give me a head start I can take it from there but I'm not sure how to figure out what I need.

Upvotes: 2

Views: 674

Answers (5)

Robert Rossney
Robert Rossney

Reputation: 96702

I'd generally prefer to just add a property to the view model (I really dislike value converters), but here's a simple way to accomplish what you're trying to do using a style:

<TextBlock>
  <TextBlock.Style>
    <Style TargetType="TextBlock">
      <Setter Property="Text" Value="Connected"/>
      <Style.Triggers>
        <DataTrigger Binding="{Binding IsConnected}" Value="False">
          <Setter Property="Text" Value="Disconnected"/>
        </DataTrigger>
      </Style.Triggers>
    </Style>
  </TextBlock.Style>
</TextBlock>

Edit

Note that once you get used to using data triggers, you can make all kinds of modifications to your view without touching your view model. For instance:

<StackPanel>
   <Image Source="images\connected.png">
     <Image.Style>
        <Style TargetType="Image">
           <Setter Property="Visibility" Value="Collapsed"/>
           <Style.Triggers>
              <DataTrigger Binding="{Binding IsConnected}" Value="True">
                <Setter Property="Visibility" Value="Visible"/>
              </DataTrigger>
           </Style.Triggers>
        </Style>
     </Image.Style>
  </Image>
   <Image Source="images\disconnected.png">
     <Image.Style>
        <Style TargetType="Image">
           <Setter Property="Visibility" Value="Collapsed"/>
           <Style.Triggers>
              <DataTrigger Binding="{Binding IsConnected}" Value="False">
                <Setter Property="Visibility" Value="Visible"/>
              </DataTrigger>
           </Style.Triggers>
        </Style>
     </Image.Style>
  </Image>
</StackPanel>

Upvotes: 2

GaryX
GaryX

Reputation: 737

Using ViewModel, you write two property wrap, and notify changes in the real property.

So that whenever the value is changed, you the string representation will update and bind to controls, while you can still use the bool property in the code.

public string IsConnectedStr{
  get{
    return IsConnected?"Connected":"Disconnected";
  }
}

public bool IsConnected{
   get{
     return _isConnected;
   }
   set{
     _isConnected=value;
     PropertyChanged("IsConnected");
     PropertyChanged("IsConnectedStr");
   }
}

Upvotes: 1

ThomasAndersson
ThomasAndersson

Reputation: 1904

Easiest way is probably to create a custom converter which converts your bool value to a string. Search anywhere for IValueConverter and/or WPF.

public class BoolToConnectedConverter : IValueConverter
{
    #region IValueConverter Members

    public object Convert(object value, Type targetType, object parameter,
        System.Globalization.CultureInfo culture)
    {
       if((bool)value)
             return "Connected";
       else
             return "Disconnected";
    }

    public object ConvertBack(object value, Type targetType, object parameter,
        System.Globalization.CultureInfo culture)
    {
        throw new NotSupportedException();
    }

    #endregion
}

add xmlns:

xmlns:converter="clr-namespace:MyProjectNameSpace"

add resource to XAML (change to whatever element needed)

<Window.Resources>
  <converter:BoolToConnectedConverter x:Key="connectedConverter" />
</Window.Resources>

in XAML:

<TextBlock Text={Binding IsConnected, Converter={StaticResource connectedConverter}" />

Upvotes: 4

James Kovacs
James Kovacs

Reputation: 11651

Take a look at value converters.

http://www.wpftutorial.net/ValueConverters.html

public class BoolToConnectedConverter : IValueConverter
{
    public object Convert(object value, Type targetType, 
        object parameter, CultureInfo culture)
    {
        var isConnected = (bool)value;
        return isConnected ? "Connected" : "Disconnected";
    }

    public object ConvertBack(object value, Type targetType, 
        object parameter, CultureInfo culture)
    {
        throw new NotImplementedException("Not required for read-only values");
    }
}

In your XAML:

<Window.Resources>
    <l:BoolToConnectedConverter x:Key="boolToConnectedConverter" />
</Window.Resources>
<Grid>
    <Label Content="{Binding IsConnected, Converter={StaticResource boolToConnectedConverter}}" />
</Grid>

Upvotes: 0

Magnus Gudmundsson
Magnus Gudmundsson

Reputation: 556

You could do this in two ways

1) Write a converter

2) Change the function in the ViewModel so that it returns the desired string instead of a bool

The easiest way is #2, but if you really need the bool value somewhere else in your code you go with #1 (google converter and wpf)

Upvotes: 0

Related Questions