Draggable Popup with Silverlight 3

As an Asp.net developer, I always liked the AJAX Modal Popup Extenders and used it extensively. As I move into RIA technologies with Silverlight 3, I find that the out-of-the-box popup control does not have the drag feature. To me, this is not good because more often than not we would like such Popups to be drag-enabled. A little bit of work around was all it took to make this popup drag-enabled. Thought it is worth sharing …

XAML:


<Popup Name="pop" Width="150" Height="200" >
   <StackPanel
       Name="stkPopup"
       Width="150"
       Height="200"
       Background="Gray"
       MouseLeftButtonDown="MouseDown"
       MouseMove="MouseMove"
       MouseLeftButtonUp="MouseUp">
          <StackPanel
             Width="150"
             Height="18"
             Background="Blue" >
              <TextBlock
                 FontSize="14"
                 Width="100" >
                    Infomation
              </TextBlock>
          </StackPanel>
          <TextBlock>
             DATA: my data.
          </TextBlock>
          <Button
             x:Name="btnClose"
             Click="btnClose_Click"
             Height="15"
             Width="15"/>
   </StackPanel>
</Popup
>

C# Code:


private void MouseDown(object sender, MouseButtonEventArgs e)
{
   Popup item = (sender as StackPanel).Parent as Popup;
   mouseY = e.GetPosition(null).Y;
   mouseX = e.GetPosition(null).X;
   isMouseCaptured = true;
   (item.Child as StackPanel).CaptureMouse();
}

private void MouseMove(object sender, MouseEventArgs e)
{
   Popup item = (sender as StackPanel).Parent as Popup;
   if (isMouseCaptured)
   {
      double deltaV = e.GetPosition(null).Y - mouseY;
      double deltaH = e.GetPosition(null).X - mouseX;
      double newTop = deltaV + (double)item.GetValue(Canvas.TopProperty);
      double newLeft = deltaH + (double)item.GetValue(Canvas.LeftProperty);
      item.SetValue(Canvas.TopProperty, newTop);
      item.SetValue(Canvas.LeftProperty, newLeft);
      mouseY = e.GetPosition(null).Y;
      mouseX = e.GetPosition(null).X;
   }
}

private void MouseUp(object sender, MouseButtonEventArgs e)
{
   Popup item = (sender as StackPanel).Parent as Popup;
   isMouseCaptured = false;
   (item.Child as StackPanel).ReleaseMouseCapture();
   mouseY = -1;
   mouseX = -1;
}

This sufficed my need for now. But going ahead, I am planning to make it truly “Modal” and package into a reusable user control. But that’s for the next post. Till then … happy coding.

Advertisements

One thought on “Draggable Popup with Silverlight 3

  1. I came to your “Draggable Popup with Silverlight 3 | Coding Craft” page and noticed you could have a lot more traffic. I have found that the key to running a website is making sure the visitors you are getting are interested in your subject matter. There is a company that you can get traffic from and they let you try it for free. I managed to get over 300 targetted visitors to day to my website. Check it out here: http://voxseo.com/traffic/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s