I have a scatterview control into which I load rather large images from a URL. The images are of different size, and sometimes the image is too large to grab in one piece and I have to download two halves of it as individual images. I'm trying to join the two halves so they look and behave as one whole. I've killed two days and got it close, but not perfect. Things I've tried: Add both halves to a StackPanel, which then gets wrapped with a ScatterViewItem. For some reason, the SVI doesn't adjust its size properly if the panel is much wider than it is high. I tried a few things, including the suggested style on MSDN for having the SVI adjust height/width to its content. Works great for most cases, but if the image is long and narrow, a chunk of it gets lopped off *(see below).
Add both halves to a Canvas. Doesn't seem to resize properly with manipulations.
Add both halves to a Grid. Can't get the halves to form one image. Strangely, the entire grid gets displayed properly by the SVI, including long images. However, the two halves are either on top of each either (no horizontal allignment), or really far apart (doing column def and setting them to col 0 and 1), or almost perfect but with a small gap between them (setting one to left allign and the other to right allign).
*So far, StackPanel seems the most promising. I could get the entire thing to show by setting the SVI MinWidth manually, but then the control's hit area for manipulation is larger than the image itself. I've been trying to play around with the SizeChanged event of the images, trying to dynamically adjust the SVI midwith as the images actually load, so that it's equal to their combined rendered width, but by now it's starting to become more shamanism than science. I'm at the point of throwing random code at this thing and just hoping the results will be of some use or insight. Part of the problem, I think, is that the image source bitmap can take a good 5 seconds to actually download after the images are added to a container, and it's wrapped into the SVI, and the svi is added to the scatterview itself. It tells me that each image has a Height of NaN but an ActualHeight of 87 before the bitmap is ready and the image is rendered. How this all affects the size of the stack panel and the SVI, I don't really know.
So, perhaps someone has some insight or suggestions to try while I keep tinkering around and hoping something will come out of it.
I used to work at Microsoft and was responsible for creating the ScatterView control. This question really has 2 parts:
First, why are ScatterViewItem sizes acting strange? ScatterViewItems will autosize themselves based on their contents but in doing so enforce 2 restrictions: a) the initial height and width are large enough so that the user can comfortably grab the item to resize it and b) the initial height and width are small enough that the item only takes up no more than ~20% of each dimension of the screen, leaving room for other items to be visible. Both of these behaviors can be overridden if you explicitly set the Height & Width properties yourself.
Second, what's the best way to combine multiple images into a single ScatterViewItem? My recommendation would be to create a single WriteableBitmap which is the size of the combined image. Put this into your ScatterViewItem. Then, as each image chunk is downloaded, insert that chunk into the WriteableBitmap. This is going to yield better performance and ensure no issues with visial artifacts appearing along the seams.