[2008] [WPF] Stick an image on top of another

[Hamish]

In my WPF application I want to display items on a map, but since the map is rather large, it is scrollable.
My questions are:
* How do I display an image on top of my map?
* How do I make sure that when the map is scrolled, the items scrolls too?

Thanks in advance....

[DeanMc]

You could use the <InlineUIComponent> tag which places 1 child in another control but then you can uses multiple InlineUIComponents. Il fire up VS now and have a play around and see what we come up with, PS ive asked a mod to move this to the new WPF board k!

[Hack]

Moved

[chris128]

I think I mentioned this in your previous thread but one of the samples that comes with Microsoft Expression Blend 2 has a very similar feature to this so I'm sure you could 'borrow' some ideas from that ;)
Let me know if you dont have blend and I'll try post the relevant bits of the sample

[DeanMc]

Ok so I have been playing around with the Inline UI container and it seems that you can only use it with flow documents. I was thinking though a grip clips all items at its borders right? so what you could do is place a grid over the picture and create some logic to scroll the items, once they reach the borders of the grid they will clip.

[chris128]

Here ya go someone has already done it for you :D

Part 1 - http://www.thejoyofcode.com/WPF_ScrollViewer_Thumbnail.aspx
Part 2 - http://www.thejoyofcode.com/Making_the_ScrollViewerThumbnail_interactive.aspx

[DeanMc]

That's an amazing example man! good job :thumb:

[chris128]

I know I was amazed when I saw how little code was required!

[Hamish]

Thanks Chris, but a thumbnail was the subject of the previous question I posted. :) I'll defintely steal this XAML though, it's too good to ignore....
Any thoughts on the sticking images on a map and have them scroll with the map?


I could use some explanation on the second link you posted... What's this ControlTemplate stuff he's talking about?

[chris128]

Oh right sorry I thought you meant you were just struggling to get the images to move with the mini-map / thumbnail.

Well, how do you want to place these images on the map, dynamically or will they just always stay in the same place? Also, will they need to be there when the app is launched or are they going to be created and added to the map at runtime

[Hamish]

Let me explain what I'm building here, it will probably clear up a lot of things. I'm afraid I'll be asking a lot of questions for this project, so the more people who know what I'm trying to do, the better. :)

I'm trying to make a front-end application for a text-based Play-By-Email game. It's a WW2 setting, and involves a rather large map (approx. 2000 irregularly shaped areas), a pretty complex economy system and many military options. (I love this game! :D) In a previous project I have built a new order entry program for the same game where you could select all applicable options from ComboBoxes etc. I would like to take this a step further and try to build a true GUI for it.
The program would have to read turn result files, build a database from them and then display everything nicely on the map. Next step would (for example) enable you to just drag army-indicator-icons over the map and have the program build an order file for you.
Since the graphics part is new to me (and therefore the most interesting) I wanted to start by just displaying the map and display game information on it. As a first step I just want to see if I can make icons appear on the map before I start thinking about anything else.

So to get back to your questions:
I want to display different kinds of icons in different situations, depending on what the user wants to see (armies, air forces, navy forces, industries, stockpiles), so they would definitely need to be added at run-time. When the user switches 'modes' all icons would need to be removed or hidden and new ones created or unhidden. So icons would not move on the map by themselves, but in the end some may be draggable.

[chris128]

hmmm ok, gives me a lot to think about! I'll try put something together that just displays images on a map as a starting point and get back to you

[chris128]

OK, I've got something going at that might help a little as a starting point.

First things first, lets create a canvas that we can place our images on.

<Canvas Name="MapCanvas" Margin="0,0,0,90" >
</Canvas>

Now we need to set the background of this canvas to the image of the map, we can do that by using the ImageBrush like so:

<Canvas Name="MapCanvas" Margin="0,0,0,90" >
<Canvas.Background>
<ImageBrush ImageSource="c:\map.bmp" />
</Canvas.Background>
</Canvas>

Note that we could do the same thing in code by doing this:

MapCanvas.Background = New Windows.Media.ImageBrush(New Imaging.BitmapImage(New Uri("c:\map.bmp")))

But I much prefer to do it through the XAML code :)

So we have our map now, lets add an image to it dynamically through our vb code. In this example I've made a stick man image and will use that :D

Dim personimage As New Image
personimage.Source = New Imaging.BitmapImage(New Uri("C:\person.bmp"))
personimage.Margin = New Thickness(10, 50, 10, 10)
MapCanvas.Children.Add(personimage)


So there we go, we end up with a little map (in my example I just made the map a red square) and a little person on the map! :)

http://i135.photobucket.com/albums/q160/chriswright128/examplecanvas.jpg

[Hamish]

Looks good Chris. Good idea to use a Canvas instead of an image.
Little time to play with it now, hope to have some more later on.