WPF GridView with Multiple Checkbox Columns and Select All Column Header

Question

I have a ListView containing several GridViewColumns. Several of the columns are checkboxes. Each column header consists of a checkbox as well, with the intention of checking/unchecking all the checkboxes in that column. Each row's checkboxes are bound to properties in my view model. I've seen several postings where the scenario is a single column of checkboxes, but none of those solutions will work for me, as I have 4 columns of checkboxes. I also need to persist the state of the selections from one visit to the next (all, some or none of the checkboxes in a column could be checked).

Here's an abbreviated version of the XAML for my ListView:

<ListView ItemsSource="{Binding AveragingParameters}">
  <ListView.View>
    <GridView AllowsColumnReorder="False">

      <GridViewColumn Header="Parameter">
        <GridViewColumn.CellTemplate>
          <DataTemplate>
            <DockPanel>
              <TextBlock Text="{Binding Name}" />
            </DockPanel>
          </DataTemplate>
        </GridViewColumn.CellTemplate>
      </GridViewColumn>

      <GridViewColumn>
        <GridViewColumn.CellTemplate>
          <DataTemplate>
            <Grid HorizontalAlignment="Stretch">
              <CheckBox  x:Name="chkAvg" IsChecked="{Binding CalcAverage}" />
            </Grid>
          </DataTemplate>
        </GridViewColumn.CellTemplate>
        <Grid>
          <CheckBox x:Name="chkAvgSelectAll" Content="Avg" ToolTip="Select All" />
        </Grid>
      </GridViewColumn>

      <GridViewColumn>
        <GridViewColumn.CellTemplate>
          <DataTemplate>
            <Grid HorizontalAlignment="Stretch">
              <CheckBox  x:Name="chkMin" IsChecked="{Binding CalMin}" />
            </Grid>
          </DataTemplate>
        </GridViewColumn.CellTemplate>
        <Grid>
          <CheckBox x:Name="chkMinSelectAll" Content="Min" ToolTip="Select All" />
        </Grid>
      </GridViewColumn>

    </GridView>
  </ListView.View>
</ListView>

I've tried using Commands and Command Parameters, PropertyChanged events on the Checked property, and handling the Checked event in my code behind, but nothing gives me enough information to know what to change in the collection I'm bound to.

I suppose I could create a separate event handler for each, but I'd like to be able to handle this in a single event handler if possible, because eventually I will be creating a custom control that is a bit more malluable in terms of the columns displayed.

Thanks in advance

Do you want to know what changes you need to make in AveragingParameters when user either check or uncheck chkAvgSelectAll or chkMinSelectAll? — Haris Hasan
– Haris Hasan, Commented May 11, 2011 at 19:24
I'm trying to figure out how to link up to my view model and determine which boolean property I need to effect on each item in my AveragingParameters collection. H.B.'s post below might be the ticket. — KyleLib
– KyleLib, Commented May 11, 2011 at 19:42
I'm not sure I'm understanding the problem. If you bind each column to an individual property/field in your ModelView then when that checkbox state changes so will your underlying bound object. There is not need to determine which boolean property, it's explicit via the binding. Maybe I don't understand the question. — SRM
– SRM, Commented May 11, 2011 at 20:17
@SRM, Maybe I'm missing something, but the state of my Model is being persisted, and I need to retain the boolean value of each item in the grid on subsequent visits (Apologies for not mentioning that in my orignal post.) Seems your solution would break this. That's why I couldn't use triggers. FYI, I did solve my issue using multibinding, solution to be posted shortly. — KyleLib
– KyleLib, Commented May 12, 2011 at 16:28

KyleLib · Accepted Answer · 2011-05-12 19:29:34Z

I've solved my issue using a Command along with a Tag containing the name of the model property I want set and a CommandParameter set to a multi-binding that is bound to the Tag and the Checkbox's IsSelected property. The code follows:

My View's Xaml Resources:

<UserControl.Resources>
   <converters:NameValueMultiBindingConverter x:Key="SelectAllConverter" />
</UserControl.Resources>

My View's Xaml:

<ListView ItemsSource="{Binding AveragingParameters}">
  <ListView.View>
    <GridView AllowsColumnReorder="False">

      <GridViewColumn Header="Parameter">
        <GridViewColumn.CellTemplate>
          <DataTemplate>
            <DockPanel>
              <TextBlock Text="{Binding Name}" />
            </DockPanel>
          </DataTemplate>
        </GridViewColumn.CellTemplate>
      </GridViewColumn>

      <GridViewColumn>
        <GridViewColumn.CellTemplate>
          <DataTemplate>
            <Grid HorizontalAlignment="Stretch">
              <CheckBox  x:Name="chkAvg" IsChecked="{Binding CalcAverage}" />
            </Grid>
          </DataTemplate>
        </GridViewColumn.CellTemplate>

        <CheckBox x:Name="chkAvgSelectAll" Content="Avg" 
                  Tag="CalcAvg" Command="SelectAllCheckedCommand" 
                  ToolTip="Select All">
            <MultiBinding Converter="{StaticResource SelectAllConverter}">
              <Binding Path="Tag" RelativeSource="{RelativeSource self}" />
              <Binding Path="IsChecked" RelativeSource="{RelativeSource self}" />
            </MultiBinding>
        </CheckBox>
      </GridViewColumn>

      <GridViewColumn>
        <GridViewColumn.CellTemplate>
          <DataTemplate>
            <Grid HorizontalAlignment="Stretch">
              <CheckBox  x:Name="chkMin" IsChecked="{Binding CalMin}" />
            </Grid>
          </DataTemplate>
        </GridViewColumn.CellTemplate>

        <CheckBox x:Name="chkMinSelectAll" Content="Avg" 
                  Tag="CalcMin" Command="SelectAllCheckedCommand" 
                  ToolTip="Select All">
            <MultiBinding Converter="{StaticResource SelectAllConverter}">
              <Binding Path="Tag" RelativeSource="{RelativeSource self}" />
              <Binding Path="IsChecked" RelativeSource="{RelativeSource self}" />
            </MultiBinding>
        </CheckBox>
      </GridViewColumn>

    </GridView>
  </ListView.View>
</ListView>

My MultiValueConverter:

public class NameValueMultiBindingConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter,
                          System.Globalization.CultureInfo culture)
    {

        var parameters = (object[])values;
        return new NameValueConverterResult 
                        { 
                           Name = (string)parameters[0], 
                           Value = parameters[1] 
                        };
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, 
                                System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

The result object I'm using in the converter:

public class NameValueConverterResult
{
    //The name of the model property to set
    public string Name { get; set; }

    //The value we're setting it to
    public object Value { get; set; }
}

The DelegateCommand (I'm using PRISM) and handler in my View Model

public ICommand SelectAllCheckedCommand { get; private set; }
private void OnSelectAllCheckedCommand(object arg )
{
   if (arg == null || !(arg is NameValueConverterResult)) return;

   NameValueConverterResult prop = arg as NameValueConverterResult;

   //Reflect on the model to find the property we want to update.
   PropertyInfo propInfo = Averagers.FirstOrDefault().GetType().GetProperty(prop.Name);
   if (propInfo == null) return;

   //Set the property on the Model
   foreach (var item in Averagers)
      propInfo.SetValue(item, prop.Value, null);
}

I hope I'm not abusing StackOverflow providing the solution I came up with. I wasn't sure of the etiquette here.

brunnerh · Accepted Answer · 2011-05-11 19:37:18Z

0

Just hand over as much info as needed and do the rest via reflection, e.g.

<ListView ItemsSource="{Binding DpData}">
    <ListView.View>
        <GridView>
            <GridViewColumn>
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <CheckBox IsChecked="{Binding IsActive}"/>
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
                <!-- Pass collection to Tag property, relevant member info is in the Content,
                     could also create an array in the Tag if the Content should be a nicer
                     looking string. -->
                <CheckBox Content="IsActive" Click="CheckBox_Click" Tag="{Binding DpData}"/>
            </GridViewColumn>
        </GridView>
    </ListView.View>
</ListView>

// This method could be used for all columns,
// as long as they contain the necessary info
// which should be provided in the XAML:
//     - Item Collection
//     - Property Name
private void CheckBox_Click(object sender, RoutedEventArgs e)
{
    var cb = sender as CheckBox;
    var items = cb.Tag as IEnumerable;
    PropertyInfo prop = null;
    foreach (var item in items)
    {
        if (prop == null)
        {
            var type = item.GetType();
            var propname = cb.Content as string;
            prop = type.GetProperty(propname);
        }
        prop.SetValue(item, cb.IsChecked, null);
    }
}

edited May 11, 2011 at 19:37

answered May 11, 2011 at 19:27

brunnerh

188k30 gold badges363 silver badges434 bronze badges

3 Comments

KyleLib Over a year ago

Thanks for the post. I'll give it a try. I'm assuming DPData is synomymous with AveragedParameters that I called on in my original post.

brunnerh Over a year ago

Just any kind of ItemsSource, yes.

KyleLib Over a year ago

your post gave me some ideas. Since I'm using MVVM my end solution used MultiBinding. I'll post my solution shortly.

Haris Hasan · Accepted Answer · 2011-05-11 19:54:56Z

0

If you want to stick with MVVM approach i would suggest to go for binding approach rather than event handling approach as MVVM avoids writing code in code behind file.

One way could be to simply bind two bool properties in view model with IsChecked Property of both checkboxes. Based on the change notification using INotifyPropetyChanged, you can iterate through your itemssource i.e. AveragingParameters and change either CalMin or CalcAverage

answered May 11, 2011 at 19:54

Haris Hasan

30.1k13 gold badges97 silver badges124 bronze badges

3 Comments

SRM Over a year ago

That's a common misconception of MVVM. MVVM doesn't dictate no code behind. What it does dictate is no business logic in your code behind. I've heard it put this way: "CodeBehind should be the domain of the designer only". In other words, if you have code behind make sure it is view specific and no business logic. Otherwise you will end up with a nasty mix of view logic in your ViewModel - just as bad as putting business logic in your view.

KyleLib Over a year ago

Thanks for the posts btw. I actually solved this problem using mult-binding. I'll include it as a solution shortly.

KyleLib Over a year ago

I believe @SRM is correct regarding MVVM and codebehind. Following those guidelines will let you easily support other views if you need support for say WPF and Silverlight. As for your proposed solution, I wanted to avoid binding to multiple properties if I could. Reason being, the next iteration of this code will likely be a user control that allows for the ability to make the number of columns dynamic. Today I have 4 columns of checkboxes. Future consumers may require a different view model and need more or less columns.

Collectives™ on Stack Overflow

WPF GridView with Multiple Checkbox Columns and Select All Column Header

3 Answers 3

Comments

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related