通过绑定设置元素的可见性

Question

I got an UIElement with several Canvas which I want to show or hide depending on certain circumstances. I want this to be seen in the designer as well as when the program is running. I tried several Bindings and also the BooleanToVisibilityConverter. But I'm stuck and can't find my error. So here's the code:

UIElement (with only two Canvas; I got the responding properties in the partial Class)

<component:AbstractComponent x:Class="View.LineComponent"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:component="clr-namespace:View"
         x:Name="userControl" Width="70" Height="10"
>
    <component:AbstractComponent.Resources>
        <BooleanToVisibilityConverter x:Key="VisibilityConverter" />
    </component:AbstractComponent.Resources>
    <Canvas Width="{Binding ElementName=userControl, Path=ActualWidth}">
        <Canvas Name="Line"
            Height="{Binding ElementName=userControl, Path=ActualHeight}"
            Width="{Binding ElementName=userControl, Path=ActualWidth}"
            Visibility="{Binding LineVisible, Converter={StaticResource VisibilityConverter}, FallbackValue=Hidden}"
            >
            <!-- Lot of stuff; Not interesting for the question-->
        </Canvas>
        <Canvas Name="Arrow"
            Height="{Binding ElementName=userControl, Path=ActualHeight, TargetNullValue=6.397, FallbackValue=6.397}"
            Width="{Binding ElementName=userControl, Path=ActualWidth, TargetNullValue=16.688, FallbackValue=16.688}"
            Visibility ="{Binding ArrowVisible, Converter={StaticResource VisibilityConverter}, FallbackValue=Hidden}"
            >
            <!-- Lot of stuff; Not interesting for the question-->
        </Canvas>
    </Canvas>
</component:AbstractComponent>

Usage in ParentWindow

<component:LineComponent Height="50" Canvas.Top="100" Width="50" Canvas.Left="50" LineVisible="True"/>

<component:LineComponent Height="50" Canvas.Top="200" Width="50" Canvas.Left="50" ArrowVisible="True"/>

I expect that in the first case the Line -Canvas is shown while in the other the Arrow -Canvas is shown. They both stay Hidden though. I also tried a different approach, declaring the LineVisible and ArrowVisible properties directly in the C#-Code but that didn't work either. Any ideas?

Answer 1

Your LineVisible and ArrowVisible bindings do not have a source set, so will use the DataContext as source. You will make life easier for yourself if you set the DataContext of your root Canvas element to the user control allowing you to omit all the repeated ElementName bindings, as described in this blog post I wrote .