Designing a WPF map control - wpf

I'm thinking about making a simple map control in WPF, and am thinking about the design of the basic map interface and am wondering if anyone has some good advice for this.
What I'm thinking of is using a ScrollViewer (sans scroll bars) as my "view port" and then stacking everything up on top of a canvas. From Z-Index=0 up, I'm thinking:
Base canvas for lat/long calculations, control positioning, Z-Index stacking.
Multiple Grid elements to represent the maps at different zoom levels. Using a grid to make tiling easier.
Map objects with positional data.
Map controls (zoom slider, overview, etc).
Scroll viewer with mouse move events for panning and zooming.
Any comments suggestions on how I should be building this?

If you're looking for a good start, you can use the foundation of code supplied by the SharpMap project and build out from there. If I recall there were a few people already working on a WPF renderer for SharpMap, so you may also have some code to begin with.
I've personally used SharpMap in a C# 2.0 application that combined GIS data with real time GPS data, and it was very successful. SharpMap provided me the transformation suite to handle GIS data, along with the mathematical foundation to work with altering GIS information. It should be relatively straightforward to use the non-rendering code with a WPF frontend, as they already have presentation separated from the data.
(EDIT: added more details about how I used SharpMap)

It is probably a roundabout way of going about it, but you might find some useful stuff in the javascript and XAML from SilverlightEarth.com which a Silverlight 1.0-based map-tile-client. It can load VE, Google, Yahoo (there is a DeepZoom version that can load OpenStreetMap, Moon and Mars too; but since it uses MSI it doesn't really help on the WPF 3/3.5 front).
Although the javascript is a little untidy, you can clearly see it is creating a Silverlight 1.0 Xaml (dynamically sized) Canvas, filling it with tiles (Image controls) and handling zoom in/out and pan requests. You would need to make sense of all the javascript and convert it to C# - the XAML should mostly come into WPF unaltered. I have tested this Silverlight 1.0 with a Deep Zoom tile pyramid (and here) so the concepts are applicable (ie. not just for maps).
I know this works because I have done it myself to build the map viewer in Geoquery2008.com (screenshot) which is WPF/c#. Unfortunately the Geoquery2008 assemblies are obfuscated, but you might still glean some ideas or useful code via DASM/Reflector. It is still a beta so I wouldn't claim it is 100% done. I hadn't really thought of factoring out the map code into a separate control but may I will look into that if another one doesn't appear...
Incidentally I also started off with the ScrollViewer, but am planning to ditch it and mimic the javascript more closely so it's easier to re-use Image objects when panning/zooming (by gaining more control over the process than ScrollViewer provides).
These MSDN pages on the Virtual Earth tile system and the Deep Zoom file format and related links is probably also a useful reference.
Finally - I guess you've seen since this post that DeepZoom/MultiScaleImage is likely to be in .NET 4.0/Studio 2010.

Your desire to create a WPF mapping tool is similar to mine, which lead me to ask this question about DeepZoom (aka MultiScaleImage) from Silverlight. I want a WPF version. The accepted answer provides a link to a very good starting point (similar to your described thought process).

Virtual Earth has something favour to WPF

Don't know if you use ESRI software, but I hear there developing a Silverlight API for there stack so you might want to hold off.

It does not fall on my field of work at all, but you may have a look at MapWindow GIS, which has an Open Source ActiveX object that provides a lot of mapping and GIS features.
Here is a post explaining how to embed it on WPF applications:
http://www.mapwindow.org/phorum/read.php?13,13484

Download Bing Maps WPF Control sdk(Microsoft.Maps.MapControl.WPF.dll).Add as dll as referance,then change the XAML as below
**
<Window x:Class="WPFTestApplication.InsertPushpin"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:m="clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF"
Width="1024" Height="768">
<Grid x:Name="LayoutRoot" Background="White">
<m:Map CredentialsProvider="INSERT_YOUR_BING_MAPS_KEY"
Center="47.620574,-122.34942" ZoomLevel="12">
<m:Pushpin Location="47.620574,-122.34942"/>
</m:Map>
</Grid>
</Window>
**

The main question is how you store and access the items you are going to put in the map (assuming this isn't just a picture display). Lookup scenegraph for some ideas.
Also if you want it to be more than a toy image viewer the lat long to XY scaling can get 'interesting'

Don't build it yourself - use the WPF Bing Maps Control
http://www.bing.com/community/site_blogs/b/maps/archive/2012/01/12/announcing-the-bing-maps-windows-presentation-foundation-control-v1.aspx

the Bing Maps Windows Presentation Foundation Control v1 is best map control in WPF.
Support for tile layers – you can now overlay your own tile layers atop the map control.
Turning off the base tile layer – this is useful for when you don’t need/want to use our base map tiles and instead would prefer to use your own without overlaying them atop of ours.The control won’t request the tiles which reduces downloads and improves rendering performance.
SSL Support – since many of you are using the WPF control in secure applications, you can now make tile and service request over SSL without issue.
Hiding the scale bar – if you don’t want a scale bar (perhaps your map is small and the scale bar clutters the map) you can turn it off. In fact, the only elements you can’t turn off are the Bing logo and the copyrights.
New copyright service – provides accurate copyright for our data vendors. Additional inertia – inertia is now enabled for the mouse and is on by default for touch.
Miscellaneous bug fixes – thanks for the feedback on the MSDN Forums, the Bing Maps Blog, e-mail and Twitter. Good finds people.

Related

Zooming on Silverlight Toolkit charts?

I need to enable zooming on the Silverlight charts I use - at the moment this is Silverlight Toolkit. As far as I've understood the SL Toolkit charts don't support zooming, however I'm looking into implementing this functionality. So far I haven't managed to get far: applying ScaleTransforms to the Series elements doesn't work as expected.
Can anyone provide me with example code on implementing zooming in Silverlight Toolkit?
I've previously looked into implementing zooming on the Silverlight Toolkit charts, however failed because of (probably) the following reasons:
Silverlight Toolkit charts don't seem to have been designed to be able to extend for zooming. There are no hooks that you could easily attack some zooming logic to, if you want to create zooming on them, you have to go much deeer.
The simplest way of implementing zooming is using ScaleTransform and RenderTransform to elements. In case of Silverlight Toolkit you want to apply this to the series. However just calculating the correct ScaleTransform and OffsetTransform are difficult enough
When scaling, you don't want everything to scale. If you zoom in 4x on a line series with points on it, you don't want the line to be 4x thicker and the points to be 4x larger. This means that even if you did implement applying the ScaleTransforms and RenderTransforms correctly, all you would get is a magnifying glass, which is still far from ideal.
After a few hours I gave up on adding this kind of support to the SL toolkit charts and instead looked for other components that support zooming and have a decent API to deal with it. These are the components I've found (though I'm sure there's more):
Visiblox Charts free version: it has a nice API and implenting zooming takes only a few lines of XAML according to this blog post (also see a post on a comparison with SL toolkit charts). Full disclosure: I have been heavily involved in development of this library.
Infragistics xamWebChart also claim to have support for zoom in the premium version of their charts
Telerik RadCharts also seem to allow zooming based on this example - though it's not clear to me whether you'd have to implement this functionality yourself.
Summing it up, I think the easiest way for you to go it with a component that already has zooming implemented - from my experience it would take a lot of investment to add proper zooming + panning to Silverlight Toolkit charts.
You should take a look at user610173's blog post. Specifically, download the full example code here: http://slchartzoomandpan.codeplex.com/SourceControl/list/changesets Very helpful!
Adding to Gergely Orozy comment about Telerik:
You can easily add the Zoom functionality with the following XAML.
<charting:ChartArea.ZoomScrollSettingsX>
<charting:ZoomScrollSettings ScrollMode="ScrollAndZoom" MinZoomRange="0.005"/>
</charting:ChartArea.ZoomScrollSettingsX>
You can check out a demo by clicking here and the source code is also available on that same tab.

Coded UI Test - get my custom object (WinForms)?

I want to create an automated UI test that will test my syncfusion grid. My problem is that the recorder can't recognize this control (or any syncfusion control). I've searched a lot in the internet but I couldn't find any extension so the recorder will recognize my controls (I'm using WinForms, not WPF!), or at least a way to extend the recorder abilities so syncfusion's controls will be recognized somehow.
Is there any easy way to extend the recorder? Or is there any extension available?
Or maybe can I get the grid object from the WinClient that the recorder generates?
Thanks!
Start your program. Run the Spy++ utility. Type Ctrl+F to start the finder tool and drag the bulls-eye onto your form. Ok, Synchronize and have a look-see at the windows that are visible in the tree. If you see regular Windows Forms controls, like a Button or a Label, but not any of the SyncFusion controls then you've probably found the source of the problem.
Component vendors that try to improve .NET controls typically do so by creating 'window-less' controls. They are not really controls, they don't derive from the Control class and don't have a Handle property. They use the surface of the parent to draw themselves, making them look just like controls. The .NET ToolStripItem classes do this. And this is also the approach WPF uses.
The big advantage is that they render quickly and support all kinds of effects that regular controls can't support, like transparency, rotation and anti-aliased window edges. The big disadvantage is that the kind of tool that you are using suddenly gets noddy and can't find the control back. Because they work by finding the Windows window back on your form, there is no window for them.
This is a hard problem to solve, the 'control' exists only in memory and there's no good way for a tool to find it back. Using Accessibility is about the only other way for such a tool to find a control that I can think of. Which would have to be implemented by the control vendor first, a somewhat obscure feature that gets easily overlooked. You really do need the help of the vendor to find a workaround for this. Shouldn't be a problem, that's why you paid them the big money.
This is Rajadurai from Syncfusion. Thank you for your interest in Syncfusion Products. To make UI Test Automation recognize Syncfusion grids(WinForms), some internal support need to be provided in grid whose implementation is in progress and about to be completed. Please submit an incident through Direct-Trac for any further related inquiries in the following link.
http://www.syncfusion.com/Account/Logon?ReturnUrl=%2fsupport%2fdirecttrac
You can also contact us through support#syncfusion.com. We are happy to assist you.
Regards,
Rajadurai

Starting out Silverlight 4 design

I come from mainly a web development background (ASP.NET, ASP.NET MVC, XHTML, CSS etc) but have been tasked with creating/designing a Silverlight application. The application is utilising Bing Maps control for Silverlight, this will be contained in a user control and will be the 'main' screen in the system.
There will be numerous other user controls on the form that will be used to choose/filter/sort/order the data on the map. I think of it like Visual Studio: the Bing Maps will be like the code editor window and the other controls will be like Solutions Explorer, Find Results etc. (although a lot less of them!)
I have read up and I'm comfortable with the data side (RIA-Services) of the application. I've (kinda) got my head around databinding and using a view model to present data and keep the code behind file lite.
What I do need some help on is UI design/navigation framework, specifically 2 aspects:
How do I best implement a fluid design so that the various user controls which filter the map data can be resized/pinned/unpinned (for example, like the Solution Explorer in VS)? I made a test using a Grid with a GridSplitter control, is this the best way? Would it be best to create a Grid/Gridsplitter with Navigation Frames inside the grid to load the content?
Since I have multiple user controls that basically use the same set of data, should I set the dataContext at the highest possible level (e.g. if using a grid with multiple frames, at the Grid level?).
Any help, tips, links etc. will be very much appreciated!
Microsoft has created a great community site for helping people get started with both design and Silverlight here: http://www.microsoft.com/design/toolbox/
It may be far more than what you need for your current project, but it definitely will give you the training you need to master Design with Silverlight.

WPF capabilities

In my company we have in mind a redesign of the user interface of an application and we would like to make it ... let say "fancy". We have in mind a simple story board but I doubt between WPF, XNA or DirectX. I prefer WPF so I'd need to know if it support the following capabilities and how difficult to implement are they:
Transparency: We'd like to display information layers on top of the main display.
3D support: We want network nodes (part of the interface is a network graphic) to be simple spheres connected with lines in a 3D enviroment, and the ability to control the camera so rotation of the screen is possible.
Effects: Such as shading, lens flare or glow to "signal" the discovery or deletion of a node.
Text animations: Specifically the ability to display the text as if it's being written... You know, the information text will be "filling" the panel top down, left to right...
Good news. WPF is the technology you want and it can handle your requirements with relative ease.
Transparency is simple.
3D support is good as well. For an example, check out Tim Sneath: Five Great WPF 3D Nuggets. You even get hardware acceleration.
Effects are definitely do-able via timeline animations.
The previous statement goes double for Text Animations.
...the hardest part would be the 3D support, but it's still going to be a lot easier than getting things done in XNA or using DirectX libraries directly.
AFAIK WPF 3.5 supports all of this, and even leverages hardware acceleration to get a decent performance.
It's possible to embed an XNA application in a WPF form so you could use XNA for the representation of your network and WPF controls for the GUI in front of it.

Is there a good iTunes coverflow-type control for WPF?

I am currently using Telerik's carousel control, but it is lacking many features and is buggy. Is there a good control out there that looks the the coverflow control in itunes?
WPF Cover Flow Tutorial
Source Code: Part 7, Download
Author's rebuttal to claim of memory leak (it doesn't): Part 8
In Action: Videos
Contains a detailed walkthrough for building a coverflow control, including features such as reflection. I compiled and tried it out and pointed it to a directory containing hundreds of smallish images (you'll need to edit TestWindow.xaml.cs to point to a directory containing jpg's) and I was impressed with the performance and smoothness of the animation.
I noticed that using very large images degrades the performance though, so I'd recommend using images that are just the size needed for display. For example, when pointed to my desktop background images directory, there was nearly a one-second delay after pressing the arrow key and the item going through the transition (although the animation itself was still fluid, it took a moment to begin).
This is the best one that I found, for what I was looking for - namely, non-commercial, reflections, and smooth animation. I did look at the other ones currently mentioned in the other answers though, here are some comments on them (in no particular order):
FluidKit's ElementFlow
Open source, I used the latest source code, but did not try out any patches
Animation was smooth
Transition didn't feel very refined, the pictures clip each other in an odd way
Didn't seem geared for showing a handful of element's on the screen at once, it tries to show everything, and from some of the discussion comments, apparently isn't virtualized
After adding some images to the demo through the provided button, a large portion of them couldn't seem to get selected
Doesn't have reflections
Mindscape CoverFlow
Commercial
Animation was smooth
Doesn't "popup" selected item, feels very 2D
Has reflections
DevExpress Carousel
Commercial
No online demo and I didn't try to obtain the trial, looks polished though
Telerik Carousel
Commercial
Animation was smooth
The transition wasn't as pleasing to me, the new picture passed through the old one
Doesn't have reflections
Xceed Cardflow 3D
Commercial (professional edition only)
Animation was smooth, if you went quickly it would show blank cards speeding by and then fade in the actual data on the cards when you slowed down
Supports flipping the selected item, like in iTunes
Has reflections
ElementFlow control is inside the codeplex project called FluidKit - can be downloaded from here
For more details about the control - ElementFlow control at Pavan's blog
Mindscape now provide a commercial WPF Coverflow control as part of their WPF Elements control pack that might be useful also.
http://www.telerik.com/products/wpf/carousel.aspx
http://www.devexpress.com/Products/NET/Controls/WPF/Carousel/dependency_properties.xml
Both of these are FAR more versatile than your average cover flow clone (though they can easily just do that too if you want). I'd recommend Telerik well above DevExpress as WPF is still a relatively immature technology and DevExpress are very poor at keeping up with the tech game (they only JUST released a VS2010-supporting version of their DXperience suite despite promising it "just around the corner" since the start of January, while Telerik, ComponentOne etc all keep up with current tech. Not good enough for enterprise).

Resources