Binding a collection of data to objects (not using a ListBox!) in WP7/Silverlight - windows-phone-7

I have an observable collection of objects that I'd like to display on the screen, but not in a listbox format. For the sake of example, let's say that they're an observable collection of planets and I'd like to display them on the screen as they appear in the sky. Is this something I can do neatly in Silverlight binding? At the moment I'm thinking of just looping through my planet collection and creating an ellipse object for each, but it would be great if I could do this via data binding instead.
Hope this makes sense!

This is possible and there is a great example from Bea Stollnitz that demonstrates the power of xaml and styling. It's an old post (5 years! wow) but still well worth the read as are her other blogs
http://bea.stollnitz.com/blog/?p=40

Related

Monogame Extended Tiled

I'm making an isometric city builder using Monogame Extended and Tiled. I've got everything set-up and now i need to somehow access the specific tiles so i can change them at runtime as the user clicks on a tile to build an object. The problem is, i can't seem to find a "map.GetLayer("Layername").GetTile(x,y) or .SetTile(x,y) function or something similar.
Now what i can do is edit the xml(.tmx) file which has a matrix in it that represents the map and it's drawn tiles. The problem with this is that i need to build the map in the content pipeline again after editing for the changes to be displayed. I can't really build at runtime or can i?
Thanks in advance!
Something like this will get you part way there.
var tileLayer = map.GetLayer<TiledMapTileLayer>("layername");
TiledMapTile tile;
if(tileLayer.TryGetTile(x, y, out tile))
{
// do something with tile
}
However, there's only a limited amount of things you can actually do with the tile once you've got it from the map.
There's no such thing as a SetTile method because changing tile data at runtime is not currently supported. This is a limitation of the renderer, which has been optimized for rendering very large maps by building static geometry that can't be changed once it's loaded into the graphics card.
There has been some discussion about building another renderer that would handle dynamic map changes but at this stage nothing like that has been implemented in the library. You could always have a go at implementing a simple renderer yourself, a really basic one is not as hard as you might think.
An alternative approach to dealing with this kind of problem might be to pre-process the map data before giving it to the renderer. The idea would be to effectively separate the layers of the map that are static from those that are dynamic and render the dynamic tiles as normal sprites. Just a thought, I'm not sure about the details of how this might work.
I plan to eventually revisit the Tiled API in the next major version of MonoGame.Extended. Don't hold your breath, these things can take a lot of time, but I am paying attention to the feedback and kinds of problems people are experiencing with the existing API.
Since the map data is stored in a XML (or csv) file which runs through the Content Pipeline you can not change it at runtime.
Anyways, in a city builder you usually do not change existing tiles but you place object on top of existing tiles.

How to show a large data set with animated filtering?

I was wondering if that would be doable to combine virtualization with animated filtering such as for instance what mixtitup provides: https://www.kunkalabs.com/mixitup/
The idea would be to present a lot of items (let say 30K images to represent), virtualize them and have the nice and smooth filtering animations of such library as mixitup.
Many thanks!
This type of animation (rearranging/reordering) isn't really supported by react-virtualized. I know people who do animated scroll-tos or animated reveals for new rows, and there are libs like clauderic/react-sortable-hoc that do animated drag-and-drop but the type of animation you linked to is a lot more involved.
You might be able to implement this by providing your own (stateful) cellRangeRenderer. Grid would manage windowing for you but you'd have to manage your own transitions. I've never tried it though.
If you do do something like that- I'd love to see it. Perhaps we could make a reusable component out of it.

Optimize UI layers in a listview (+screenshots)

I'm analyzing my approach with Gmail's android developer's team approach in order to optimize drawing times and generally create more efficient apps.
My approach:
Below is the hierarchy inside a listview. It's quite straightforward. ExpandableListContentItem extends a Relative layout which has 3 Views:
Gmail app:
The following screenshot is how the listview in Gmail app works (SwipableListView). It's interesting to see that there is only one View (I guess aY extends ConvertationItemView) which in reality is quite more complicated than mine (I see 3 texts, 1 photo, 1 icon/button).
Question:
I would assume that this is a more lightweight approach to get rendered, is it so? Even if it takes me more time to code an optimal single customview per listview item it is worth the performance that it offers?
Finally the only way I know so far is to inflate an existing view inside another which is basically the first approach. I guess now my challenge would be to combine that relativeLayout with the 3 nested views into one. Is that correct?
PS:examples, open source code are welcome.
I would assume that this is a more lightweight approach to get rendered, is it so?
Yes it is. When you consider hierarchy, every parent measures their dimensions and passes it to child views from top to bottom. Reducing layers and having more flat view will save time.
Even if it takes me more time to code an optimal single customview per listview item it is worth the performance that it offers?
Depends on application you are developing. Depends on number of items in a list and how you get them. When you scroll through the list, if you think it is slow you might want to try that approach. I tried it on my previous applications and I could see the difference.
I guess now my challenge would be to combine that relativeLayout with the 3 nested views into one.
I don't know what you mean by combining them but the way Gmail does it that they have their Custom View. You can create your custom view.
Besides that, another thing to consider is overdraw. It is as important as having flat views. If you activate GPU Overdraw from developer tools and look at Gmail app row, you will see 0 overdraw. Make sure your code has no overdraw.
For further reading I would recommend you to check these blogs :
Performance Tuning On Android
Android Performance Case Study

Anything wrong using display lists in OpenGL for a single object?

First of all, I know that displays lists were deprecated in OpenGL 3.0 and removed on 3.1. But I still have to use them on this university project for which OpenGL 2.1 is being used.
Every article or tutorial I read on display lists use them on some kind of object that is drawn multiple times, for instance, trees. Is there anything wrong in creating one list for a single object?
For instance, I have an object (in .obj format) for a building. This specific building is only drawn once. For basic performance analysis I have the current frames per second on the window title bar.
Doing it like this:
glmDraw(objBuilding.model, GLM_SMOOTH | GLM_TEXTURE);
I get around 260 FPS. If you don't about the GLM library, the glmDraw function basically makes a bunch of glVertex calls.
But doing it like this:
glNewList(gameDisplayLists.building, GL_COMPILE);
glmDraw(objBuilding.model, GLM_SMOOTH | GLM_TEXTURE);
glEndList();
glCallList(gameDisplayLists.building);
I get around 420 FPS. Of course, the screen refresh rate doesn't refresh that fast but like I said, it's just a simple and basic way to measure performance.
It looks much better to me.
I'm also using display lists for when I have some type of object that I repeat many times, like defense towers. Again, is there anything wrong doing this for a single object or can I keep doing this?
Using display lists for this stuff is perfectly fine and before Vertex Arrays were around they were the de-facto standard to place geometry in fast memory. Put display lists have a few interesting pitfalls. For example in OpenGL-1.0 there were no texture objects; instead placing the glTexImage call in a display list was the way to emulate this. And this behaviour still prevails, so binding a texture and calling glTexImage in a display list will effectively re-initialize the texture object with what's been done in the display list compilation, whenever the display list is called. On the other hand display lists don't work with vertex arrays.
TL;DR: If your geometry is static, you don't expect to transistion to OpenGL-3 core anytime and it gives you a huge performance increase (like it did for you), then just use them!

Deep Zoom in Ajax - Possible? Any examples out there?

I have an idea to implement a deep zoom type interface hosted in a browser for sports training data (speed, distance, heart rate etc.) However, rather than images I actually want to zoom into a hierarchy of information. For example, the initial display would contain a grid of years - hover over 2008, for example, and spin the mouse wheel (or click) will zoom into that year but during the zoom I want 2008 to fade out and be replaced with a calendar of months. Again zoom into a month and the months are replaced with the months calendar, zoom into a day and you finally see a chart with the training data plotted on it. All the time only dates with actual data would be highlighted in some fashion.
My question is whether this would even be possible and whether anyone has seen examples of this already. I'm imagining that most of the time the next level of information could be cached in the browser (in fact, because this is calendar-based, I can calculate most of that and cache the dates to be highlighted.) I could also zoom into an empty chart whilst an Ajax thread is fetching the data to display.
I've never tried anything like this before and I'm especially interested in whether DHTML would be capable of this sort of zoom (I suspect not and I would have to resort to Silverlight) and whether the Ajax execution would be uninterrupted whilst the browser rendering thread is kept busy zooming.
For Deep Zoom on images in JavaScript/Ajax there's the excellent Seadragon Ajax library by Microsoft Live Labs.
If you're looking into smooth and interactive zooming on content besides images such as text, video & vectors, have a look at the open source OpenZoom SDK I've developed over the last couple of months.
You probably could not achieve very smooth zooming with an javascript/ajax type interface, but a zoom interface would be possible. The pragmatic ajax book has a great chapter on implementing a Google maps clone. Theres no need for the technique to be restricted to zooming in and out of tiled images. The image elements can just as easily be any HTML you want. A fade effect could be applied to the zoom operation so when you move up and down a layer you get something similar to what you described. I recommend grabbing the book (Its a pragmatic programmers book, so theres a cheap and immediately downloadable PDF version available. Read the chapter, think about the techniques and then see if you think its practical for your vision. good luck.
Seadragon Ajax continues to evolve and is now OpenSeadragon:
http://openseadragon.github.io/
I've also been keeping a list of various zooming technologies, many of which use JavaScript:
https://github.com/iangilman/zooming
I don't believe ajax or dhtml are good solutions for what you are trying to achieve. I think flash/flex or silverlight may be the best option.
Check out the "scale" effect in jQuery. Here's a link. I haven't used it myself, but it might be able to do what you want. You'd have to swap out some content for different content at the right point, or your html would get too big.

Resources