Drag Visual too close to the mouse arrow

10 posts, 1 answers
  1. tomas
    tomas avatar
    139 posts
    Member since:
    Sep 2012

    Posted 24 Apr 2013 Link to this post

    Hi Telerik,

    I am using the code from your example Tree To Grid Drag.

    e.DragVisualOffset = e.RelativeStartPoint

    private void OnDragInitialize(object sender, DragInitializeEventArgs e)
    {
        DropIndicationDetails details = new DropIndicationDetails();
        var listBoxItem = e.OriginalSource as System.Windows.Controls.ListBoxItem ?? (e.OriginalSource as FrameworkElement).ParentOfType<System.Windows.Controls.ListBoxItem>();
     
        var item = listBoxItem != null ? listBoxItem.DataContext : (sender as System.Windows.Controls.ListBox).SelectedItem;
        details.CurrentDraggedItem = item;
     
        IDragPayload dragPayload = DragDropPayloadManager.GeneratePayload(null);
     
        dragPayload.SetData("DraggedData", item);
        dragPayload.SetData("DropDetails", details);
     
        e.Data = dragPayload;
     
        e.DragVisual = new DragVisual()
        {
            Content = details,
            ContentTemplate = Application.Current.Resources["sboDragged"] as DataTemplate
        };
     
        e.DragVisualOffset = e.RelativeStartPoint;  //new Point(e.RelativeStartPoint.X+10 , e.DragVisualOffset.Y +10);
        e.AllowedEffects = DragDropEffects.All;
    }


    The problem is the I have no space between the arrow and the dragged visual but running your demo directly from your website there is a space between the mouse arrow and dragged border. 

    why is the same code not working for me please?

    My data template for the dragged data object is

    <DataTemplate x:Key="sboDragged">
                <Grid >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto" />
                        <RowDefinition Height="auto" />
                        <RowDefinition Height="auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto" />
                        <ColumnDefinition Width="auto" />
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="Dragged ... Name:"  />
                    <TextBlock Text="{Binding CurrentDraggedItem.Name}" Grid.Column="1" />
                    <TextBlock Text="Id:" Grid.Row="1"  />
                    <TextBlock Grid.Row="1" Text="{Binding CurrentDraggedItem.Id}" Grid.Column="1" />
                    <StackPanel Orientation="Horizontal" Grid.Row="2" Grid.ColumnSpan="2">
                        <TextBlock Text="{Binding CurrentDropPosition}" FontWeight="Bold" MinWidth="45"/>
                        <TextBlock Text=", (" Foreground="Gray" />
                        <TextBlock Text="{Binding CurrentDraggedOverItem.Name}"/>
                        <TextBlock Text=")" Foreground="Gray" />
                    </StackPanel>
                </Grid>
            </DataTemplate>

    It seems to me, that data template has nothing to do with it.

    http://www.telerik.com/help/silverlight/dragdrompmanager-howto-set-drag-visual.html

    In this example, the mouse arrow is in the centre of dragged border. How can I achieve this?

    Thank you very much. 

     

  2. Nick
    Admin
    Nick avatar
    593 posts

    Posted 25 Apr 2013 Link to this post

    Hi Tomas,

    The DragTemplates used in the examples are customized with some Margin values which gives the impression the Visual is with a bigger offset. You can do either that, or set the offset to be a little bigger so you get the same behavior.

    Let me know if I can help you further with this! 

    All the best,
    Nikolay Vasilev
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. tomas
    tomas avatar
    139 posts
    Member since:
    Sep 2012

    Posted 25 Apr 2013 Link to this post

    Hi Nikolay,

    Thank you, but I cannot find any drag template in these examples.

    Thank you for any help.

    Tom
  5. Nick
    Admin
    Nick avatar
    593 posts

    Posted 25 Apr 2013 Link to this post

    Hi Tom,

    You can see the templates defined in the Resources of the UserControls used.

    <DataTemplate x:Key="DragTemplate">
        <telerik:RadDockPanel Margin="2" MaxWidth="200">
            <TextBlock Text="{Binding Name}" telerik:RadDockPanel.Dock="Top" Foreground="{telerik:Windows8Resource ResourceKey=MainBrush}"/>
            <TextBlock Text="{Binding UnitPrice}" Foreground="{telerik:Windows8Resource ResourceKey=MainBrush}"
                       telerik:RadDockPanel.Dock="Left" />
            <TextBlock Text="{Binding Description}" telerik:RadDockPanel.Dock="Left"
                       Margin="2 0 0 0" Foreground="telerik:Windows8Resource ResourceKey=MainBrush" TextWrapping="Wrap" />
        </telerik:RadDockPanel>
    </DataTemplate>

    You can find the xaml in the code section of every example.

    Hope this helps!  Kind regards,
    Nikolay Vasilev
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. tomas
    tomas avatar
    139 posts
    Member since:
    Sep 2012

    Posted 25 Apr 2013 Link to this post

    Please, can you explain to me, why this datatemplate should add the space about 10 pixels around the dragged item from your example:Tree to grid drag?

    It seems to me, it is not possible. 

    Thank you very much. 

    BTW where are the pictures signaling the (un)possiblity of the drop?

    Tom

     
  7. Answer
    Nick
    Admin
    Nick avatar
    593 posts

    Posted 26 Apr 2013 Link to this post

    Hello Tomas,

    Well it is a combination of various margins actually that acumulate to the final amount. 

    As to the Forbidden drop sign, it is automatically applied when you use one of our DragVisuals and change the drag effects.

    Hope this helps!  

    Regards,
    Nikolay Vasilev
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  8. tomas
    tomas avatar
    139 posts
    Member since:
    Sep 2012

    Posted 26 Apr 2013 Link to this post

    Well, this is really funny reply,

    Can you tell me which data templates are accumulating the final result of the 10 pixels breathing space between the dragged border and the arrow of the cursor?

    Your suggested DragTemplate has nothing to do with it. You can try it yourself.

    Thank you very much.

    Tom
  9. Nick
    Admin
    Nick avatar
    593 posts

    Posted 01 May 2013 Link to this post

    Hello Tom,

    It appears you are right. The reported relative offset has an additional 10 pixels to its X coordinate resulting in the visual effect you see. As I mentioned before, you can use the relative strart point to set your offset however you want.

    Hope this makes sense! 

    Greetings,
    Nikolay Vasilev
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  10. tomas
    tomas avatar
    139 posts
    Member since:
    Sep 2012

    Posted 01 May 2013 Link to this post

    Hello Nikolay,

    Ok, so back to the basic.

    I would like to know, which functionality in your example Tree to grid drag is making that 10 pixels margin around the dragged visual cue.

    You can see there is no +10 in your source code:e.DragVisualOffset = e.RelativeStartPoint; 

    And I would like to get the correct response from you this time.

    Thank you very much.

    Tom
  11. Nick
    Admin
    Nick avatar
    593 posts

    Posted 06 May 2013 Link to this post

    Hello Tomas,

    As it turns out it is a result of the positioning of the controls in the Examples application that is isolated to it only. We are still working on identifying the exact cause.
    By default there are no additional pixels to the RelativeStartPoint. If you need the additional offset you can use the relative point, create a new one that has the necessary values and assign it to the DragVisualOffset. 

    Hope this makes sense! 

    All the best,
    Nik
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
DevCraft banner