HowTo: Hide DataGrid rows

Mar 16, 2010 at 6:33 PM

Seems like it should be really simple, but I can't find anything to do this. So what is the best way to hide and show rows. I have a checkbox that needs to show and hide rows when it is toggled. So far the only place I've found where you can set the visibility on the DataGridRow object which isn't easily accessible - found it in the LoadingRow event, which only happens once, so I can't trigger it again when the checkbox value changes. Should this go in the style for the DataGridRow? If so, what does the default style look like? I tried to use Blend to figure it out, but it's not showing up in there.

Mar 17, 2010 at 12:59 PM

I found a solution that works rather well...


    <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
    <Style TargetType="{x:Type toolkit:DataGridRow}">
        <DataTrigger Binding="{Binding Path=ID}" Value="1">
           <Setter Property="Visibility" Value="{Binding ElementName=ShowRows, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}"/>

  <CheckBox x:Name="ShowRows">Show Rows</CheckBox>
  <toolkit:DataGrid Name="dataGrid1"/>


May 12, 2010 at 6:55 PM

This works ok.  However, the DataGrid does not resize accordingly to any hidden rows.

I had a solution where I created a control template for the DataGridRow and set the visibility of the border which contains all the inner elements of the row to Collapsed.  This also resized the DataGrid accordingly EXCEPT for when only row was "hidden".  In that case, annoyingly, it behaved as your solution does and leaves the DataGrid at the same size.

Anyone have any thoughts?

May 12, 2010 at 7:36 PM
Edited May 12, 2010 at 7:37 PM
Here's the code for what I was talking about. -- Window1.xaml --
<Window x:Class="WpfApplication1.Window1"
    Title="Window1" Height="300" Width="300">
        <Style x:Key="{x:Type t:DataGridRow}" TargetType="{x:Type t:DataGridRow}">
            <Setter Property="SnapsToDevicePixels" Value="true"/>
            <Setter Property="Validation.ErrorTemplate" Value="{x:Null}" />
            <Setter Property="ValidationErrorTemplate">
                        <TextBlock Margin="2,0,0,0" VerticalAlignment="Center" Foreground="Red" Text="!" />
            <Setter Property="Template">
                    <ControlTemplate TargetType="{x:Type t:DataGridRow}">
                        <Border x:Name="DGR_Border"
                  Background="{TemplateBinding Background}"
                  BorderBrush="{TemplateBinding BorderBrush}"
                  BorderThickness="{TemplateBinding BorderThickness}"
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                    ItemsPanel="{TemplateBinding ItemsPanel}"
                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    Primitives:SelectiveScrollingGrid.SelectiveScrollingOrientation="{Binding RelativeSource={RelativeSource AncestorType={x:Type t:DataGrid}}, Path=AreRowDetailsFrozen, Converter={x:Static t:DataGrid.RowDetailsScrollingConverter}, ConverterParameter={x:Static t:SelectiveScrollingOrientation.Vertical}}"
                    Grid.Column="1" Grid.Row="1"
                    Visibility="{TemplateBinding DetailsVisibility}" />
                    Primitives:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Grid.RowSpan="2"
                    Visibility="{Binding RelativeSource={RelativeSource AncestorType={x:Type t:DataGrid}}, Path=HeadersVisibility, Converter={x:Static t:DataGrid.HeadersVisibilityConverter}, ConverterParameter={x:Static t:DataGridHeadersVisibility.Row}}"/>
                            <DataTrigger Binding="{Binding IsVisible,UpdateSourceTrigger=PropertyChanged}" Value="False">
                                <Setter TargetName="DGR_Border" Property="Visibility" Value="Collapsed"/>
        <t:DataGrid x:Name="dg" AutoGenerateColumns="False" CanUserAddRows="False">
                <t:DataGridTextColumn Binding="{Binding Name}" />
            <Button Content="Modify" Click="Button_Click" />
            <Button Content="Modify 2" Click="Button_Click_1" />
-- Window1.xaml.cs --
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Windows;

namespace WpfApplication1
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class Window1 : Window
        ObservableCollection<Model> model;

        public Window1()

            model = new ObservableCollection<Model>();
            model.Add(new Model() { Name = "Matthew" });
            model.Add(new Model() { Name = "Mark" });
            model.Add(new Model() { Name = "Luke" });
            model.Add(new Model() { Name = "John" });

            dg.ItemsSource = model;

        private void Button_Click(object sender, RoutedEventArgs e)
            if (model[3].IsVisible)
                model[3].IsVisible = false;
                model[3].IsVisible = true;

        private void Button_Click_1(object sender, RoutedEventArgs e)
            if (model[2].IsVisible)
                model[2].IsVisible = false;
                model[3].IsVisible = false;
                model[2].IsVisible = true;
                model[3].IsVisible = true;

    class Model : INotifyPropertyChanged
        public string Name { get; set; }

        bool _isVisible = true;
        public bool IsVisible
            get { return _isVisible; }
                if (_isVisible != value)
                    _isVisible = value;

        void OnPropertyChanged(string pName)
            PropertyChangedEventHandler eh = this.PropertyChanged;
            if (eh != null)
                eh(this, new PropertyChangedEventArgs(pName));

        public event PropertyChangedEventHandler PropertyChanged;