Wpf: Hide GridViewColumn in Listview

Question

I have a GridView inside a Listview

And there are several GridViewColumn inside Griview.

Now i want to hide one of these columns

I wrote this :

<Grid>
        <ListView>
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="First" Width="100"/>
                    <GridViewColumn Header="Second" Width="0"/>
                    <GridViewColumn Header="Third" Width="100"/>
                    <GridViewColumn Header="Fourth" Width="100"/>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>

Initially it is hidden, though i can still see the second column if i extend the third column separator.

Is There any way to set the Visibility of the GridViewColumn ?

Answer 1

please try the next solution. Since the DataGridColumns are not in the DataGrid visual tree you must use a works around to achieve the binding to such properties as Visibility. On other words you need to use Proxies. Here is the way that worked for me. 1. Xaml code:

<Window x:Class="DataGridSoHelpAttempt.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dataGridSoHelpAttempt="clr-namespace:DataGridSoHelpAttempt"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    Title="MainWindow" Height="350" Width="525" x:Name="This">
<Window.DataContext>
    <dataGridSoHelpAttempt:MainViewModel/>
</Window.DataContext>
<Grid x:Name="MyGrid">
    <Grid.Resources>
        <dataGridSoHelpAttempt:FreezableProxyClass x:Key="ProxyElement" ProxiedDataContext="{Binding Source={x:Reference This}, Path=DataContext}"/>
    </Grid.Resources>
    <DataGrid x:Name="MyDataGrid" ItemsSource="{Binding DataSource}" AutoGenerateColumns="False">
        <DataGrid.Columns>
            <DataGridTextColumn Header="Name" Binding="{Binding Name}"/>
            <DataGridTextColumn Header="Description" Binding="{Binding Description}"  Visibility="{Binding Source={StaticResource ProxyElement}, 
                Path=ProxiedDataContext.Visibility, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"></DataGridTextColumn>
            <DataGridTextColumn Header="Comments" Binding="{Binding Comments}" Width="150"/>
        </DataGrid.Columns>
    </DataGrid>
    <Button HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Content="Show Description" Command="{Binding Command}"></Button>
</Grid>

2. FreezableProxyClass code:

public class FreezableProxyClass : Freezable
{
    protected override Freezable CreateInstanceCore()
    {
        return new FreezableProxyClass();
    }


    public static readonly DependencyProperty ProxiedDataContextProperty = DependencyProperty.Register(
        "ProxiedDataContext", typeof (object), typeof (FreezableProxyClass), new PropertyMetadata(default(object)));

    public object ProxiedDataContext
    {
        get { return (object) GetValue(ProxiedDataContextProperty); }
        set { SetValue(ProxiedDataContextProperty, value); }
    }
}

3. ViewModel code:

    public class MainViewModel:BaseObservableObject
{
    private Visibility _visibility;
    private ICommand _command;

    public MainViewModel()
    {
        Visibility = Visibility.Collapsed;
        DataSource = new ObservableCollection<BaseData>(new List<BaseData>
        {
            new BaseData {Name = "Uncle Vania", Description = "A.Chekhov, play", Comments = "worth reading"},
            new BaseData {Name = "Anna Karenine", Description = "L.Tolstoy, roman", Comments = "worth reading"},
            new BaseData {Name = "The Master and Margarita", Description = "M.Bulgakov, novel", Comments = "worth reading"},
        });
    }

    public ICommand Command
    {
        get
        {
            return _command ?? (_command = new RelayCommand(VisibilityChangingCommand));
        }
    }

    private void VisibilityChangingCommand()
    {
        Visibility = Visibility == Visibility.Collapsed ? Visibility.Visible : Visibility.Collapsed;
    }

    public ObservableCollection<BaseData> DataSource { get; set; }

    public Visibility Visibility
    {
        get { return _visibility; }
        set
        {
            _visibility = value;
            OnPropertyChanged();
        }
    }
}

public class BaseData:BaseObservableObject
{
    private string _name;
    private string _description;
    private string _comments;

    public virtual string Name
    {
        get { return _name; }
        set
        {
            _name = value;
            OnPropertyChanged();
        }
    }

    public virtual object Description
    {
        get { return _description; }
        set
        {
            _description = (string) value;
            OnPropertyChanged();
        }
    }

    public string Comments
    {
        get { return _comments; }
        set
        {
            _comments = value;
            OnPropertyChanged();
        }
    }
}

4. MVVM parts

    public class BaseObservableObject : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        var handler = PropertyChanged;
        if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
    }

    protected virtual void OnPropertyChanged<T>(Expression<Func<T>> raiser)
    {
        var propName = ((MemberExpression)raiser.Body).Member.Name;
        OnPropertyChanged(propName);
    }

    protected bool Set<T>(ref T field, T value, [CallerMemberName] string name = null)
    {
        if (!EqualityComparer<T>.Default.Equals(field, value))
        {
            field = value;
            OnPropertyChanged(name);
            return true;
        }
        return false;
    }
}

public class RelayCommand : ICommand
{
    private readonly Func<bool> _canExecute;
    private readonly Action _execute;

    public RelayCommand(Action execute)
        : this(() => true, execute)
    {
    }

    public RelayCommand(Func<bool> canExecute, Action execute)
    {
        _canExecute = canExecute;
        _execute = execute;
    }

    public bool CanExecute(object parameter = null)
    {
        return _canExecute();
    }

    public void Execute(object parameter = null)
    {
        _execute();
    }

    public event EventHandler CanExecuteChanged;
}

5. How it is looks like:.

I'll glad to help if you will have problems with the code. Regards.

update 1. Xaml code:

<Window x:Class="DataGridSoHelpAttempt.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dataGridSoHelpAttempt="clr-namespace:DataGridSoHelpAttempt"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    Title="MainWindow" Height="350" Width="525" x:Name="This">
<Window.Resources>
    <dataGridSoHelpAttempt:ColumnObject2ColumnConverter x:Key="ColumnObject2ColumnConverterKey" />
</Window.Resources>
<Window.DataContext>
    <dataGridSoHelpAttempt:MainViewModel/>
</Window.DataContext>
<Grid x:Name="MyGrid">
    <Grid.Resources>
        <dataGridSoHelpAttempt:FreezableProxyClass x:Key="ProxyElement" ProxiedDataContext="{Binding Source={x:Reference This}, Path=DataContext}"/>
    </Grid.Resources>
    <Grid>
        <ListView ItemsSource="{Binding DataSource}">
            <ListView.View>
                <GridView>
                    <GridView.Columns>
                        <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" Width="100"/>
                        <dataGridSoHelpAttempt:MyGridViewColumn Visibility="{Binding Visibility}" DefaultWidth="100" Header="Description" DisplayMemberBinding="{Binding Description}" Width="100"/>
                        <GridViewColumn Header="Comments" DisplayMemberBinding="{Binding Comments}" Width="100"/>
                    </GridView.Columns>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
    <!--<DataGrid x:Name="MyDataGrid" ItemsSource="{Binding DataSource}" AutoGenerateColumns="False">
        <DataGrid.Columns>
            <DataGridTextColumn Header="Name" Binding="{Binding Name}"/>
            <DataGridTextColumn Header="Description" Binding="{Binding Description}"  Visibility="{Binding Source={StaticResource ProxyElement}, 
                Path=ProxiedDataContext.Visibility, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"></DataGridTextColumn>
            <DataGridTextColumn Header="Comments" Binding="{Binding Comments}" Width="150"/>
        </DataGrid.Columns>
    </DataGrid>-->
    <Button HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Content="Show Description" Command="{Binding Command}"></Button>
</Grid></Window>

2. MyGridViewColumn code:

public class MyGridViewColumn : GridViewColumn
{

    protected override void OnPropertyChanged(DependencyPropertyChangedEventArgs e)
    {
        base.OnPropertyChanged(e);
    }

    public static readonly DependencyProperty DefaultWidthProperty = DependencyProperty.Register(
        "DefaultWidth", typeof (double), typeof (MyGridViewColumn), new PropertyMetadata(default(double)));

    public double DefaultWidth
    {
        get { return (double) GetValue(DefaultWidthProperty); }
        set { SetValue(DefaultWidthProperty, value); }
    }

    /// <summary>
    /// Width DependencyProperty
    /// </summary>
    public new static readonly DependencyProperty WidthProperty =
        FrameworkElement.WidthProperty.AddOwner(
            typeof(MyGridViewColumn),
            new PropertyMetadata(
                Double.NaN /* default value */,
                new PropertyChangedCallback(OnWidthChanged))
        );


    public static readonly DependencyProperty VisibilityProperty =
        UIElement.VisibilityProperty.AddOwner(typeof (MyGridViewColumn),
            new PropertyMetadata(Visibility.Visible, new PropertyChangedCallback(Target)));

    private static double _zeroValue = 0d;

    private static void Target(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs args)
    {
        var column = dependencyObject as MyGridViewColumn;
        var visibility = (Visibility)args.NewValue;
        if (visibility == Visibility.Collapsed)
        {
            column.SetValue(WidthProperty, _zeroValue);
        }
        else if(visibility == Visibility.Visible)
        {
            column.SetValue(WidthProperty, column.DefaultWidth);
        }
    }

    public Visibility Visibility
    {
        get { return (Visibility) GetValue(VisibilityProperty); }
        set { SetValue(VisibilityProperty, value); }
    }



    /// <summary>
    /// width of the column
    /// </summary>
    /// <remarks>
    /// The default value is Double.NaN which means size to max visible item width.
    /// </remarks>
    [TypeConverter(typeof(LengthConverter))]
    public double Width
    {
        get { return (double)GetValue(WidthProperty); }
        set { SetValue(WidthProperty, value); }
    }

    private static void OnWidthChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        MyGridViewColumn c = (MyGridViewColumn)d;

        var visibility = c.Visibility;
        if(visibility == Visibility.Collapsed)
            c.Width = _zeroValue;

        double newWidth = (double)e.NewValue;
        c.OnPropertyChanged(new PropertyChangedEventArgs(WidthProperty.Name));
    }
}

how its looks like: .

Regards.