Adding Images on Silverlight 4 using drag and drop and the web camera.

Silverlight 4 brings a few features that I could use since version 2, the biggest improvement in my case is Drag and Drop support, I really see many different use cases for that particular feature. I created a little test to see how it works and how much code is required to use. The use case is simple, drag and drop an image into a map and added into the graphic layer at the position dropped. For the test I’ll use the ArcGIS API for Microsoft Silverlight™/WPF™ version 1.1 that you can download here.

 

image

I need to wire the map control to allow dropping, even if I reference dlls compiled in Silverlight 3 the controls now will have the property AllowDrop to set it to true or false and the event Drop to catch when a object gets drop on top of the control. Also in the contructor we are going to initialize the CaptureSource for our web camera.

        public MainPage()
        {
            InitializeComponent();

            MyMap.AllowDrop = true;
            MyMap.Drop += new DragEventHandler(MyMap_Drop);

            _captureSource = new CaptureSource();

            _draw = new Draw(MyMap);
            _draw.DrawComplete += new EventHandler<DrawEventArgs>(_draw_DrawComplete);
        }
 

The drop event will receive the data dropped on the object, you can received more than one object at the time, in this sample I only care about the first file to added it into a graphic layer on top of the map. I’ll get the point and I’ll read the file drop to add it as an image. Make sure you only drop images in this case. The drag and drop control argument also comes with the method to get the position where the object was dropped.

void MyMap_Drop(object sender, DragEventArgs e)
        {
            IDataObject mydata = e.Data;

            FileInfo[] fileInfo = (mydata.GetData(mydata.GetFormats()[0])) as FileInfo[];

            if (MyMap.Extent != null)
            {
                System.Windows.Point screenPoint = e.GetPosition(MyMap);                

                ESRI.ArcGIS.Client.Geometry.MapPoint mapPoint = MyMap.ScreenToMap(screenPoint);
                
                GraphicsLayer myGraphicLayer = MyMap.Layers["myGraphicLayer"] as GraphicsLayer;

                BitmapImage source = new BitmapImage();
                source.SetSource(fileInfo[0].OpenRead());

                Graphic grap = new Graphic()
                {
                    Geometry = mapPoint,
                    Symbol = new ESRI.ArcGIS.Client.Symbols.PictureMarkerSymbol()
                    {
                        Source = source,
                        Width = 20,
                        Height = 20
                    }
                };

                myGraphicLayer.Graphics.Add(grap);
            }

        }
 

Also you can take a picture and added into the map, we created above. In this case we add a polygon and will fill it with the picture we took using the web camera connected to the local computer.

image 

private void Button_Click_3(object sender, RoutedEventArgs e)
        {
            if (_captureSource.State == CaptureState.Started)
            {
                ESRI.ArcGIS.Client.Geometry.Polygon poly = new ESRI.ArcGIS.Client.Geometry.Polygon();
                GraphicsLayer myGraphicLayer = MyMap.Layers["myGraphicLayer"] as GraphicsLayer;
                _captureSource.Stop();
                // create the brush 
                VideoBrush vidBrush = new VideoBrush(); 
                vidBrush.SetSource(_captureSource);

                Graphic gr = new Graphic()
                {
                    Geometry = poly,
                    Symbol = new ESRI.ArcGIS.Client.Symbols.SimpleFillSymbol()
                    {                       
                        Fill = vidBrush                       
                    }
                };

                myGraphicLayer.Graphics.Add(gr);
                ButtonPic.Visibility = System.Windows.Visibility.Collapsed;
            }
            else
            {
                // request user permission and display the capture  
                if (CaptureDeviceConfiguration.AllowedDeviceAccess || CaptureDeviceConfiguration.RequestDeviceAccess())
                {

                    ButtonPic.Visibility = System.Windows.Visibility.Visible;
                    _captureSource.Start();
                }
            }
        }

Without any doubt Silverlight 4 has features that are going to make developers simplify their use cases and more flexibility in writing the code, in a few simple lines of code I was able to add images on top of a control as well as an image coming from the web camera into a created object. I for one, looking forward to the release of Silverlight 4, this is the version we have been waiting for.

Need the XAML for the Map and Graphics Layer?

       <esri:Map x:Name="MyMap">
            <esri:Map.Layers>
                <esri:ArcGISTiledMapServiceLayer ID="basemap"
                   Url="http://services.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer" />
                <esri:GraphicsLayer ID="myGraphicLayer" />
            </esri:Map.Layers>
        </esri:Map>

Read my Silverlight 4 related posts

Cheers

Al

Follow me in twitter | bookmark me | Subscribe to my feed | Add stats to your blog

None of my opinions reflects opinions or views by my employer nor Microsoft. This is just my personal blog that is provided "AS IS" with no warranties and confer no rights. The postings on this site are my own and don’t necessarily represent ESRI’s positions, strategies or opinions.

1 Comment

Comments have been disabled for this content.