Visibility binding on child element in treeviewitem

Question

Hi I'm trying to bind the visibility using a trigger, visibility should be hidden when the image object is null.

<Style TargetType="{x:Type local:DirectoryTreeView}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:DirectoryTreeView}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <TreeView Name="PART_DirectoryTree">
                            <TreeView.ItemContainerStyle>
                                <Style TargetType="TreeViewItem">
                                    <Setter Property="IsExpanded" Value="{Binding StartExpanded}"></Setter>
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding Path=Source, Source=Icon}">
                                            <Setter Property="Visibility" Value="Hidden"></Setter>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </TreeView.ItemContainerStyle>
                            <TreeView.ItemTemplate>
                                <HierarchicalDataTemplate ItemsSource="{Binding Children}">
                                    <StackPanel Orientation="Horizontal">
                                        <Image Name="Icon" Width="16" Height="16" Source="{Binding Image}"/>
                                        <TextBlock Text=" "></TextBlock>
                                        <TextBlock Text="{Binding HeaderText}"></TextBlock>
                                    </StackPanel>
                                </HierarchicalDataTemplate>
                            </TreeView.ItemTemplate>
                        </TreeView>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

So far i've tried both a trigger and a datatrigger, the first time I tried using the targetname property on the setter in the datatrigger, but then I got a compiler error.

Not working ==>

<datatrigger binding={binding Image}>
   <setter targetname="Icon" property="Visibility" value="Hidden"/>
</datatrigger>

Anybody that can tell me how this binding needs to be done properly?

Answer 1

You can create the default Image and use the TargetNullValue, if the Source will be null:

<BitmapImage x:Key="ErrorImage" UriSource="Images/Error.png" />

<Image Source="{Binding Path=Image,
                        TargetNullValue={StaticResource ErrorImage}}" />

If you approach it, it will be easier to use than a Converter.

Answer 2

I've solved this using an entire different approach, using a value converter on the image.

public class VisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var hiddenType = parameter.ToString().ToLowerInvariant() == "collapsed"
            ? Visibility.Collapsed
            : Visibility.Hidden;
        return value == null ? hiddenType : Visibility.Visible;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new Exception("Cannot convert back from visibility to object.");
    }
}

As I don't seem to find a viable way to do binding the way I would like, (probably it's not meant for that anyway) this is a nice solution.

<Image Visibility="{Binding Image,ConverterParameter=Collapsed, Converter={StaticResource VisibilityConverter}}" Width="16" Height="16" Source="{Binding Image}"/>