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.

Bing Map Silverlight Control Released

I had been playing around with the Bing Map Silverlight Control CPT for quite sometime now and was really thrilled to find out that it has finally been released. Great news for all the MS developers who wanted to get rid of the pain of coding JavaScript to integrate Maps to their application. The control leverages the power and richness of Silverlight technology. The interactive SDK looks really cool. Microsoft can really make a big impact on the GIS front with the Bing Map Silverlight Control.

There is, however, a point concern. Microsoft has altered the Terms and conditions for usage. Here is a list of some of the features in the Bing Maps Silverlight Control v1.0:

• Silverlight 3 enabled,
• Position Silverlight UIElements on the Map,
• Data Binding with the MapItemsControl,
• Bing Maps Web Services support,
• World Wrap / infinite pan across the dateline,
• Design-time integration with Expression Blend,
• Scripting interface for coding with JavaScript,
• cool Online Interactive SDK.

Here are some useful links to try out the new Bing Maps Silverlight Control:

• Download Bing Maps Silverlight Control
• Bing Maps Silverlight Control Interactive SDK
• Bing Maps Silverlight Control SDK
• Bing Maps Account Center

Hope this was useful.