Dran objects to StackPanel

[Justin]

Hi,

I tried to drag a object from ListBox control to a StackPanel control which doesn't contain any child control, buh the drop operation was failed.

But when I added a child control like TextBlock inside the StackPanel, then I can drag the object into the StackPanel.

Does anyone know the reason why I failed to drop a object into a StackPanel which doesn't contain any child control?

Thanks

Justin 

[Milan]

Hello Justin,

Maybe the StackPanel has ActualWidth and ActualHeight equal to 0 when it does not contain any children and there is no way to drop onto it. You could try setting MixHeight/MixWidth to the StackPanel and see if you are able to drop.

Kind regards,
Milan
the Telerik team

[Justin]

Hi,

I did not set the Height and Width to auto size. Event I set the MaxHeight and MaxWith, I still can not drop object into the StackPanel.

Here is my code:

 

    <UserControl.Resources>
        <DataTemplate x:Key="ApplicationDragTemplate">
            <Image Source="{Binding IconPath}" Stretch="None" VerticalAlignment="Top" />
        </DataTemplate>
        <Style TargetType="ListBoxItem" x:Key="draggableItemStyle">
            <Setter Property="dragDrop:RadDragAndDropManager.AllowDrag" Value="True" />
        </Style>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
            <ColumnDefinition Width="150" />
            <ColumnDefinition Width="450" />
        </Grid.ColumnDefinitions>
        <!--All Applications-->

        <!--Text-->
        <ListBox x:Name="allApplicationsBox" Margin="3,3,5,34" BorderThickness="0"
         dragDrop:RadDragAndDropManager.AllowDrop="True" Background="Transparent" ItemContainerStyle="{StaticResource draggableItemStyle}">
            <ListBox.ItemTemplate>
                <DataTemplate >
                 <Grid Width="150">
                  <Grid.RowDefinitions>
                   <RowDefinition />
                   <RowDefinition />
                   <RowDefinition />
                  </Grid.RowDefinitions>
                  <Image Grid.Row="0" HorizontalAlignment="Center"
                   Source="{Binding IconPath}" Width="32" Height="32"
                   Margin="0 0 5 0" />
                  <TextBlock Grid.Row="1" Text="{Binding Name}" FontWeight="Bold"
                   HorizontalAlignment="Center" />
                  <TextBlock Text="{Binding Author}" Grid.Row="2"
                   HorizontalAlignment="Center" />
                 </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

        <!--Text-->
        <Border Grid.Column="1" Background="#1f2759" CornerRadius="5" VerticalAlignment="Center"
    HorizontalAlignment="Center">
            <TextBlock Text="Drag applications from All Applications to My Applications."
     Foreground="#FFFFFF" HorizontalAlignment="Center" TextWrapping="Wrap"
     Margin="10" FontSize="10" />
        </Border>
        <!--My Applications-->

         <Grid Grid.Column="2" Width="400" Height="250">
          <Grid.RowDefinitions>
           <RowDefinition />
           <RowDefinition/>
          </Grid.RowDefinitions>

            <StackPanel Width="400" Height="100"  x:Name="stackTop" Grid.Row="0" dragDrop:RadDragAndDropManager.AllowDrop="True" Margin="0,0,0,10" MaxHeight="100" MaxWidth="400">
                <Grid x:Name="grdContainer2">

                </Grid>
            </StackPanel>

                <StackPanel x:Name="stackBottom" Margin="0,10,0,0" Grid.Row="1" dragDrop:RadDragAndDropManager.AllowDrop="True" MaxHeight="100" MaxWidth="400"  Width="400" Height="100">

                <Grid x:Name="grdContainer">
                    </Grid>
            </StackPanel>
        </Grid>

    </Grid>
</UserControl>

    ObservableCollection<ApplicationInfo> allApplications = GenerateApplicationInfos();
    ObservableCollection<ApplicationInfo> myApplications;
    Brush listBoxDragPossible = new SolidColorBrush(Colors.Orange);
    public static ObservableCollection<ApplicationInfo> GenerateApplicationInfos()
    {
        return new ObservableCollection<ApplicationInfo>()
        {
            new ApplicationInfo()
            {
                Name = "Large Collider",
                Author = "C.E.R.N.",
                IconPath = @"../Images/DragAndDrop/LargeIcons/Atom.png"
            },
            new ApplicationInfo()
            {
                Name = "Paintbrush",
                Author = "Imagine Inc.",
                IconPath = @"../Images/DragAndDrop/LargeIcons/Brush.png"
            },
            new ApplicationInfo()
            {
                Name = "Lively Calendar",
                Author = "Control AG",
                IconPath = @"../Images/DragAndDrop/LargeIcons/CalendarEvents.png"
            },
            new ApplicationInfo()
            {
                Name = "Fire Burning ROM",
                Author = "The CD Factory",
                IconPath = @"../Images/DragAndDrop/LargeIcons/CDBurn.png"
            },
            new ApplicationInfo()
            {
                Name = "Fav Explorer",
                Author = "Star Factory",
                IconPath = @"../Images/DragAndDrop/LargeIcons/favorites.png"
            },
            new ApplicationInfo()
            {
                Name = "IE Fox",
                Author = "Open Org",
                IconPath = @"../Images/DragAndDrop/LargeIcons/Connected.png"
            },
            new ApplicationInfo()
            {
                Name = "Charting",
                Author = "AA-AZ inc",
                IconPath = @"../Images/DragAndDrop/LargeIcons/ChartDot.png"
            },
            new ApplicationInfo()
            {
                Name = "SuperPlay",
                Author = "EB Games",
                IconPath = @"../Images/DragAndDrop/LargeIcons/Games.png"
            }
        };
    }
    public MyDragAndDropSample2()
    {
        InitializeComponent();
        myApplications = new ObservableCollection<ApplicationInfo>();
        allApplicationsBox.ItemsSource = allApplications;
        RadDragAndDropManager.AddDragQueryHandler(this, OnDragQuery);
        RadDragAndDropManager.AddDragInfoHandler(this, OnDragInfo);
        RadDragAndDropManager.AddDropQueryHandler(this, OnDropQuery);
        RadDragAndDropManager.AddDropInfoHandler(this, OnDropInfo);
    }
    void OnDragInfo(object sender, DragDropEventArgs e)
    {
        ListBoxItem listBoxItem = e.Options.Source as ListBoxItem;
        ListBox box = ItemsControl.ItemsControlFromItemContainer(listBoxItem) as ListBox;
        IList<ApplicationInfo> itemsSource = box.ItemsSource as IList<ApplicationInfo>;
        ApplicationInfo payload = e.Options.Payload as ApplicationInfo;
    }
    protected virtual void OnDragQuery(object sender, DragDropQueryEventArgs e)
    {
        ListBoxItem listBoxItem = e.Options.Source as ListBoxItem;
        ListBox box = ItemsControl.ItemsControlFromItemContainer(listBoxItem) as ListBox;
        if (e.Options.Status == DragStatus.DragQuery && box != null)
        {
            e.Options.Payload = box.SelectedItem;
            ContentControl cue = new ContentControl();
            cue.ContentTemplate = this.Resources["ApplicationDragTemplate"] as DataTemplate;
            cue.Content = box.SelectedItem;
            e.Options.DragCue = cue;
            e.Options.ArrowCue = RadDragAndDropManager.GenerateArrowCue();
        }
        e.QueryResult = true;
    }
    private void OnDropInfo(object sender, DragDropEventArgs e)
    {
        StackPanel grd = e.Options.Destination as StackPanel;
        ApplicationInfo payload = e.Options.Payload as ApplicationInfo;
        if (e.Options.Status == DragStatus.DropPossible)
        {
            if (grd != null)
            {
                grd.Background = listBoxDragPossible;
                //grdContainer.Children.Clear();
            }
        }
        else
        {
            if (grd != null)
            {
                grd.Background = new SolidColorBrush(Colors.Gray);
            }
        }
        if (e.Options.Status == DragStatus.DropComplete)
        {
            if (grd != null)
            {
                //Grid.SetColumn(e.Options.Source, Grid.GetColumn(e.Options.Destination));
                //Grid.SetRow(e.Options.Source, Grid.GetRow(e.Options.Destination));
                //e.Options.Source.Visibility = Visibility.Visible;
                if (payload.Name == "Large Collider")
                {
                    MyTreeview tree = new MyTreeview();
                    grdContainer.Children.Add(tree);
                }
                else
                {
                    About abt = new About();
                    grdContainer.Children.Add(abt);
                }
            }
            // txtBlock.Text = payload.Name;
       }
    }
    void OnDropQuery(object sender, DragDropQueryEventArgs e)
    {
        e.QueryResult = true; ;
    }
}

[Milan]

Hello Justin,

You should also set some sort of Background to the panel so that RadDragAndDropManager is capable of capturing drag/drop events. Setting Background to Transparent on your StackPanel instances should resolve the problem. 

Kind regards,
Milan
the Telerik team