How to hide the empty TextBlock?

wpf

In the XAML provided below, I don't have the value for Phone sometimes. When that happens, the value is missing, but the TextBlock is still occupying the space in the panel. I want to hide empty TextBlocks from taking space in the StackPanel.

Here's the XAML:

<StackPanel>
    <TextBlock Text="{Binding Path=FirstName}" />
    <TextBlock Text="{Binding Path=LastName}" />
    <TextBlock Text="{Binding Path=Phone}" />
    <TextBlock Text="{Binding Path=Email}" />
</StackPanel>

I've read this article, but the accepted answer doesn't work for me:

<StackPanel>
    <TextBlock Text="{Binding Path=FirstName}" />
    <TextBlock Text="{Binding Path=LastName}" />
    <TextBlock Text="{Binding Path=Phone}">
        <TextBlock.Style>
            <Style TargetType="TextBlock">
                <Style.Triggers>
                    <Trigger Property="Text" Value="{x:Null}">
                        <Setter Property="Visibility" Value="Collapsed" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </TextBlock.Style>
    </TextBlock>
    <TextBlock Text="{Binding Path=Email}" />
</StackPanel>

Am I making a mistake somewhere, or is the accepted answer wrong? What should I do to achieve my goal?

You probably need to use:

<Style TargetType="TextBlock">
        <Style.Triggers>
            <Trigger Property="Text" Value="">
                <Setter Property="Visibility" Value="Collapsed" />
            </Trigger>
        </Style.Triggers>
</Style>

or maybe both:

<Style TargetType="TextBlock">
        <Style.Triggers>
            <Trigger Property="Text" Value="">
                <Setter Property="Visibility" Value="Collapsed" />
            </Trigger>
            <Trigger Property="Text" Value="{x:Null}">
                <Setter Property="Visibility" Value="Collapsed" />
            </Trigger>
        </Style.Triggers>
</Style>

Instead of introducing a style just for this, for this sort of thing I tend to prefer using a converter that will handle a null or empty string.

<TextBlock Text="{Binding Foo}"
           Visibility="{Binding Foo, 
                        Converter={StaticResource StringToVisibilityConverter}}" />

Where StringToVisibilityConverter is defined like this:

[ValueConversion(typeof(string), typeof(Visibility))]
public class StringToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (string.IsNullOrEmpty((string)value))
        {
            return Visibility.Collapsed;
        }
        else
        {
            return Visibility.Visible;
        }
    }

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

You can use a DataTrigger:

<TextBlock Text="{Binding Path=Title}">
    <TextBlock.Style>
       <Style TargetType="TextBlock">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Title}" Value="{x:Null}">
                    <Setter Property="Visibility" Value="Collapsed" />
                </DataTrigger>
            </Style.Triggers>
       </Style>
    </TextBlock.Style>
</TextBlock>

How to hide the empty TextBlock?

Related

Recent Posts