解決Silverlight在ChildWindow中進行DragDrop操作問題

     在Codeplex網站上Silverlight Toolkit中,提供了Items controls 控件的拖拽操作支持,可以很方便的對Items Controls(如：ListBox，TreeView）進行拖拽操作。更多有關示例可以查看Silverlight Toolkit Demo。

     首先下載 Toolkit 安裝包，新建一個Silverlight應用程序，添加對System.Windows.Controls.Toolkit.dll引用，在XAML中添加命名空間xmlns:toolkit ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit" 的引用。因為ListBoxDragDropTarget在該命名空間下。

     添加兩個ListBox，並分別添加到ListBoxDragDropTarget中，將AllDrop設置為True。

       <toolkit:ListBoxDragDropTarget Grid.Column="0" Grid.Row="3"
                AllowDrop="true" HorizontalContentAlignment="Stretch"
                VerticalContentAlignment="Stretch" Width="200">
            <ListBox x:Name="fromListBox" DisplayMemberPath="Name"
                    SelectionMode="Multiple">
            </ListBox>
            </toolkit:ListBoxDragDropTarget>
       <toolkit:ListBoxDragDropTarget Grid.Column="0" Grid.Row="3"
                AllowDrop="true" HorizontalContentAlignment="Stretch"
                VerticalContentAlignment="Stretch" Width="200" >
       <ListBox x:Name="toListBox" DisplayMemberPath="Name" SelectionMode="Multiple" >
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Vertical" />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
            </ListBox>
       </toolkit:ListBoxDragDropTarget>

在后台代碼中分別給兩個ListBox設置數據源：

ObservableCollection<People> fromList = new ObservableCollection<People> ();
ObservableCollection<People> toList = new ObservableCollection<People>();

fromListBox.ItemsSource = fromList;
toListBox.ItemsSource = toList;

並添加相應數據，People類定義：

public class People
    {
        public string Name { set; get; }
        public int Age { set; get; }
        public People(string name , int age)
        {
            this.Name = name;
            this.Age = age;
        }
    }

運行，即可進行拖拽操作：

     但是，當我想在ChildWindow中，使用同樣的代碼進行拖拽操作，卻總是不能成功，似乎拖拽操作被禁止。

     最后在官網上，找到了相應問題的解決辦法和原因。

     原因：

          ChildWindow是一個彈出式窗口，並且在一個單獨的visual tree中，所以當前的visual tree並不知道它的存在。

     解決辦法：

           替代的解決辦法是，將ChildWindow添加到當前的visual tree中，並通過設置Visibility 屬性，來控制ChildWindow的Open/Close。

MainPage.xaml

ChildWindow1 cw;
        public MainPage()
        {
            InitializeComponent();
            cw = new ChildWindow1();
            LayoutRoot.Children.Add(cw);
            cw.Visibility = System.Windows.Visibility.Collapsed;
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            cw.Visibility = System.Windows.Visibility.Visible; //Show ChildWindow
        }

ChildWindow.xaml

private void OKButton_Click(object sender, RoutedEventArgs e)
        {
            this.DialogResult = true;
            this.Visibility = System.Windows.Visibility.Collapsed;
        }

     如此就可以在ChildWindow中進行拖拽操作，但是此時的窗口背景沒有被禁止操作，為了盡量達到相同的效果。在可以ChildWindow中添加一個Border，並將其背景設置為Gray,透明度設置為0.5,Visiblity設置為Collapsed，在ChildWIndow初始化后將這個Border的Visiblity設置為Visible，退出時設置為Collapsed：

MainPage.xaml

<UserControl.. .>

<Grid x:Name="LayoutRoot".. . > // …………

  //   你的代碼

  //   . . .. .

 <Border Background="Gray" Visibility="Collapsed" Opacity="0.5"
                x:Name="border_childWindow" />

<Grid>

</UserControl> 

ChildWindow.xaml

private void OKButton_Click(object sender, RoutedEventArgs e)
        {
            this.DialogResult = true;
            this.Visibility = System.Windows.Visibility.Collapsed;
            MainPage.mainPage.border_childWindow.Visibility = Visibility.Collapsed;
        }
public ChildWindow1()
        {
            InitializeComponent();
            ............
            MainPage.mainPage.border_childWindow.Visibility = Visibility.Visible;
        }

如此，就完整的達到了，在ChildWindow中利用silverlight toolkit對items controls進行拖拽操作！