XAML Conditional Binding in DataTemplate

Question

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?

You could bind the 'Visibility' property of the TextBlock to the same property (Additional) and write your own IValueConverter — Flat Eric, Apr 22 '14 at 11:13

score 4 · Accepted Answer · answered Apr 22 '14 at 11:20

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>

Logray · Answer 2 · 2016-06-26T19:20:10.787

4

Based on Flat Eric's suggestion - fields can be bound to the IsVisible property:

<Label IsVisible="{Binding Foo}" Text="{Binding Foo}"/>

When the value is null the Label is hidden.

edited Jun 26 '16 at 19:20

answered Jun 26 '16 at 12:22

Logray

41
3

score 3 · Answer 3 · edited May 23 '17 at 12:01

To collapse the TextBlock when Additional property is not available, try to bind TextBlock's Visiblity property with TargetNullValue set to Collapsed. I would suggest something like this :

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

But turned out it doesn't work for me, for a reason I don't know. But binding this way did the trick :

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

Related questions :

Geerten · Answer 4 · 2014-04-22T11:20:00.720

You can edit the style of the textblock and set the visibility to collapsed or visible based on the value of the binding. The latter can be done using datatriggers. It will be easier if you create a property ShowAdditional, which returns true or false, based on the value of the binding. This way you can easily customize when to show it or not.

As follows:

<TextBlock Text="{Binding Additional}" Grid.Column="0" Grid.ColumnSpan="2"  Grid.Row="2" TextWrapping="Wrap" Height="auto" Margin="0,0,10,20">
   <TextBlock.Style>
      <Style TargetType="TextBlock">
         <Style.Triggers>
           <DataTrigger Binding="{Binding ShowAddition}" Value="True">
             <Setter Property="Visibility" Value="Visible" />
           </DataTrigger>
           <DataTrigger Binding="{Binding CameraState}" Value="False">
             <Setter Property="Visibility" Value="Collapsed" />
           </DataTrigger>
         </Style.Triggers>
      </Style>
   </TextBlock.Style>
</TextBlock>

With visiblity set to collapsed, the entire element will be collapsed, including its margin.

score 0 · Answer 5 · answered Apr 22 '14 at 11:15

You can try use the BindingBase.TargetNullValue for this:

<TextBlock Margin="{Binding Path=MyMargin, TargetNullValue=0}" />

Beforehand to create a property MyMargin of Thickness? type with some default value. If value of MyMargin will be null value, then value take from TargetNullValue.

XAML Conditional Binding in DataTemplate

5 Answers5