Problems with using Canvas in Listbox RRS feed

  • Question

  • I am trying to set the Canvas properties in a Listbox with Silverlight 4. After running this program, you can see two columns, with two buttons initially in the right one. The left column isn't important to me. But I want to be able to drag the buttons anywhere in the right-hand side column. But whenever I drag the buttons to the left column and then drag them around in the right column, they always get placed in the upper-left corner. In the right-hand side column, why can't I place them somewhere else, such as in the middle or lower-right corner?

    I have already read the article "One more platform difference more-or-less tamed [SetterValueBindingHelper makes Silverlight Setters better!]" by David Anson and used the SetterValueBindingHelper, but it still doesn't work

    The sole purpose of this program is to be able to drag multiple buttons simultaneously. I was only able to do this by creating a Listbox and then setting the SelectionMode to 'Multiple'

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    namespace SilverlightBusinessDragDrop
        public partial class MainPage : UserControl
            string BoxSelected = string.Empty;
            ListBox bs = new ListBox();
            ListBox bd = new ListBox();
            List<string> SourceNames = new List<string>();
            List<string> DestinationNames = new List<string>();
            public MainPage()
            private void CreateObjects()
                ListBoxDragDropTarget source = new ListBoxDragDropTarget();
                source.Drop += new Microsoft.Windows.DragEventHandler(dest_Drop);
                source.AllowDrop = true;
                box1.Margin = new Thickness(1, 1, 0, 0);
                box1.Background = new SolidColorBrush(Colors.Transparent);
                box1.Width = 240;
                box1.Height = 360;
                // Create Items for the List Box
                ListBoxItem i1 = new ListBoxItem();
                i1.BorderBrush = new SolidColorBrush(Colors.Orange);
                i1.BorderThickness = new Thickness(1);
                i1.Name = "1";
                Button s1 = new Button();
                s1.Content = "button1";
                s1.Background = new SolidColorBrush(Colors.Yellow);
                s1.Width = 80;
                s1.Height = 50;
                ListBoxItem i2 = new ListBoxItem();
                i2.BorderBrush = new SolidColorBrush(Colors.Red);
                i2.BorderThickness = new Thickness(1);
                i2.Name = "2";
                Button s2 = new Button();
                s2.Content = "button2";
                s2.Background = new SolidColorBrush(Colors.Green);
                s2.Width = 87;
                s2.Height = 50;
                i1.Content = s1;
                i2.Content = s2;
                Canvas column2 = new Canvas();
                column2.Margin = new Thickness(200, 0, 0, 0);
                column2.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;
                column2.VerticalAlignment = System.Windows.VerticalAlignment.Bottom;
                column2.Width = 150;
                column2.Height = 400;
                TextBlock hdr2 = new TextBlock();
                hdr2.Text = "Column 2";
                hdr2.Height = 30;
                hdr2.Margin = new Thickness(0, 0, 0, 0);
                hdr2.HorizontalAlignment = System.Windows.HorizontalAlignment.Center;
                hdr2.VerticalAlignment = System.Windows.VerticalAlignment.Top;
                ListBoxDragDropTarget dest = new ListBoxDragDropTarget();
                dest.Drop += new Microsoft.Windows.DragEventHandler(dest_Drop);
                dest.AllowDrop = true;
                ListBox box2 = new ListBox();
                box2.Name = "Column2";
                box2.Margin = new Thickness(1, 1, 0, 0);
                box2.Background = new SolidColorBrush(Colors.Transparent);
                box2.FlowDirection = System.Windows.FlowDirection.LeftToRight;
                box2.HorizontalAlignment = System.Windows.HorizontalAlignment.Right;
                box2.VerticalAlignment = System.Windows.VerticalAlignment.Stretch;
                box2.Width = 140;
                box2.Height = 360;
                dest.Content = box2;
            void dest_Drop(object sender, Microsoft.Windows.DragEventArgs e)
            // Here we handle the object that was dropped
                var format = e.Data.GetFormats()[0];
                ItemDragEventArgs dragItem = e.Data.GetData(format) as ItemDragEventArgs;
                bs = (ListBox)dragItem.DragSource;
                ListBoxDragDropTarget b = (ListBoxDragDropTarget)sender;
                bd = (ListBox)b.Content;

    and the XAML

    <UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"  x:Class="SilverlightBusinessDragDrop.MainPage"
        d:DesignHeight="500" d:DesignWidth="600">
        <Grid x:Name="LayoutRoot" Background="White">
            <TextBlock Margin="20,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Text="Silverlight Business Drag and Drop" FontSize="16"></TextBlock>
            <Grid x:Name="DragDropRoot" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="40,40,0,0">
                <toolKit:ListBoxDragDropTarget AllowDrop="True">
                    <ListBox Canvas.Left="76" Canvas.Top="62" x:Name="box1" Height="200" Width="200"  SelectionMode="Multiple"
                                DisplayMemberPath="Name" VerticalContentAlignment="Center">
                        <Style  TargetType="ListBoxItem">
                            <Setter Property="local:SetterValueBindingHelper.PropertyBinding">
                                        <local:SetterValueBindingHelper Type="Canvas" Property="Left" Binding="{Binding X}" />
                                        <local:SetterValueBindingHelper Type="Canvas" Property="Top" Binding="{Binding Y}" />
                                        <local:SetterValueBindingHelper Type="Canvas" Property="ZIndex" Binding="{Binding ZIndex.Value}" />
                            <Setter Property="Template">
                                    <ControlTemplate TargetType="ListBoxItem">
                                <Canvas  />

    • Moved by Caillen Wednesday, July 24, 2013 1:26 AM
    Tuesday, July 23, 2013 5:01 AM

All replies

  • I did not go through your code but here is a suggestion on the right-hand side column were you want to drag buttons too, you can place a grid inside and then place smaller canvass inside  that grid that way you can drag at any point you want in the grid were there is a particular canvas ...
    Tuesday, January 13, 2015 12:03 PM