在数据网格标题中绑定复选框 [英] Binding a checkbox in a datagrid header

问题描述

我有一个数据网格，其中第一列包含一个复选框，让用户选择特定的行.我在数据网格列标题中添加了一个复选框来选中或取消选中所有行.

I have a datagrid where the first column contains a checkbox to let the user selects specific rows. I have added a checkbox in the datagrid column header to check or uncheck all the rows.

是否可以仅通过 XAML 中的绑定添加此功能(无检查事件).

Is it possible to add this functionality only with binding in XAML (no checked event).

<sdk:DataGrid AutoGenerateColumns="False" Grid.Row="1"  Name="grid" ItemsSource="{Binding myCollection, Mode=TwoWay}" >
        <sdk:DataGrid.Columns>
            <sdk:DataGridCheckBoxColumn Binding="{Binding myCollection.UserSelected, Mode=TwoWay}" >
                <sdk:DataGridCheckBoxColumn.HeaderStyle>
                    <Style TargetType="sdk:DataGridColumnHeader">
                        <Setter Property="ContentTemplate">
                            <Setter.Value>
                                <DataTemplate>
                                    <CheckBox x:Name="checkAll" IsThreeState="True"  
                                              IsChecked="{Binding myCollection.UserSelected, Mode=TwoWay, Converter={StaticResource threeStateConverter}}"/>
                                </DataTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </sdk:DataGridCheckBoxColumn.HeaderStyle>
            </sdk:DataGridCheckBoxColumn>
            <sdk:DataGridTextColumn Binding="{Binding Description}" Header="Chemin" />
        </sdk:DataGrid.Columns>
    </sdk:DataGrid>

我认为myCollection.UserSelected"部分有问题.ThreeStateConverter 是一个值转换器，当某些项目被选中时返回 null，当它们全部被选中时返回 true，等等.但是 Convert 方法永远不会被调用(即使 Convertcode>PropertyChanged 事件在 UserSelected 更改时引发.

I think there's something wrong with the "myCollection.UserSelected" part. ThreeStateConverter is a value converter that would return null when some items are selected, true when they are all selected, etc. but the Convert method is never called (even though the PropertyChanged event is raised when UserSelected is changed).

知道我该怎么做吗?谢谢.

Any idea on how I can do it? Thank you.

推荐答案

可能你已经解决了这个问题，但是:

Probably, you've solved the problem already, but nevertheless:

<navigation:Page.Resources>
    <model:MyModel x:Key="Model"/>
</navigation:Page.Resources>
...    
<data:DataGridTemplateColumn Width="Auto" >
    <data:DataGridTemplateColumn.HeaderStyle>
        <Style TargetType="datap:DataGridColumnHeader">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <CheckBox IsThreeState="True" Margin="2,0,-13,0" DataContext="{StaticResource Model}" IsChecked="{Binding Path=AllChecked, Mode=TwoWay}"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </data:DataGridTemplateColumn.HeaderStyle>
    <data:DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <CheckBox IsChecked="{Binding Checked, Mode=TwoWay}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </DataTemplate>
    </data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>

MyModel 类包含实现选择逻辑的 bool? 属性.它也用作页面的`DataContext.

MyModel class contains bool? property that implements logic of selection. It is also used as a `DataContext of page.

我必须承认，如果我们需要更改模型，这可能会出现问题.

I must admit that this potentially has problems if we need to change model.

我找到了另一种方法:

<navigation:Page.DataContext>
    <model:MyModel />
</navigation:Page.DataContext>
...    
<data:DataGridTemplateColumn Width="Auto" >
    <data:DataGridTemplateColumn.HeaderStyle>
        <Style TargetType="datap:DataGridColumnHeader">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <CheckBox IsThreeState="True" Margin="2,0,-13,0" IsChecked="{Binding Path=DataContext.AllChecked, ElementName=LayoutRoot, Mode=TwoWay}"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </data:DataGridTemplateColumn.HeaderStyle>
    <data:DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <CheckBox IsChecked="{Binding Checked, Mode=TwoWay}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </DataTemplate>
    </data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>

这里我们绑定到根布局元素(通常称为LayoutRoot)的DataContext，它默认从页面继承其数据上下文.

Here we bind to DataContext of root layout element (usually called LayoutRoot) which inherits its data context from page by default.

这篇关于在数据网格标题中绑定复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！