在 uwp 中使用带有多选复选框的 mytoolkit 数据网格
Posted
技术标签:
【中文标题】在 uwp 中使用带有多选复选框的 mytoolkit 数据网格【英文标题】：Using mytoolkit datagrid with multi-select checkboxes in uwp 【发布时间】：2019-08-02 13:59:41 【问题描述】：我想显示一个带有复选框的数据网格。
在我的代码中，将复选框添加到标题中，以便如何绑定所有行的复选框，并在单击全选复选框后应选中所有复选框。
我想显示与图像相同的输出。
<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>
在上面的代码中，它不是为每一行添加复选框到标题。那么如何绑定所有行的复选框。
【问题讨论】：
【参考方案1】：您可能需要使用 DataGridTemplatedColumn 并在此列中设置复选框。并且要设置绑定，您需要有一个 bool 值和一个转换器来绑定到基于此doc 的复选框的 ischecked 属性。要设置所有选项，您需要在选中标题中的复选框时将所有BOOL值设置为TRUE。
【讨论】：
【参考方案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)
【讨论】：
根据您的要求匹配此代码:) 祝您有美好的一天以上是关于在 uwp 中使用带有多选复选框的 mytoolkit 数据网格的主要内容，如果未能解决你的问题，请参考以下文章