Gong drag and drop : la bordure de l'effet de glisser ne s'adapte pas à l'élément

Question

En utilisant le cadre de glisser-déposer de Gong, on obtient un effet de glisser-déposer, qui est une simple bordure autour de la cible possible du glisser-déposer.

Cependant, dans mon cas, pour une raison quelconque, cette bordure ne correspond pas à l'élément réel, comme on peut le voir ici :

J'ai déjà essayé de changer les couleurs de fond des différents éléments xaml de la cible de dépôt pour savoir si certains éléments sont plus grands (mais cachés), mais je n'ai rien trouvé.

Je suppose que le problème est dû à l'utilisation de viewboxes, que j'utilise, puisque la taille de ces cibles de dépôt est dynamique et zoomable.

Voici le code xaml de la cible de dépôt :

<Border BorderThickness="{Binding PlatformBorderThickness}"  dd:DragDrop.IsDropTarget="True" dd:DragDrop.DropHandler="{StaticResource CustomDropHandler}" >
    <Border.BorderBrush>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0" >
            <GradientStop Color="Black" Offset="0"/>
            <GradientStop Color="Black" Offset="0.1"/>
            <GradientStop Color="Transparent" Offset="0.1"/>
            <GradientStop Color="Transparent" Offset="0.9"/>
            <GradientStop Color="Black" Offset="0.9"/>
            <GradientStop Color="Black" Offset="1"/>
        </LinearGradientBrush>
    </Border.BorderBrush>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="10*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="10*"/>
        </Grid.RowDefinitions>

        <Viewbox Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1" HorizontalAlignment="Left">
            <TextBlock Text="{Binding Equipment.Name, FallbackValue='Please add a device!'}" FontWeight="Bold"/>
        </Viewbox>
        <Viewbox Grid.Column="1" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1" Stretch="Uniform"  HorizontalAlignment="Right">
            <Button  Command="{Binding DeleteButtonClick}" Background="Transparent" BorderThickness="0"
            Margin="0" Padding="0">
                <Image Source="/Resources/Cancel.ico"/>
            </Button>
        </Viewbox>

        <Viewbox Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="1" Grid.RowSpan="1" HorizontalAlignment="Left" VerticalAlignment="Top" Stretch="Uniform" Margin="2">
        <DataGrid Width="200" Height="135" HeadersVisibility="None" RowBackground="Transparent" BorderThickness="0"
                  ItemsSource="{Binding Equipment.Settings}" SelectionMode="Single" AutoGenerateColumns="False" GridLinesVisibility="Vertical" CanUserAddRows="False"
                  GotFocus="DataGrid_GotFocus" Name="DutInfoGrid" >
            <DataGrid.Resources>
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black"/>
                <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/>
            </DataGrid.Resources>
            <DataGrid.Background>
                <ImageBrush ImageSource="{Binding Equipment.ImagePath, FallbackValue={StaticResource AddItemImage}, TargetNullValue={StaticResource AddItemImage}}"
                                Stretch="Fill" Opacity="0.25"/>
            </DataGrid.Background>
            <DataGrid.Columns>
                <DataGridTemplateColumn >
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Button Name="DutInfoGridRemoveButton" Background="Transparent" BorderThickness="0" Margin="0" Padding="0" Height="15"
                                    Command="{Binding Path=DataContext.RemoveClick, RelativeSource= {RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}}"
                                    CommandParameter="{Binding}">
                                <Image Source="/Resources/Trash.ico"/>
                            </Button>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTextColumn  Binding="{Binding Items[3].Value}"/>
                <DataGridTextColumn  Binding="{Binding Items[6].Value}" />
            </DataGrid.Columns>
        </DataGrid>
        </Viewbox>
    </Grid>
</Border>

Edit :

Après quelques tests supplémentaires, j'ai découvert que si je supprime l'élément ViewBox autour de la grille de données, le problème disparaît. Avez-vous une idée de la raison pour laquelle le ViewBox cause ce problème et comment le résoudre ?

Answer 1

Vous devriez probablement passer au fichier d'action, puis permuter et utiliser jQuery avec le code XML qui fera référence au glisser-déposer.