Develop Reference

Slow drawing when using many controls in C#

I've been trying to create a roll-playing game for a little over a year now, and I thought a good way to test it and flesh it out a bit would be to turn it into a Dungeons and Dragons variant. However, the inherent problem with using a DnD setup is that there's a lot to keep track of, to the point where it becomes impossible for a single person to do by themselves. As such, I thought of writing a C# program to help.
I ran into this problem when I tried using a series of PictureBox objects to represent the spaces on the map where characters can move. I wanted to use PictureBoxes because that would allow me to use images to represent terrain and characters occupying the given space. However, the map I am using is roughly 46 x 75 1-inch squares, totaling 3450 PictureBoxes. This, understandably, slows the application down so much that it actually freezes for minutes at a time while it redraws the map every so often.
I tried two solutions. First, I tried using a Panel object for its free scrolling capabilities in the hopes that the application wouldn't have to redraw the whole map, but rather only the subset of PictureBoxes visible at that time. This helped only a little, and not enough to make the application usable. Second, I looked online, including this forum, and found people having similar problems. However, the problems they were having were entirely unrelated to mine (aside from the whole slow redraw thing) and thus the solutions didn't really apply to me. I did see a few recurring lines that I tried:
this.SetStyle(ControlStyles.AllPaintingInWmPaint, true);
this.SetStyle(ControlStyles.OptimizedDoubleBuffer, true);
this.SetStyle(ControlStyles.ResizeRedraw, true);
I'm not really sure what they do, but they did help a bit. I am still seeing way too much lag, though.
I'm out of ideas at the moment. Is there a better control I could use or a different way of drawing? Thanks in advance for your help!

I would try to develop a solution that only renders the images that are visible on the screen at any given time. Images should only be rendered when you scroll them into focus.
This is a common technique since rendering UI is usually the slowest operation by far. I would bind a view model object to the visible objects, which means you only have to render a subset of the images instead of the entire screen.
Grids with endless scroll sometimes use this approach.

Shopping Mall Map Directory Editing [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I have a shopping mall directory image (for example like this: http://www.westfield.com/annapolis/map/ ) and want to make an application like this http://www.youtube.com/watch?v=LNj8D8JKv-4&feature=related where I can draw the path between two locations without needing make many images for the paths.
So, What techniques (Library, programming techniques, softwares .. etc) do you suggest to do this using .NET (Windows Forms/ WPF) application?
EDIT for BOUNTY
I am looking for some start like. I am on 3rd Floor. I have a image of third floor. There is a point of entrance from 3rd floor in map. There are 29 seats in the floor. I want to show with line path, where is somebody's seat. I want to do it through Web App. C# MVC 4.5 Where should I start from ? Any sample code will be very helpful.

I solved similar problem some time ago. In short, I was making a game like Heroes of Might and Magic and since I didn't want to draw background myself I decided to use a static image which I would simply manipulate along with player moves.
So we found an open-source game with a map editor that we used for creating of a map background. Then we created a mapper that would load an image created from the map editor and user would mark places on a grid. The following image is a screenshot from our map mapper.
There was the image, and drawed grid with adjustable size for cells so that we could map objects very precisely. The yellow boxes with an item inside are mapped objects (some of them actually do not give a sense, it is just a proof of concept). When we were content of the result, we would safe position and information about all obejcts to a xml file so that I can be used from our game application.
In our game we have defined a class called TileMap that was aware of all objects (stored as instances of a class Tile) on the map and all players move requests were permitted or forbidden by it.
Finally, this is how I would solve your problem. I have only positive experience with this solution. Create an application that would allow to you to specify where there is a path, where there is a store and how it is called, and so forth. Serialize values to xml or another format you are confident with. Then, create an application that works with these obejcts, define a tile map and you are nearly finished. Now you just need to implement path finding and drawing. Path finding is easy, there are plenty different algorithms with different efficiency and speed. Once you know what tiles you have to cross in order to get into a destination, simply draw stars, arrows or whatever you like above the tiles.
Cons
you need to create two applications
Pros
no need to generate more images, you are drawing on a transparent layer and you can safe already generated paths in memory or file
quite easy implementation, just a lot of code
feel free to choose a technology - we used WinRT, but WPF and even WinForms are also suitable
if you like GUI applications, you will have a plenty of fun while doing this :)
Feel free to ask any design and even implementation details questions .

Prepare the list of all places that you want to be searchable. Give each one an ID. The stairs and elevators should have IDs too.
Create the map floor masks. The easy way is the "coloring book" technique. Create semi-transparent layer in Photoshop and overlay it above the map. Then, draw the walls with some set "color 1". Then, draw each distinct place with a distinct color. Just convert the place ID to Hex and use that hex value as the color. Draw the mask for each floor (in a separate image).
Create the map loader. It should load the mask images and extract the object position and passing ability information. You have to find the position (x, y, floor) of each place by scanning the maps and looking at the pixel color hex value. You have to locate the stairs and elevators, their positions and the floors that they connect.
Implement the pathfinding algorithm like A*. It's quite easy and looks like viscous water flowing to the destination's low point. For each position (x, y, floor) one can move in any of the four directions where there aren't walls. And if there is an elevator at that point, one can move to some other floor. The algorithm can quickly find the best route between any two (x, y, floor) points.
When user gives you the name of the place where he wants to go, you need to find out the user's position coordinates (you may try to use GPS) and the destination position (use the object location table, you prepared when you loaded the map on step 3). Give these two (x, y, floor) points to the pathfinding algorithm to get back the route - the sequence of the (x, y, floor) points leading to the destination.
Analyze the route. You need to scan the route and find out what floors does it pass through. Split the route in chunks where each chunk belongs to a single floor. Now you have a list of floors and the route points for each of the floors.
Visualize the floors and their route parts by drawing the route points over the floor maps. To increase the root point spacing, you may just draw every 10th point or so. With HTML5, the sequence of route points can be drawn as an SVG or canvas overlay on top of the floor map image background.

The best way to set up something like this is to pick up a book on game programming, as it will give you a lot of information on setting up paths around "solid objects". The actual UI technology should not matter as much, so choose WPF or Windows Forms, HTML5 etc. Of the choices you have, I would probably aim for WPF or Silverlight, as it gives you much more flexibility on creating the UI. But I would not be adverse to HTML5 either.

You can definately do the whole thing in WPF, you're looking at drawing simple paths so you need to chunk your project into multiple sub issues:
1) How to draw the UI area (i assume you already know that)
2) How to draw the map, it heavily depends on the map data you have but it could be as simple as a single image, please add more detail for your source
3) How to figure out the path, for this you will need to use some form of pathfinding algorithm (one of the simplest one is A*, but there is a myriad of algorithms for different needs)
4) How to draw the Path, this depends on what you're looking for once again
I know it isn't much of an answer yet but depending on your needs (please add a comment bellow) i'll edit it to help you the best i can.

It would be pretty significant undertaking if you are trying to do this whole thing by yourself. All you have is image of shopping mall. From there you need to convert it in to vector data which in itself a fairly significant project. Then you will need to design navigation algorithms and then you need to setup UX for the whole thing. IMO, all these would require a lot of resources and research if you want to do this nicely and accurately.
Fortunately here is a good news: Google has been trying to do same thing for quite sometime and throwing lot more resources than that are likely at your disposal. Their effort is called "indoor mapping" which you can pretty much leverage out-of-box for your scenario. I'm going to give out here pointers to start you off as you have asked.
First visit Google blog to get familiarize with their indoor maps initiative. Then try out adding your floor plan in Google maps here. You are basically uploading image and aligning with the building in Google maps at this point. Here's another tutorial. Note that this does not make your floor plan navigable and may not show yet users location on it because to do that you need data from wifi/cell towers to triangulate users location on floor plan. We'll go over that next. If you have tons of these floor plans, I'd suggest taking help of mechanical turk or such service to have other humans do it for you cheaply. Google maps allows you to keep floor plan privates by using overlays but likely you don't want to do that so users can access it from anywhere.
Next, you want to make your user locatable on your floor plan. This involves getting data such as wifi/cell tower signals at different points on your floor plan. Google has app for this. And here's little demo. You can also use SketchUp to add vector data and polygons.
Next, you want to embed Google maps in your app so it becomes integral part of your app instead of users having to go through Google Maps website. To do this look at Maps SDK (here's link for iOS, and snippet for indoor maps).
Good luck!

You may easier this job by looking into Google map indoor solution. http://maps.google.com/help/maps/indoormaps/
No programming except a web page is needed.

Displaying a map using WPF

I am new to WPF, and relatively new to GUI coding, so bear with me if this seems obvious to some.
I am trying to display a randomly generated map using WPF/C#, in order to simulate the behaviour of a propagating RF signal. Each map coordinate can have zero or more items within it - it could be buildings, vehicles, fauna or geographical data (none indicates flat grassy fields). I would like to display this in a window, or on a page to the user. But I don't know how.
My original thought was a canvas with a pre-defined method for drawing items. But the map will be massive, and I only want to display a small portion of the map to the user at any one time.
So, what I want to know is, can I create a canvas, draw what I want onto it, and then display only a small portion of that to the user? If not, or if that is not simple, is there a better way of doing it? I don't necessarily want a specific answer either - a more generic solution would be better (i.e. tell me I need to use a "Blah" with a "Blah blah" would be better than writing out the whole code - I like to learn about these things as much as possible by doing, not copy and paste).
Thanks.
David

Here some ideas:
You can try to paint your objects directly via the GraphicsContext. Here you find an overview.
Also check out CompositionTarget.Rendering, it allows you also to render per frame (as far as possible).
If it is graphically intensive, perhaps it's also a good idea to look into the XNA-framework.

How to select, display and save regions of a graphic?

So here's the situation: I need to take a (user-specified) graphic, and allow the user to define and label regions within that graphic. For example, if you uploaded a picture of a face, you might want to define "right eye", "left eye", "nose" etc. Also, having defined the regions, if I select a previously defined region, it should be highlighted on the image somehow. These regions are (obviously) not necessarily rectangular, and they cannot overlap. And if you click within a defined region in the graphic, I would be able to identify which region was clicked on.
There are a couple ways I can think of for doing this, none of which are quite satisfactory. Another developer before me tried doing it with a transparent grid overlaid on the original graphic, fiddling with the background alpha/color for highlighting regions, but I think they rather kludged it. I could either get my hands really dirty trying to clean up their code, or try a completely new approach.
What would you suggest for maximum speed and user-friendliness?
Bounty added: for the best solution that will get me up and running in the minimum time.

The GraphicsPath class is made to do this. Keep a list of them along with the image. Draw the image first, then Graphics.DrawPath() to draw the regions on top of the image.
Hit testing is simple with GraphicsPath.IsVisible(). Iterate the list in reverse order so overlaps work.

Assuming you haven't decided yet on the technology you'll use, I'd suggest WPF; I find most graphics-related tasks easier with WPF (at least in version 4) and it's specifically geared for interactivity, so creating non-rectangular regions using mouse clicks and hit-testing clicks to select shapes would be pretty easy. Loading images is also easy.
However, if you haven't used WPF or Silverlight until now, there is some overhead in learning the basic concepts and APIs; so I'm afraid there's no real way I can recommend it as a maximum speed solution without knowing your (or whoever's will be working on it) competencies. That said, using MVVM and WPF would be definitely the maximum speed solution for me. Also the maximum user-friendliness since WPF enables quite interesting interaction models out-of-the-box, like multi-touch support (that's the trendy one that should be mentioned, right?) and easy non-standard layout and placement of controls.

You need polygons, saved as list of points. And you need hit testing for them. See the link:
http://social.msdn.microsoft.com/Forums/en-US/csharpgeneral/thread/40ebadc1-6154-4c7c-9cb1-d608a426b29c

Creating SPECIFIC Dynamic Visuals - House Plan w/ Objects (FOLLOW-UP)

Yesterday, I asked a question about how to dynamically render something in .NET: specifically, I asked about how to create a white "canvas" for "drawing"/rendering upon, what framework to use, etc. However, many of the answers suggested for me to ask a more specific answer, so right now, I have come up with a completely hypothetical (and random) example of what I want to accomplish.
The example is as follows: let's assume that I'm trying to create an app where the user can first draw some rectangles (by clicking or entering dimensions) to create the outlines of their house. Next, they would be able to draw small rectangles inside to signify objects inside the house. Also, they would be able to pan or zoom. (Don't forget, this is a completely random example.)
So, if I were to try to do this, I guess I have the following questions:
How do I create the white "canvas" for drawing everything upon? Some answers to my first question suggested using WPF, and I want to try that. Is there a specific control I need to add to the XAML to allow me to render such dynamic stuff on top of it?
How can I draw/paint figures like these onto the canvas, and how can I change this during runtime (panning/zoom)?
Do I need to create a simple coordinate plane for referencing and storing all the objects and their locations inside the "house"? If so, how?
I hope this isn't too general still, as I think that using such an example would allow people to effectively answer this question. Thanks!

HTML makes a great blank canvas.
Many games utilize OpenGL or DirectX for more advanced (eg. panning/zooming) features.
Unity is a pretty decent platform for such things from what I can gather about it.