C# – XAML Conditional Binding in DataTemplate

cwpfxaml

I have a DataTemplate for a ListView in XAML:

    <DataTemplate x:Key="ResultItemTemplate">
        <Grid Grid.Column="2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="auto" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="auto" />
                    </Grid.RowDefinitions>
                    <TextBlock Text="{Binding Name}" 
                               Margin="0,10,20,0" 
                               Grid.Column="0"
                               Grid.Row="0"/>

                    <TextBlock Text="{Binding TimeStamp}" 
                               Margin="0,10,10,0" 
                               Grid.Column="1"
                               Grid.Row="0"/>

                    <TextBlock Text="{Binding Text}" 
                               Grid.Column="0"
                               Grid.ColumnSpan="2"
                               Grid.Row="1"
                               TextWrapping="Wrap" 
                               Height="auto"
                               Margin="0,0,10,10"/>

                    <TextBlock Text="{Binding Additional}" 
                               Grid.Column="0"
                               Grid.ColumnSpan="2"
                               Grid.Row="2"
                               TextWrapping="Wrap" 
                               Height="auto"
                               Margin="0,0,10,20" />
                </Grid>
        </DataTemplate>

So applying this DataTemplate to my ListView, the Additional TextBlock is not present in every list item.

However the spacing exists for the Additional TextBlock whether the DataBinding value is null or not.
How do I get the text block to only be added when the 'Additional' Binding property exists?

Best Answer

This is your Converter:

namespace ValueConveters
{
    public class NullToVisibilityConverter : IValueConverter
    {
        public object Convert(object value, System.Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return value == null ? Visibility.Collapsed : Visibility.Visible;
        }

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

And this is your XAML: put this in your root element:

xmlns:conveters="clr-namespace:ValueConveters"

and then this in your Resources:

<conveters:NullToVisibilityConverter x:Key="NullToVisibilityConverter"/>
<DataTemplate x:Key="ResultItemTemplate">
    <Grid Grid.Column="2">
       <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*" />
          <ColumnDefinition Width="auto" />
       </Grid.ColumnDefinitions>
       <Grid.RowDefinitions>
          <RowDefinition Height="auto" />
          <RowDefinition Height="*" />
          <RowDefinition Height="auto" />
       </Grid.RowDefinitions>
       <TextBlock Text="{Binding Name}" 
           Margin="0,10,20,0" 
           Grid.Column="0"
           Grid.Row="0"/>
       <TextBlock Text="{Binding TimeStamp}" 
           Margin="0,10,10,0" 
           Grid.Column="1"
           Grid.Row="0"/>
       <TextBlock Text="{Binding Text}" 
           Grid.Column="0"
           Grid.ColumnSpan="2"
           Grid.Row="1"
           TextWrapping="Wrap" 
           Height="auto"
           Margin="0,0,10,10"/>
       <TextBlock Text="{Binding Additional}" 
           Visibility="{Binding Additional,Converter={StaticResource NullToVisibilityConverter}}"
           Grid.Column="0"
           Grid.ColumnSpan="2"
           Grid.Row="2"
           TextWrapping="Wrap" 
           Height="auto"
           Margin="0,0,10,20" />
    </Grid>
</DataTemplate>
Related Topic