Gong drag and drop: drag effect border does not fit element

Viewed 212

Using the gong drag and drop framework, one gets a drag effect, which is a simple border around the possible droptarget.

However, in my case for some reason this border doesn't fit the actual element, as shown here: enter image description here

I have already tried to change background colors of the different xaml elements of the drop target to find out if some elements are bigger (but hidden), but couldn't find any.

I guess the problem is due to the usage of viewboxes, which I use, since the size of these drop targets is dynamic and zoom-able.

Here is the xaml code of drop target:

<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:

After some further testing I found out that if I remove the ViewBox element around the datagrid, the problem is gone. Any ideas, why the ViewBox causes this issue and how to solve it?

1 Answers

You should probably switch to the action file, then swap and use jQuery with the XML code which will refer to the drag and drop.

Related