在 uwp 中使用带有多选复选框的 mytoolkit 数据网格

Question

我想显示一个带有复选框的数据网格。

在我的代码中，将复选框添加到标题中，以便如何绑定所有行的复选框，并在单击全选复选框后应选中所有复选框。

我想显示与图像相同的输出。

<Toolkit:DataGrid ItemsSource="{Binding People}" x:Name="DeptListView" 
                  SelectionMode="Multiple" DefaultOrderIndex="1"
                  SelectedItem="{Binding SelectedPerson, Mode=TwoWay}" >
    <Toolkit:DataGrid.Columns>
        <Toolkit:DataGridTextColumn  >
            <Toolkit:DataGridTextColumn.Header>
                <CheckBox Content="Select All"  ></CheckBox>
            </Toolkit:DataGridTextColumn.Header>
        </Toolkit:DataGridTextColumn>

        <Toolkit:DataGridTextColumn Width="200" Header="CustID" 
          Binding="{Binding CustID}"/>

        <Toolkit:DataGridTextColumn Width="200" Header="company name" 
          Binding="{Binding name}"/>

        <Toolkit:DataGridTextColumn Width="200" Header="ContactName" 
          Binding="{Binding ContactName}"/>

        <Toolkit:DataGridTextColumn Width="200" Header="Country" 
          Binding="{Binding Country}"/>

    </Toolkit:DataGrid.Columns>
</Toolkit:DataGrid>  

在上面的代码中，它不是为每一行添加复选框到标题。那么如何绑定所有行的复选框。

Answer 1

您可能需要使用 DataGridTemplatedColumn 并在此列中设置复选框。并且要设置绑定，您需要有一个 bool 值和一个转换器来绑定到基于此doc 的复选框的 ischecked 属性。要设置所有选项，您需要在选中标题中的复选框时将所有BOOL值设置为TRUE。

Answer 2

首先从 NuGet 1.MyToolKit.Extended 安装包。

将标头包含到 xaml xmlns:con="using:MyToolKit.Extended" xmlns:Converters="使用:MyToolkit.Converters"

 <Page.Resources >

    <Style  TargetType="Toolkit:DataGrid" x:Name="GridBackground" >
        <Setter Property="BorderBrush"  Value="Black" ></Setter>
        <Setter Property="BorderThickness"   Value="0,5,5,5" ></Setter>
        <Setter Property="HeaderBackground"   Value="#E2E2E2" />
        <Setter Property="FontFamily"    Value="{StaticResource inventorySemiBoldFont}" />
        <Setter Property="RowBackgroundOddBrush" Value="White" />
        <Setter Property="RowBackgroundEvenBrush" Value="White" />
        <Setter Property="Foreground"  Value="#000000" />
        <Setter Property="FontWeight"  Value="SemiBold"   />
        <Setter Property="CellTemplate">
            <Setter.Value>
                <DataTemplate>
                    <ContentPresenter Margin="8" Content="{Binding Control}" />
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

 <Toolkit:DataGrid Style="{StaticResource GridBackground}"   BorderBrush="Transparent"  BorderThickness="5"   AllowFocusOnInteraction="False" x:Name="UserListView"  SelectionMode="Single"    FontFamily="{StaticResource inventorySemiBoldFont  }" FontSize="16" RelativePanel.AlignLeftWithPanel="True" Grid.ColumnSpan="8" Margin="10,21,103,414" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Stretch" Grid.RowSpan="2" VerticalAlignment="Stretch"  >
        <Toolkit:DataGrid.RowStyle  >
            <Style TargetType="ListBoxItem">
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="TabNavigation" Value="Local" />
                <Setter Property="FontWeight" Value="ExtraBold"  />
                <Setter Property="FontFamily" Value="{StaticResource inventoryRegularFont }" />
                <Setter Property="Height" Value="40" />
                <Setter Property="MinHeight" Value="40" />
                <Setter Property="HorizontalContentAlignment" Value="Left" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBoxItem">
                            <Grid
      x:Name="LayoutRoot"
      Background="{TemplateBinding Background}"
      BorderThickness="{TemplateBinding BorderThickness}">
                                <Grid.Resources>
                                    <Style x:Key="BaseContentPresenterStyle" TargetType="ContentPresenter">
                                        <Setter Property="FontFamily" Value="{StaticResource inventoryRegularFont }" />
                                        <Setter Property="FontWeight" Value="Normal"  />
                                        <Setter Property="FontSize" Value="2" />
                                        <Setter Property="TextWrapping" Value="Wrap" />
                                        <Setter Property="LineStackingStrategy" Value="MaxHeight" />
                                        <Setter Property="TextLineBounds" Value="Full" />
                                    </Style>
                                    <Style x:Key="BodyContentPresenterStyle" TargetType="ContentPresenter" BasedOn="{StaticResource BaseContentPresenterStyle}">
                                        <Setter Property="FontFamily" Value="{StaticResource inventoryRegularFont }" />
                                        <Setter Property="FontWeight" Value="Normal"  />
                                        <Setter Property="FontSize" Value="2" />
                                    </Style>
                                </Grid.Resources>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                           Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="PointerOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground"
                                           Storyboard.TargetProperty="Fill">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                           Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground"
                                           Storyboard.TargetProperty="Fill">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                           Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Selected">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground"
                                           Storyboard.TargetProperty="Fill">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentLowBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                           Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="SelectedUnfocused">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground"
                                           Storyboard.TargetProperty="Fill">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentLowBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                           Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="SelectedPointerOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground"
                                           Storyboard.TargetProperty="Fill">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentMediumBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                           Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="SelectedPressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground"
                                           Storyboard.TargetProperty="Fill">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentHighBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                           Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Rectangle
        x:Name="PressedBackground"
        Fill="Transparent"  
        Control.IsTemplateFocusTarget="True"/>
                                <ContentPresenter
        x:Name="ContentPresenter"
        Content="{TemplateBinding Content}"
        ContentTransitions="{TemplateBinding ContentTransitions}"
        ContentTemplate="{TemplateBinding ContentTemplate}"
        Style="{StaticResource BodyContentPresenterStyle}"
        TextWrapping="NoWrap"
                                    BorderBrush="#E1E1E1" 
                                    BorderThickness="0,0,0,1"
        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                    FontSize="5"
                                    FontFamily="{StaticResource inventoryRegularFont }"
      />
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Toolkit:DataGrid.RowStyle>

        <Toolkit:DataGrid.Columns  >
            <Toolkit:DataGridTemplatedColumn  Width="100" CanSort="False"  >
                <Toolkit:DataGridTemplatedColumn.Header   >
                    <CheckBox x:Name="OptionsAllCheckBox" HorizontalAlignment="Left" Style="{StaticResource CheckBoxStyle1}" Content="" VerticalAlignment="Top"  VerticalContentAlignment="Top"  HorizontalContentAlignment="Left"  IsThreeState="True" Checked="SelectAll_Checked" Unchecked="SelectAll_Unchecked" Indeterminate="SelectAll_Indeterminate"/>
                </Toolkit:DataGridTemplatedColumn.Header>
                <Toolkit:DataGridTemplatedColumn.CellTemplate>
                    <DataTemplate >
                        <CheckBox  IsChecked="{Binding Checked, Mode=TwoWay}" Style="{StaticResource CheckBoxStyle1}"   Tag ="{Binding userId}" VerticalAlignment="Top"  VerticalContentAlignment="Top" HorizontalAlignment="Left" HorizontalContentAlignment="Left"   Checked="Option_Checked" Unchecked="Option_Unchecked" />
                    </DataTemplate>
                </Toolkit:DataGridTemplatedColumn.CellTemplate>
            </Toolkit:DataGridTemplatedColumn>
            <Toolkit:DataGridTextColumn   FontSize="14" Foreground="#333333"   Width="350" Header="Name" Binding="{Binding userfullName}" />
            <Toolkit:DataGridTextColumn  Foreground="#333333"   FontSize="14"  Width="350" Header="Email" Binding="{Binding userEmail}" />
            <Toolkit:DataGridTextColumn  Foreground="#333333"   FontSize="14"  Width="270" Header="Phone" Binding="{Binding userPhone}" />

            <Toolkit:DataGridTemplatedColumn  Header="Update" IsAscendingDefault="False" CanSort="False"   >
                <Toolkit:DataGridTemplatedColumn.CellTemplate>
                    <DataTemplate>
                        <Image Source="Images/Edit.png" ToolTipService.ToolTip="Update User" DataContext="{Binding userId}" Height="20" Width="20" Tapped="GridUpdateBtnClick"/>
                    </DataTemplate>
                </Toolkit:DataGridTemplatedColumn.CellTemplate>
            </Toolkit:DataGridTemplatedColumn>
        </Toolkit:DataGrid.Columns>
    </Toolkit:DataGrid>

为用户声明一个类

public class UserData : INotifyPropertyChanged
{
    public string userFirstName { get; set; }
    public string userEmail { get; set; }
    public string userLastName { get; set; }
    public string userExt { get; set; }
    public string userPhone { get; set; }
    public int userId { get; set; }
    public string userPrefix { get; set; }
    public string userfullName { get; set; }

    public UserData(string userPrefix, string userFirstName, string userLastName, int userId, string userEmail, string userExt, string userPhone)
    {
        this.userPrefix = userPrefix;
        this.userFirstName = userFirstName;
        this.userLastName = userLastName;
        this.userId = userId;
        this.userEmail = userEmail;
        this.userExt = userExt;
        this.userPhone = userPhone;
        this.userfullName = userPrefix + " " + userFirstName + " " + userLastName;
    }

    private bool _Checked = false;
    public bool Checked { get { return _Checked; } set { _Checked = value; OnChanged("Checked"); } }

    #region INotifyPropertyChanged Members

    public event PropertyChangedEventHandler PropertyChanged;
    private void OnChanged(string prop)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(prop));
    }


    #endregion
}

为复选框创建事件并更新图像

      private void SelectAll_Checked(object sender, RoutedEventArgs e )
    {

            foreach (var item in (dynamic)DoGrid.ItemsSource)
            {
                item.Checked = true;
                Option_Checked(sender, e);
            }

    }

    private void SelectAll_Indeterminate(object sender, RoutedEventArgs e)
    {

        foreach (var item in (dynamic)DoGrid.ItemsSource)
        {
            item.Checked = false ;
            Option_Unchecked(sender, e);
        }

    }

    private void SelectAll_Unchecked(object sender, RoutedEventArgs e)
    {

    }

    private void Option_Unchecked(object sender, RoutedEventArgs e)
    {

            CheckBox ch = (CheckBox)sender;
            ch.IsChecked = false;

    }

    private void Option_Checked(object sender, RoutedEventArgs e)
    {
        CheckBox ch = (CheckBox)sender;
        ch.IsChecked  = true;
    }

    private void Image_Tapped(object sender, TappedRoutedEventArgs e)
    {

    }