New WallView Grid Games Behavior 11.10

[nicolasonline]

The new WallView Grid for Games works great, safe one possible problem.

The new WallView with a coverFlow:FlowControl property NavigationRows="1" similar to @faeran 's theme POC theme works great by placing the first games at the top of the screen rather than the middle, but does have unexpected behavior as noticed by @Bedwyr in his last point in this post

What I have found is that if the Total amount of Games in the WallView is equal to 6, 7, 8 or 9 Games when placing the selector on that 2nd row the whole 2 rows jump down together. 

This does not happen on any other amount of Total Games even if there are 11, 12, 13 or 14 Games (Adding 5 games to the above malfunctioning number so that they are the same on the 3rd row). So this only happens on the 2nd row (and not the 3rd or 4th or 5th rows etc).

I have included a video below to show what I mean.

I compare the GameCube/SNES Games proper behavior to that of the Wii and 3DS jumping up rows because they each have between 6-9 games. I double checked for each number of total games that exhibit this behavior and have found it only happens with anywhere from 6-9 games. If I add a 10th game to either platform it works properly. 

Can anyone reproduce this behavior? 

Code:

 <coverFlow:FlowControl x:Name="FlowControl" Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" SelectedScale="1.15,1.15" Columns="5" Rows="3" NavigationRows="1" ItemSpacing="0.35,0.35">
            <coverFlow:FlowControl.Camera>
                <OrthographicCamera Position="0,0,5" LookDirection="0,0,-1" NearPlaneDistance=".01" FarPlaneDistance="1000" Width="14"/>
            </coverFlow:FlowControl.Camera>

Edited April 7, 2021 by nicolasonline
clarification

[C-Beats]

There is a known issue with NavigationRows not setting the positions correctly for items resulting in the "hopping" behavior. We have code in place already that corrects this behavior in development. I'll make sure to reach out when that beta is released so you can test as I know you've personally found several of those issues at that point. Would be nice for you to be able to confirm we did indeed get the issues corrected.

[nicolasonline]

It would be my pleasure @C-Beats Anything you guys need I'm here to help!

[C-Beats]

3 minutes ago, nicolasonline said:

It would be my pleasure @C-Beats Anything you guys need I'm here to help!

Dangerous statement to be making, I can be PRETTY needy.... Appreciate the willingness though.

[nicolasonline]

haha! Really you guys are the best. Rare to come across such an awesome and passionate group of people! 

[fawkesyeah]

I have a question, sorry if this is not the right place to ask:

Is it possible / how do I reduce the amount of space between items in a wall view?

For instance, I am using the Default bigbox theme (although same goes for The POC, etc) and I am using this for displaying the Steam Banner of games (I do not use box art for browsing games, I use LB/BB primarily for PC games).

Wall 1 shows the Steam Banners as expected, however there is a lot of blank spacing between them. Screenshot below, I want the banners touching at all sides, so that more are on the screen at once.

Wall 2 is a bit different, it appears to be a gameplay screenshot with a logo on top, with less spacing between. I like this spacing. However I want Wall 1 to have this type of minimal spacing.

An extension of my first question is this: Can I change how many columns there are, to allow each banner to be bigger?

[nicolasonline]

Yes you can do that but you will have to open the .xaml file.

Go to the following folder on File Explorer:

LaunchBox/Themes/ and here duplicate the Default folder and name it something you'd recognize

Go into BigBox and in Manage Themes load the newly created folder name it should appear there

Go back into the File Explorer and under the new Folder name you gave the duplicate go to Views so it should be like this:

LaunchBox/Themes/NewName/Views/WallView.xaml and Right-Click open with Notepad

Then do a Find in Notepad and search for coverFlow:flowcontrol there you should be able to add within the brackets how many columns and rows you want by changing the number and you can change the spacing X,Y by changing the numbers

Once you change everything in Notepad just save the file and quickly go back into BigBox and reload the game view and the changes should be updated

You can go back and forth doing this until you're happy with the results

Hope this helps

[fawkesyeah]

Brilliant, thank you. I'm crafty with Notepad++ and was able to find and make the change right away. I reduced the spacing just fine.

I changed the columns number to reduce from 7 down to 6, however all it does is make a blank space where the 7th column was. It does not resize everything to be bigger. Any ideas?

Update: I figured it out. I was able to "zoom" the screen using the orthographic camera section below where the spacing is. Changed position from 0,0,5 to -1,0,5 and width from 15 to 12.5. Result below:

Edited April 8, 2021 by fawkesyeah

[C-Beats]

4 minutes ago, fawkesyeah said:

Brilliant, thank you. I'm crafty with Notepad++ and was able to find and make the change right away. I reduced the spacing just fine.

I changed the columns number to reduce from 7 down to 6, however all it does is make a blank space where the 7th column was. It does not resize everything to be bigger. Any ideas?

You need to lower the width property of the orthographic camera.

[fawkesyeah]

4 minutes ago, C-Beats said:

You need to lower the width property of the orthographic camera.

Thanks, had just updated my post with that right as you posted.

[C-Beats]

12 minutes ago, fawkesyeah said:

Thanks, had just updated my post with that right as you posted.

Glad you were able to get it figured out. Cool to see how excited everyone is to try out all the new stuff with 11.10. Be interesting to see what everyone does with it.

[fawkesyeah]

Another question for anyone who may know:  Is it possible to disable the fading of the rows above and below the current one? See screenshots above. I'm looking through the WallGamesView.xaml file but nothing sticks out to me as the control for this.

And, to have the initial screen start with rows at the top, rather than in the middle of the screen?

Edited April 8, 2021 by fawkesyeah

[nicolasonline]

44 minutes ago, fawkesyeah said:

Another question for anyone who may know:  Is it possible to disable the fading of the rows above and below the current one? See screenshots above. I'm looking through the WallGamesView.xaml file but nothing sticks out to me as the control for this.

And, to have the initial screen start with rows at the top, rather than in the middle of the screen?

hey no problem glad I could help! 

One thing I'd like to point out @fawkesyeah :

1. You said you changed the Orthographic camera position from 0,0,5 to -1,0,5. Try to change that back to 0,0,5 as from my experience it can affect the behavior of the grid different the more games are added/removed. the only thing you should be changing to adjust the view spacing for a cleaner one-size fits all should be the Width property within the orthographic camera. Try it that way and see if you can get the same result by keeping 0,0,5.

2. To have the initial screen start with rows at the top you need to add a property called NavigationRow or NavigationRows="1" I forgot which one it is I'm not on my PC right now. It should be in the documentation PDF that's included in LaunchBox/Themes/

3. To disable the fading you need to delete the lines that mention the Style Trigger for xxxIsRow="boolean" and opacity="0.2" or something like that as I recall. You can also change the border selector color within that same style trigger noted just above. You can look up "hex color code" online and find the color you want and just plug that in where it says "white" I think is the default. 

Hope this helps!

 

[fawkesyeah]

17 hours ago, nicolasonline said:

1. You said you changed the Orthographic camera position from 0,0,5 to -1,0,5. Try to change that back to 0,0,5 as from my experience it can affect the behavior of the grid different the more games are added/removed. the only thing you should be changing to adjust the view spacing for a cleaner one-size fits all should be the Width property within the orthographic camera. Try it that way and see if you can get the same result by keeping 0,0,5.

Hmm. I tried leaving this at 0,0,5. However the columns are shifted left. The leftmost column is cut off and there is blank space on the right side. This is fixed with using -1,0,5. Not sure if it matters, but I'm running at res 3840 × 2160.

17 hours ago, nicolasonline said:

2. To have the initial screen start with rows at the top you need to add a property called NavigationRow or NavigationRows="1" I forgot which one it is I'm not on my PC right now. It should be in the documentation PDF that's included in LaunchBox/Themes/

Perfect! I used the Find In Files feature of Notepad++ to see how it was done in other themes I have (e.g. The POC) and mimic'd the format. The winning number was NavigationRows="-3", that made the top row always start cleanly at the top!

17 hours ago, nicolasonline said:

3. To disable the fading you need to delete the lines that mention the Style Trigger for xxxIsRow="boolean" and opacity="0.2" or something like that as I recall. You can also change the border selector color within that same style trigger noted just above. You can look up "hex color code" online and find the color you want and just plug that in where it says "white" I think is the default.

I found it now. <Setter Property="BorderBrush" Value="Transparent"/><Setter Property="Opacity" Value="1"/>   the value was 0.2 and I changed it to 1, now all rows are fully opaque! Just what I wanted.

Edited April 9, 2021 by fawkesyeah

[fawkesyeah]

New issue/question, not sure if this is a bug report or just something wrong with my xaml.

With only the minimal changes noted above, I'm noticing this odd issue. When I start scrolling down the rows, every very bottom row seems to have its images stretched.

However, as soon as I move in any direction, left/right/up/down, that bottom row within view will correct itself, but then I move down another row, and the row below that will be stretched too, until I move left/right/up/down.. Example below, I moved down one and up one again, the stretching is gone.

Also note, if I move all the way to the bottom, all rows remain correctly sized, until I hit ESC to exit this screen, then go back in, the stretching happens all over again.

Attached my xaml file in case it's easier to look at that way.

WallGamesView.xaml

Edited April 9, 2021 by fawkesyeah

[C-Beats]

5 minutes ago, fawkesyeah said:

New issue/question. With only the minimal changes noted above, I'm noticing this odd issue. When I start scrolling down the rows, the very bottom row seems to have its images stretched.

However, as soon as I move in any direction, left/right/up/down, that bottom row will correct itself, but then the row below that will be stretched again. Example below, I moved down one and up one again, the stretching is done. Also note, if I move all the way to the bottom, all rows remain correctly sized, until I hit ESC to exit this screen, then go back in, the stretching happens all over again.

Can you PM me the XAML file you're using? Want to run some tests on my computer and see if I can replicate or find a reason.

[fawkesyeah]

1 minute ago, C-Beats said:

Can you PM me the XAML file you're using? Want to run some tests on my computer and see if I can replicate or find a reason.

I updated my post with the xaml, let me know if I should still PM it.

[C-Beats]

1 hour ago, fawkesyeah said:

I updated my post with the xaml, let me know if I should still PM it.

No need. I grabbed it and am able to replicate what you are seeing but having difficulty tracking down the cause. In the meantime to get around this you can set the Borders Height to 215 and Width to 460 (Steam banner dimensions) and it will force the items to be that size and stop the weird behavior you're seeing.

If doing so I would recommend adding a Stretch value of UniformToFill to your FlowImage. I also wanted to make you aware Steam Banners is a permitted value for FlowImage so you can use that instead of Boxes to force that image type if you preferred.

[fawkesyeah]

1 hour ago, C-Beats said:

In the meantime to get around this you can set the Borders Height to 215 and Width to 460 (Steam banner dimensions) and it will force the items to be that size and stop the weird behavior you're seeing.

If doing so I would recommend adding a Stretch value of UniformToFill to your FlowImage. I also wanted to make you aware Steam Banners is a permitted value for FlowImage so you can use that instead of Boxes to force that image type if you preferred.

Ok I've replaced Boxes with Steam Banners, like this? <coverFlow:FlowImage ImageType="Steam Banners" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>

However I'm not certain how to add the "Borders Height" you mentioned. Is this right? <Border Height="215" Width="460" BorderThickness="30">

Using that, the sizing is uniform, but it seems to mess up the zoom/spacing so every image is far apart again. May have to re-tweak the other settings to fit it.

1 hour ago, C-Beats said:

but having difficulty tracking down the cause.

Perhaps worth noting, I am seeing the stretching behavior in The POC theme as well. However it tends to correct the image sizes automatically after about one second of being on the screen.

Edited April 9, 2021 by fawkesyeah

[C-Beats]

26 minutes ago, fawkesyeah said:

However I'm not certain how to add the "Borders Height" you mentioned, and I haven't found it in the documentation pdf.

Sorry, I mean the border control you have (<Border>) already around the box. Just add Height/Width to that control.