How to hide a control if the underlying DataContext is null?

Question

I have an object in my view model that has a bunch of properties, some of them will occasionally be null. I don't want to just show some controls if these particular controls are null. How would I go about hiding the control if the bind is null? I was thinking of some sort of converter, but don't know how I'd go about doing it exactly. Any ideas?

edit: sorry, I should mention that this will also be in Silverlight, so I'm not sure if Style triggers would work...?

Answer 1

Have a converter like follows,

public sealed class NullToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value == null ? Visibility.Hidden: Visibility.Visible;
    }

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

Now, bind the property with the Visibility property as well. Like,

<ListBox ItemsSource="{Binding Path=Squad}" 
         Visibility="{Binding Converter={StaticResource nullToVisibilityConverter}, 
                              Path=Squad}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <CheckBox Content="{Binding}" />
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Answer 2

This approach is easier:

<CheckBox Visibility="{Binding Path=checkedField, TargetNullValue=Collapsed }">

When the bound property checkedField is null, the Visibility will be set to Collapsed.

Answer 3

I also needed this for a WindowsPhone WinRT app. I ended up using @PrinceAshitaka's converter with a minor modification in the binding as suggested in this answer to a similar question

You should use FallbackValue=Collapsed to avoid showing the control precisely when the datacontext is null. Not sure why TargetNullValue=Collapsed didn't work for me.

Visibility="{Binding Converter={StaticResource NullToVisibilityConverter}, FallbackValue=Collapsed}"

Answer 4

In Silverlight you can use next approach - add trigger to control:

<i:Interaction.Triggers>
    <core:DataTrigger Binding="{Binding SomeProperty}" Comparison="Equal" Value="{x:Null}">
        <core:ChangePropertyAction PropertyName="Visibility" Value="Collapsed" />
    </core:DataTrigger>
</i:Interaction.Triggers>

Answer 5

You could use the DataContextChanged event, when the DataContext is null you could set the Visbility to Collapsed

read more about it here

Answer 6

Needed this, but I couldn't get it to work within a DataTemplate inside a DataGridTemplateColumn, so here is my example of how I got it to work.

 <DataGridTemplateColumn>
     <DataGridTemplateColumn.CellTemplate>
         <DataTemplate>
            <ComboBox ItemsSource="{Binding Path=DataContext.AvailableHierarchies, 
                                            RelativeSource={RelativeSource FindAncestor, 
                                            AncestorType={x:Type ItemsControl}} }"
                      DisplayMemberPath="Name"
                      SelectedItem="{Binding Path=DataContext.SelectedHierarchy, 
                                             RelativeSource={RelativeSource FindAncestor, 
                                             AncestorType={x:Type ItemsControl}},UpdateSourceTrigger=PropertyChanged }"
                                      >
            <ComboBox.Style>
                <Style TargetType="ComboBox" BasedOn="{StaticResource {x:Type ComboBox}}">
                    <Style.Triggers>
                        <Trigger Property="ComboBox.ItemsSource" Value="{x:Null}">
                            <Setter Property="Visibility" Value="Collapsed"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </ComboBox.Style>
        </ComboBox>
    </DataTemplate>
</DataGridTemplateColumn.CellTemplate>