WPF - Bind UserControl visibility to a property

Question

I have a ListView bound to ObservableCollection. Data are loaded from the internet and then added to collection. The download takes few seconds and I want to indicate user that the data is loading.

I created an UserControl that indicates activity. I placed it inside of ControlTemplate.

<ControlTemplate x:Key="ListViewControlTemplate1" TargetType="{x:Type ListView}">
    <Grid>
        <local:ActivityIndicatorControl 
            HorizontalAlignment="Center" 
            Height="Auto" 
            Margin="0" 
            VerticalAlignment="Center"/>
    </Grid>
</ControlTemplate>

I would like to bind Visibility of ActivityIndicatorControl to a property, let's say bool IsLoading and set it to Visible/Collapsed correspondingly.

Thanks!

score 31 · Accepted Answer · edited Jun 01 '20 at 04:26

31

I would recommend using a IValueConverter to accept your boolean, and return a member of Visibility enumeration.

Here is a good example of one: http://jeffhandley.com/archive/2008/10/27/binding-converters---visibilityconverter.aspx

The XAML would look like this:

First you define a resource for the converter (put this in a resource dictionary):

<local:BooleanToVisibilityConverter x:Key="myBoolToVisibilityConverter" />

And then change your template like this:

<ControlTemplate x:Key="ListViewControlTemplate1" TargetType="{x:Type ListView}">
    <Grid Visibility="{Binding IsLoading, Converter={StaticResource myBoolToVisibilityConverter}}">
        <local:ActivityIndicatorControl 
            HorizontalAlignment="Center" 
            Height="Auto" 
            Margin="0" 
            VerticalAlignment="Center"/>
    </Grid>
</ControlTemplate>

edited Jun 01 '20 at 04:26

CodeFuller

30,317
3
63
79

answered May 15 '12 at 19:34

davisoa

5,407
1
28
34

Thanks, exactly what I was looking for! Also, does the UserControl inherit DataContext from Grid? Would it be possible to create the binding on the UserControl itself? – Martin May 15 '12 at 19:40
1

Yes, the UserControl would have the same DataContext as the Grid. Because of this, you could put the visibility binding on the UserControl with no problem. – davisoa May 15 '12 at 19:42
A small note: change BooleanToVisibiltyConverter to BooleanToVisibilityConverter (add missing "i") and it looks like this: – Kaitnieks Sep 05 '16 at 19:53

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

Use .NET's built in Converter

.NET 3 has a built in BooleanToVisibilityConverter.

(Note: May not be available on all platforms, ex: mobile)

First add it to your Resources

<UserControl.Resources>
    <BooleanToVisibilityConverter x:Key="bool2vis"></BooleanToVisibilityConverter>
</UserControl.Resources>

Then use it on an element

<Label Visibility="{Binding IsSomeProperty, Converter={StaticResource bool2vis}}" />

Inverting

How do I invert BooleanToVisibilityConverter?

If you want to invert the converter (ex: hide the element when your property is true), this answer has a custom implementation of IValueConverter that supports that via XAML

<Application.Resources>
    <app:BooleanToVisibilityConverter 
        x:Key="BooleanToVisibilityConverter" 
        True="Collapsed" 
        False="Visible" />
</Application.Resources>

WPF - Bind UserControl visibility to a property

2 Answers2

Use .NET's built in Converter

Inverting

Linked