XAML Tips and Tricks

[wallmachine]

Anyone else having issues with the new feature RotationAmount not being remembered when accessing Options?

 

@Jason Carr whats the SystemViews list's data model and how can I find out when "Back" is the selected item?

 

Edited June 1, 2020 by wallmachine

[syncy]

@Rincewind Thanks! Glad you're digging them. How would I define a backup? Have a code snippet for that? Here is the current code:

            <Image x:Name="CartImage" Grid.Row="1" Grid.Column="1" Source="{Binding SelectedGame.CartFrontImagePath}" VerticalAlignment="Center"
                   HorizontalAlignment="Center" RenderOptions.BitmapScalingMode="HighQuality" RenderTransformOrigin="0.5,0.5">
                <Image.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX=".63" ScaleY=".63"/>
                        <RotateTransform Angle="0" />
                        <TranslateTransform X="0"/>
                        <TranslateTransform Y="-200"/>
                    </TransformGroup>
                </Image.RenderTransform>
                <Image.Effect>
                    <DropShadowEffect BlurRadius="10" Direction="-90" RenderingBias="Quality" ShadowDepth="1" />
                </Image.Effect>
            </Image>

I usually have to tweak the transforms for each console a bit. But other than that, working great.

[Rincewind]

@syncy I've not tested this but I found the code snippet from @faeran in this thread some where. You would just need to create a "Default" folder within a "Images" folder. 

            <Image x:Name="CartImage" Grid.Row="1" Grid.Column="1" Source="{Binding SelectedGame.CartFrontImagePath, FallbackValue='pack://siteoforigin:,,,/StartupThemes/[THEME-NAME-HERE]/Images/Default/Nintendo 64.png', TargetNullValue='pack://siteoforigin:,,,/StartupThemes/[THEME-NAME-HERE]/Images/Default/Nintendo 64.png'}" VerticalAlignment="Center"
                   HorizontalAlignment="Center" RenderOptions.BitmapScalingMode="HighQuality" RenderTransformOrigin="0.5,0.5">
                <Image.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX=".63" ScaleY=".63"/>
                        <RotateTransform Angle="0" />
                        <TranslateTransform X="0"/>
                        <TranslateTransform Y="-200"/>
                    </TransformGroup>
                </Image.RenderTransform>
                <Image.Effect>
                    <DropShadowEffect BlurRadius="10" Direction="-90" RenderingBias="Quality" ShadowDepth="1" />
                </Image.Effect>
            </Image>

 

[syncy]

@Rincewind Excellent, Ez pz. Implementing. Thanks for the assist!

[syncy]

Progress update video. It's all looking amazing, but...

I fucked up. Realized it half way through but kept on truckin' since I was already so far. I used Transforms instead of building proper grids. So, transforms aren't maintain with a resolution change which means everything I've done so far is only specific to one resolution (2560x1440). Maybe someone wants to help this project along and put them into proper grids?

Or at the very least point me in the right direction as to which tools to use to make it easier to make XAML grids. So far I've literally been tweaking transform values by a few numbers in notepad, running game in Launchbox to see if it lines up, then doing the whole process many times over to get it right.

/cc @Rincewind @faeran @BMovieBen

[crispy4000]

Complete novice here.  Is there any way to add borders around selected boxes within a wall view?  Using the theme creator, although I don't think the option exists within the program.

Edited June 2, 2020 by crispy4000

[y2guru]

I’m assuming you are trying to create your own focus border and it will be placed over the selected item.    To my knowledge that’s not possible within the wall view as bigbox would need to pass back the selected item position and size of item

[crispy4000]

Yup, that was the idea.  Something similar to Critical Box's Horizontal Box view that adds a border.

[y2guru]

Yeah but that’s not a wall view

[crispy4000]

4 minutes ago, y2guru said:

Yeah but that’s not a wall view

Yeah, I'm aware.  The view I was hoping to incorporate that with is here.  But thanks, since now I know to stop looking for a solution.

Edited June 2, 2020 by crispy4000

[y2guru]

If you are using the theme creator you can refer to them via the image ui element as well as the wheels

[y2guru]

22 minutes ago, Android16 said:

Ok, thanks. With that said, I'm having an issue with getting the images to populate the wheel. I cut and pasted all the images from the launchbox steam banner folder and placed them here:

E:\Users\'My Name'\My Documents\Games\MAIN\LaunchBox\Themes\'My Theme'\Images\Games\Banners\Sony Playstation Portable\

 

 

But they aren't showing in the wheel. And here's my wheel:

 <coverFlow:FlowControl x:Name="FlowControl" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height="{Binding ElementName=Canvas, Path=ActualHeight}" CoverFactory="{Binding CoverFactory}" CustomImageType="Banners" ClipToBounds="True" RenderOptions.BitmapScalingMode="HighQuality"
                        CurveAmount="0.0" CameraZPosition="3.12" VisibleCount="4" PageSize="4" Spacing="1.001" MaxVerticalImageResolutionOverride="800">

What am I doing wrong? If I remove coverfactory like in the example in the documentation.pdf, I can't scroll the wheel and nothing is in the wheel.

sorry, I thought you were using the theme creator (would be faster if you were)  looks ok, but I dont know how the files are named within the Sony Playstation Portable folder.....  using Game Title? using the database id (preferred method)  using an extension of png?

[y2guru]

23 minutes ago, Android16 said:

Im using vs2019. The files are named the same way they were in the Launchbox images steam banner folder: Either like that Metal Gear Acid-01.png or like this Metal Gear Acid 2.png

it will take forever using Vs2019

 

[y2guru]

2 minutes ago, Android16 said:

What will take forever?

creating a theme

[y2guru]

3 minutes ago, Android16 said:

Hi. What about my question?

I have a couple of questions for you… Are you testing the view via bigbox? or are you expecting stuff such as the wheels to be visible via VS2019 ?

most of us use Notepad ++ to create views, we only use VS2019 to visualise gradients or storyboarding, so using Vs2019 to create views is not ideal and to be honest you would be better off using the Theme Creator.  

[y2guru]

3 minutes ago, Android16 said:

Via bigbox. vs2019 is not the issue nor focus. My theme has been being worked on for 5 over years, awaiting issues to be solved/fixed before release.

Were you saying earlier that game ids must be used instead for that new feature?

Both database ID's and Title names are recognized.  so, what is the wheel doing right now, is it displaying text instead of images?

[y2guru]

25 minutes ago, Android16 said:

It isn't displaying anything when I set it up like stated in previous post. But when I put the files back in the steam banner launchbox old location and adjust the code to the old code, it displays fine. Is there any theme right now that uses the customimagetype feature?

your problem is with how you defined the wheel as it should display the game title if it cannot display the image.

This is my setup (and i changed my subfolder name from custom image 1 to Banners just to emulate what you are trying to do

                <coverFlow:FlowControl x:Name="FlowControl" 
                    Opacity="1.0" CustomImageType="Banners" CurveAmount="0" VisibleCount="16" PageSize="6"
                    CameraZPosition="9" ItemZPosition="0.2" SelectedItemZPosition="1.6" Spacing="3" RotationAmount="0"  RenderTransformOrigin=".5,.5" >
                    <coverFlow:FlowControl.CoverFactory>
                        <coverFlow:HorizontalWheelCoverFactory />
                    </coverFlow:FlowControl.CoverFactory>
                </coverFlow:FlowControl>

 

Edited June 3, 2020 by y2guru

[syncy]

Started a github repo for my custom startup / shutdown theme, dubbing it Tactile: https://github.com/warrendunlop/Tactile

Big shout out to @BMovieBen for some source image files. Higher quality consoles will be in soon for a v1.1.

[y2guru]

9 minutes ago, Android16 said:

Any tricks to make everything on the wheel semi transparent except the selected item?

Cant be done

[wallmachine]

1 hour ago, Android16 said:

Any tricks to make everything on the wheel semi transparent except the selected item?

 

1 hour ago, y2guru said:

Cant be done

 

I asked this in a pm early in 2019 see response below.

Quote

Unfortunately I think I would have to restructure things pretty significantly in order to allow you to target only the selected item like that. The CoverFlow control doesn't provide access to any template stuff currently.

No, there's no way we could swap out what we have now at this point, as it would break everything. I'd have to commit to coding the major changes myself.