Hi, Hope you are well?
Could you share some visual drafts of your carousel? I believe it could use a similar approach as my ‘wheel menu’ interface. In any case, I suppose it will be in the FS ADT. Unless you want it to be a 3D carousel, in case it will be GUI for mesh. I also believe that at the time you are interacting with the carousel, the pointer should not take inputs for the scene (else it would be messy). I believe a scrollviewer to display the images in the carousel and interact with them would likely work. Hard to say without any clues towards the visual representation and interaction. I would really recom you make a simple draft (visual) to further explain.
Meanwhile, have a great day
Thank you. This nearly looks like it’s working to me. So, what exactly is the issue? Is it for the scrolling of your left-menu images? I understand you want to use arrows to scroll; shouldn’t be a problem. A scrollviewer with some stackpanels to host the images would look like a perfect fit to me.
Edit: I guess I must have something similar in an old project of mine "Project Chair"
Load the scene, click on the third icon in left menu. From there you can pick a category and below browse from the category (images) with arrows. Is that similar to what you want? It is based on a scrollviewer with added children and resizeToFit.
Let’s take things in order. I did a first PG to simplify and we can build-up together from there.
First things to notice in this PG as compared to your first attempt are:
You parented your images/buttons to the scrollviewer. Where the idea is to parent the controls to the stackpanel. The stackpanel is parented to the scrollviewer and the stackpanel is the container of all children. Why? Because the stackpanel as opposed to the scrollviewer will dynamically resize from the total (width or height) of its children. Where your scrollviewer stays with a fixed (or responsive) size. We’ll see about the responsive size of scrollviewer a bit later if you need that. There are some constraints where you cannot mix percentage and pixel sizes.
You need to tell the stackpanel that it stacks controls/children horizontally. By default, it is vertical. So you need to set (line 45 in PG):
svcontainer.isVertical = false;
There are constraints towards the mixed use of percentage and pixel mode. Typically your controls cannot simply use percentage because they are parented to the dynamically resized stackpanel that resizes itself from the children through (line 52 in PG)
svcontainer.adaptWidthToChildren = true;
This implies that if we want to resize the panel containing the scrollviewer (like the user could extend or retract the panel) AND we want all controls/images to always show in fullsize, we’re gonna need to capture this size and pass it on to the controls. So, as I said, if you need that and cannot figure it out yourself, let me know…
Next is also the thing with the arrows. The arrows are in fact buttons on top of the scrollviewer. The logic is fairly simple. We will call on the sv.bar (value) to adjust the position of the scrollviewer (bar) to the image we want to display. For that, we’ll go through the controls.length of the stackpanel and set the value of sv.bar to the length*width of image/button. Again, if you can’t figure it out yourself, let me know…
Meanwhile, you should ‘play’ a little with this PG to get a grasp of how the base works and then… as I said, in case, let me know for the next steps…
Edit: And I forgot the ‘blur’ thingy. I’m not sure which part you want to blur. May be you could explain it a bit further to me?
Edit: Sry for the Undo icon instead of Close. I took what I could find from the asset library
Edit1: OOps, just realized something of importance while doing this. You have to make sure you have no borders on your images added to the stackpanel and no borders on the stackpanel (thickness = 0). Problem is that the borders are accounted in the calculation of the size (it is size minus border). So when working with steps and if not accounted, you will get an offset from the borders.