CODEWITHSUNDEEP
c#wpfxaml
BradStevenson
BradStevenson

Reputation: 1994

XAML Conditional Binding in DataTemplate

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?

Upvotes: 1

Views: 12394

Answers (5)

Logray
Logray

Reputation: 41

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.

Upvotes: 4

har07
har07

Reputation: 89285

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 :

Upvotes: 3

csharpwinphonexaml
csharpwinphonexaml

Reputation: 3683

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>

Upvotes: 4

Geerten
Geerten

Reputation: 1057

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.

Upvotes: 0

Anatoliy Nikolaev
Anatoliy Nikolaev

Reputation: 22702

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.

Upvotes: 0

Related Questions