Skip to content

Drag and drop behavior on DataGrid looks strange #512

Open
@CodingOctocat

Description

@CodingOctocat

Describe the bug

  1. Drag and drop only in certain positions
  2. When dragging and dropping, the position indicator flashes to the end when the mouse pointer is in the item gap

To Reproduce
Steps to reproduce the behavior:

<DataGrid d:ItemsSource="{d:SampleData ItemCount=5}"
          dd:DragDrop.CanDragWithMouseRightButton="False"
          dd:DragDrop.IsDragSource="True"
          dd:DragDrop.IsDropTarget="True"
          dd:DragDrop.SelectDroppedItems="True"
          dd:DragDrop.UseDefaultDragAdorner="True"
          hc:Empty.ShowEmpty="True"
          hc:WindowAttach.IsDragElement="False"
          AlternationCount="{Binding Items.Count, RelativeSource={RelativeSource Self}}"
          AutoGenerateColumns="False"
          CanUserReorderColumns="False"
          CanUserResizeColumns="False"
          CanUserResizeRows="False"
          CanUserSortColumns="False"
          ItemsSource="{Binding FireTableColumnMap.SkipRowRules}"
          RowHeight="{StaticResource NaN}"
          SelectionMode="Single"
          SelectionUnit="FullRow">
    <DataGrid.RowStyle>
        <Style BasedOn="{StaticResource DataGridRowStyle}"
               TargetType="{x:Type DataGridRow}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="{DynamicResource RegionBrush}" />

                </Trigger>

                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Background" Value="{DynamicResource LightPrimaryBrush}" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </DataGrid.RowStyle>

    <DataGrid.CellStyle>
        <Style BasedOn="{StaticResource DataGridCellStyle}"
               TargetType="{x:Type DataGridCell}">
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Background" Value="Transparent" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </DataGrid.CellStyle>

    <DataGrid.Columns>
        <DataGridTemplateColumn>
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <hc:SimpleStackPanel Orientation="Horizontal">
                        <Button hc:IconElement.Geometry="{StaticResource AlignHStretchGeometry}"
                                Foreground="{DynamicResource MyReverseBrush}"
                                Opacity="0.5"
                                Style="{StaticResource ButtonIcon}"
                                ToolTip="🟠 My final thought is to drag and drop this icon to sort row item" />

                        <TextBlock VerticalAlignment="Center"
                                   Foreground="{DynamicResource MyReverseBrush}"
                                   Text="{Binding AlternationIndex, RelativeSource={RelativeSource AncestorType=DataGridRow}, Converter={StaticResource AddOneConverter}, Mode=OneWay}" />
                    </hc:SimpleStackPanel>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>

        <DataGridTemplateColumn>
            <DataGridTemplateColumn.Header>
                <TextBlock Text="启用" />
            </DataGridTemplateColumn.Header>

            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate DataType="{x:Type m:FireTableSkipRowRule}">
                    <CheckBox HorizontalAlignment="Center"
                              IsChecked="{Binding IsEnabled}" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>

        <DataGridTemplateColumn Header="目标列">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate DataType="{x:Type m:FireTableSkipRowRule}">
                    <ComboBox DisplayMemberPath="Display"
                              ItemsSource="{Binding Data.FireTableRequiredColumnNumbers, Source={StaticResource DataContextProxy}}"
                              SelectedValue="{Binding TargetColumn, Converter={StaticResource EnumToIntConverter}}" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>

        <DataGridTemplateColumn MinWidth="100"
                                MaxWidth="278"
                                Header="匹配文本">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate DataType="{x:Type m:FireTableSkipRowRule}">
                    <TextBox Padding="8"
                             Text="{Binding MatchText}"
                             TextWrapping="Wrap" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>

        <DataGridTemplateColumn>
            <DataGridTemplateColumn.Header>
                <TextBlock Text="  区分&#x0A;大小写" />
            </DataGridTemplateColumn.Header>

            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate DataType="{x:Type m:FireTableSkipRowRule}">
                    <CheckBox HorizontalAlignment="Center"
                              IsChecked="{Binding IsMatchCase}" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>

        <DataGridTemplateColumn>
            <DataGridTemplateColumn.Header>
                <TextBlock Text="全字&#x0A;匹配" />
            </DataGridTemplateColumn.Header>

            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate DataType="{x:Type m:FireTableSkipRowRule}">
                    <CheckBox HorizontalAlignment="Center"
                              IsChecked="{Binding IsMatchWholeWord}" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>

        <DataGridTemplateColumn>
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Button hc:IconElement.Geometry="{StaticResource DeleteGeometry}"
                            Command="{Binding Data.DeleteSkipRowRuleCommand, Source={StaticResource DataContextProxy}}"
                            CommandParameter="{Binding}"
                            Foreground="{DynamicResource DangerBrush}"
                            Style="{StaticResource ButtonIcon}" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

Expected behavior

  1. Only the icons in the first column are allowed to be dragged and dropped for sorting
  2. When dragging and dropping, the indicator should not flash to the end when the mouse pointer is in the row gap

Screenshots

Image

Desktop (please complete the following information):

  • OS: [Win11 24h2 26100.3194]
  • gong-wpf-dragdrop [4.0.0]

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions