Bind visibility of text box to view model property in a content template

Question

I am just trying to set a text box to collapsed in my GridViewColumnHeader.ContentTemplate. I believe everything is being done correctly but for some reason the text box won't collapse when the boolean property is set.

Information

I have a View with a View Model that has a FilterRows boolean property.
I am styling my grid view to allow users to set the FilterRows property and have filters for each header appear.
I have tried using a BooleanToVisibilityConverter and a BooleanToCollapsedConverter.
I have verified that the bool is being set in the view model when the user selects a check box.

BooleanToCollapsedConverter

This converter is in the same view as my grid view table. I know the converter works because I have used it on other UI elements in the same view.

   <Grid.Resources>
       <ResourceDictionary>
           <local:BooleanToCollapsedConverter x:Key="BooleanToCollapsedConverter"/>
       </ResourceDictionary>
   </Grid.Resources>

This is the class for the booleanToCollapsedConverter

public class BooleanToCollapsedConverter : BaseValueConverter<BooleanToCollapsedConverter>
{
    public override object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (bool)value ? Visibility.Visible : Visibility.Collapsed;
    }

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

The View

Here is a the code for a part of grid view column where I am trying to use the converter within the style. The GridViewColumnHeader visibility is being set properly and collapsing as needed. The inner portion with the data template is not working though.

<GridViewColumn DisplayMemberBinding = "{Binding Description}" 
                Width="auto">
    <GridViewColumnHeader Content = "Description"
                          Visibility="{Binding HeaderList[1].IsChecked, Converter={StaticResource BooleanToCollapsedConverter}}"
                          local:GridViewBehaviors.CollapseableColumn="True">
        <GridViewColumnHeader.ContentTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBox Height = "25" 
                             FontSize="{StaticResource FontSizeSmall}" 
                             Visibility="{Binding FilterRows, Converter={StaticResource BooleanToCollapsedConverter}}"/>
                    <TextBlock Text = "Description" ></ TextBlock >
                </ StackPanel >
            </ DataTemplate >
        </ GridViewColumnHeader.ContentTemplate >
    </ GridViewColumnHeader >
</ GridViewColumn >

The View Model

This is my boolean property in the view model.

/// <summary>
    /// True if the user wants to apply filters to the rows.
    /// Once set the UI will display all filters
    /// </summary>
    public bool FilterRows
    {
        get => _filterRows;
        set => Set(ref _filterRows, value);
    }

Final Points

So overall I am just literally trying to collapse that text box when I check the Filter Rows: check box. Not sure if it has something to do with the style or I am doing something improperly? Any help would be greatly appreciated!

Thanks

the property `FilterRows` does not belong to each item of the `GridView`. it belongs to another object. so you need to specify what is the object that has `FilterRows` and then find a way to point the binding path towards that. e.g. using `x:static`, `RelativeSource`, implement `ParentViewModel`, etc... — Bizhan, Jan 03 '19 at 17:00

Paweł Górszczak · Accepted Answer · 2019-01-03T16:45:29.177

2

try to set data source for textbox binding. How do I use WPF bindings with RelativeSource?

smth like this. typeOfAncestor is UserControl or a Window

{Binding FilterRows, Converter={StaticResource BooleanToCollapsedConverter},
RelativeSource={RelativeSource AncestorType={x:Type typeOfAncestor}}}

edited Jan 03 '19 at 16:45

answered Jan 03 '19 at 16:39

Paweł Górszczak

524
1
5
12

I see what your saying. I tried using ancestor type of my page and it still did not work. The grid view is contained in a regular page. I have also tried using ancestor type of grid view and list view. (Grid view is in my list view). Still isn't working for some reason. – Selthien Jan 03 '19 at 17:29

mm8 · Answer 2 · 2019-01-04T09:43:50.170

If the view model where the FilterRows property is defined is the DataContext of the parent DataGrid, this should work:

<TextBox Height="25" FontSize="{StaticResource FontSizeSmall}" 
                             Visibility="{Binding DataContext.FilterRows, 
                                RelativeSource={RelativeSource AncestorType=DataGrid}, 
                                Converter={StaticResource BooleanToCollapsedConverter}}"/>

Also note that there is a built-in converter for converting between bool and Visibility that you can use instead of creating your own one:

<BooleanToVisibilityConverter x:Key="BooleanToCollapsedConverter" />

Bind visibility of text box to view model property in a content template

2 Answers2