XAML Tips and Tricks

[Jason Carr]

On 1/17/2020 at 4:54 AM, viking said:

Hi everyone, new little question:

The Colorful theme doesnt work well with "theme" games video. (Hyperspin style)
Is there a way in the video calling code to force it on a type of video? Like "no theme video".
To view videos of simple gameplay only. (if available)

In LaunchBox, you can filter media type. "Theme Video" being categorized apart. So there may be a way????

@Jason Carr @Grila @eatkinola ?? ?

Unfortunately I don't think this exists currently. Of course users can turn the setting off, but that setting is currently not theme-specific.

[BMovieBen]

Hi all - I'm working on porting a Maximus Arcade theme of mine I created years ago.  I was able to answer most of my own questions by watching all of Jason's videos and reading through all 37 (!) pages of this thread, as well as the documentation.  I have two outstanding questions at the moment.

1. How do I eliminate the transition delay entirely from game videos?  I have the below set so if a video doesn't exist, an image will be used instead.  When switching between games, there's a delay in the video loading and the user sees the image underneath for a second or so.  Please let me know if there's a way to do this (someone mentioned that TransitionPresenter came with a delay naturally but didn't suggest an alternative...)

   <transitions:TransitionPresenter Grid.Row="1" Transition="{transitions:FadeTransition}" Content="{Binding ImageView}" />
   <transitions:TransitionPresenter Grid.Row="1" Content="{Binding ImageVideoView}" StretchVideo="true" IsContentVideo="true" />

2. How do I change the font size for ListBox in the games view?  I've tried adding the following under ListBoxStyle in TextListView.xaml, but it has no effect.  I've seen some extremely complex and elaborate ways around this using plugins and such, but I'm hoping there's an easy way to just make the font smaller for lists due to the font I'm using...

   <Setter Property="FontSize" Value="2" />

Thank you in advance.  Here's a screenshot of my WIP theme "Wood Panels". (Also, @viking, what's a guy gotta do to get his hands on the source images for the TVs you used in your platform videos?)

[Jason Carr]

Welcome @BMovieBen. That theme looks sweet.

Per #1, the ImageVideoView will automatically use an image if a video isn't available, assuming that's turned on in the options. So you may not need to worry about it at all. The delay is not really customizable because it's there in order to make sure that the UI is a smooth experience and doesn't freeze while the video is loading up.

[faeran]

Hi @BMovieBen.

1. If your issue is with the fade transition, which exposes behind the video. This is actually controlled by the BigBox user. The user can change what kind of transition they would like to see the video use. Your best option is to probably just make the space behind the video black. You could simply wrap the video around a grid and make the grid background black. Maybe something like this:

<Grid Background="Black" Grid.Row="1">
  <transitions:TransitionPresenter Content="{Binding ImageVideoView}" StretchVideo="true" IsContentVideo="true" />
</Grid>

1. The easiest way I know of without a plugin is to open the "TextListView.xaml, find the listboxes (one for the index, one for the game titles) and expose the datatemplate. Here's an example to compare:

        <ListBox Name="Index" Style="{DynamicResource ListBoxStyle}" DockPanel.Dock="Left" Width="100" Visibility="{Binding IndexVisibility}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Path=Text}" FontSize="50" />
                </DataTemplate>
            </ListBox.ItemTemplate>
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseDoubleClick">
                    <cal:ActionMessage MethodName="OnEnter" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </ListBox>
        <ListBox Name="Items" Style="{DynamicResource ListBoxStyle}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock FontSize="27">
                        <TextBlock.Text>
                            <PriorityBinding>
                                <Binding Path="Title"/>
                                <Binding Path="Text"/>
                            </PriorityBinding>
                        </TextBlock.Text>
                    </TextBlock>
                </DataTemplate>
            </ListBox.ItemTemplate>
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseDoubleClick">
                    <cal:ActionMessage MethodName="OnEnter" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </ListBox>

Edited February 1, 2020 by faeran
Fix the code

[BMovieBen]

Thank you both for the helpful and prompt responses!  For #1, I'll do as you both suggested and omit image entirely (leaving the background black) and let the user choose the transition for the video, assuming it will fall back to images if no videos are found.

For #2, That solution seems to cause other issues...either BigBox fires an exception saying "ItemTemplate" cannot be used more than once, or once you select a game, the game title shows at the top but all the text in the list below (play now, rate the game, etc.) is missing.

OK what's the more robust option to resize the font in a listbox with a plugin then?

[faeran]

7 minutes ago, BMovieBen said:

Thank you both for the helpful and prompt responses!  For #1, I'll do as you both suggested and omit image entirely (leaving the background black) and let the user choose the transition for the video, assuming it will fall back to images if no videos are found.

For #2, That solution seems to cause other issues...either BigBox fires an exception saying "ItemTemplate" cannot be used more than once, or once you select a game, the game title shows at the top but all the text in the list below (play now, rate the game, etc.) is missing.

OK what's the more robust option to resize the font in a listbox with a plugin then?

Getting an error just means that there's a mistake in how you added the code to your TextListView.xaml

Do you want to post the code you have?

[BMovieBen]

I tried again - not getting an exception anymore...just the funkiness (see video for example)

Attached is my full TextListView.xaml

TextListView.xaml

Edited February 6, 2020 by BMovieBen
Switched from embedded to attached code document for post brevity.

[faeran]

8 hours ago, BMovieBen said:

I tried again - not getting an exception anymore...just the funkiness (see video for example)

Here's my full TextListView.xaml (apologies for the length, I don't want to delete stuff I don't understand):

 

Thanks for the explanation and the video. My bad, I left something out of the code. I've edited the code above for the Listbox Name="Items", and it should work now.

[BMovieBen]

Awesome! It works perfectly now.  Thank you @faeran. My work can continue now.

[BMovieBen]

OK I'm back.  I tried to get fancy with the list view (of course!), and I have come across two issues I could use help with.  The first is, I can't seem to change the font size of the Game Title on the sub-screen when you select a game from the list view, nor do I see where I can change it from all uppercase to normal case.

The second issue is the funkyness that happens with games that have long titles when you scroll quickly through the games list, either normally or by using the index.  I don't know if the listbox is just sensitive and not to be messed with (which I definitely am doing), or if it's some kind of bug.

Attached is my latest TextListView.xaml file and below is the video capture in case that helps.

 

TextListView.xaml

Edited February 6, 2020 by BMovieBen
added some detail

[Rincewind]

You could try to change the Title to TextWrapping="NoWrap" and see if that makes a difference

[Retro808]

Anyone know the best way to use the Game name to pull images from a custom folder? If I use <Binding Path="SelectedGame.Title" /> to locate the image in a custom folder it will not display any image for a game with an "_" in the title. For Example: Street Fighter II: The New Challengers will have images named Street Fighter II_ The New Challengers (I am matching how LaunchBox would name that file). SelectedGame.Title does not seem to work since it does not see the "_" as the same as ":" from the actual title and of course Windows does not allow ":" in file names.

The exact code is below.

            <TextBlock x:Name="GameControls" Visibility="Collapsed" Grid.Column="1" Grid.Row="3" Grid.RowSpan="2" Grid.ColumnSpan="3" >
                <TextBlock.Text>
                    <MultiBinding StringFormat="{}pack://siteoforigin:,,,/Images/Game Controls/{0}/{1}.jpg">
                        <Binding Path="SelectedGame.Platform" />
                        <Binding Path="SelectedGame.Title" />
                    </MultiBinding>
                </TextBlock.Text>
            </TextBlock>
            <Image Source="{Binding Text, ElementName=GameControls}" Stretch="Fill" RenderOptions.BitmapScalingMode="HighQuality" Grid.Column="0" Grid.Row="0" Grid.RowSpan="6" Grid.ColumnSpan="5" />

 

[y2guru]

1 hour ago, Retro808 said:

Anyone know the best way to use the Game name to pull images from a custom folder? If I use <Binding Path="SelectedGame.Title" /> to locate the image in a custom folder it will not display any image for a game with an "_" in the title. For Example: Street Fighter II: The New Challengers will have images named Street Fighter II_ The New Challengers (I am matching how LaunchBox would name that file). SelectedGame.Title does not seem to work since it does not see the "_" as the same as ":" from the actual title and of course Windows does not allow ":" in file names.

The exact code is below.

            <TextBlock x:Name="GameControls" Visibility="Collapsed" Grid.Column="1" Grid.Row="3" Grid.RowSpan="2" Grid.ColumnSpan="3" >
                <TextBlock.Text>
                    <MultiBinding StringFormat="{}pack://siteoforigin:,,,/Images/Game Controls/{0}/{1}.jpg">
                        <Binding Path="SelectedGame.Platform" />
                        <Binding Path="SelectedGame.Title" />
                    </MultiBinding>
                </TextBlock.Text>
            </TextBlock>
            <Image Source="{Binding Text, ElementName=GameControls}" Stretch="Fill" RenderOptions.BitmapScalingMode="HighQuality" Grid.Column="0" Grid.Row="0" Grid.RowSpan="6" Grid.ColumnSpan="5" />

 

Use ActiveGame.LaunchBoxDbId
        SelectedGame.LaunchBoxDbId

then rename your custom file names to use database ID instead of game titles

[Retro808]

20 minutes ago, y2guru said:

Use ActiveGame.LaunchBoxDbId
        SelectedGame.LaunchBoxDbId

then rename your custom file names to use database ID instead of game titles

Ahhh. Brilliant I forgot you mentioned that change before. Worked great. Thankfully I have not got too far in to making the custom images so I do not have to many files to rename. Thanks @y2guru

[y2guru]

4 minutes ago, Retro808 said:

Ahhh. Brilliant I forgot you mentioned that change before. Worked great. Thankfully I have not got too far in to making the custom images so I do not have to many files to rename. Thanks @y2guru

You’re welcome, I’m curious... are you creating custom images via the editor?

[Retro808]

12 minutes ago, y2guru said:

You’re welcome, I’m curious... are you creating custom images via the editor?

Clear logos I have. These are custom controller map images so right now I am testing the theme (Pause theme) and making the initial image templates using Photoshop. Once I get the layers minimized and look set I am going to try the mass produce with the editor.

[y2guru]

1 minute ago, Retro808 said:

Clear logos I have. These are custom controller map images so right now as I am testing the theme (Pause theme) and making the initial image templates using Photoshop. Once I get the layers minimized and look set I am going to try the mass produce with the editor.

Perfect!  Then you’ll be ready for the next build. I did exactly the same thing with the marquees I was playing around with, built some of the static assets on my Mac then pulled them into a template and fired off a mass build,  the new version saves the images with the database id ? plus many other changes to make it more accessible

[Retro808]

15 minutes ago, y2guru said:

Perfect!  Then you’ll be ready for the next build. I did exactly the same thing with the marquees I was playing around with, built some of the static assets on my Mac then pulled them into a template and fired off a mass build,  the new version saves the images with the database id ? plus many other changes to make it more accessible

That will be perfect than. I will just refine the image assets and then when you release the next build will start the production.

[y2guru]

6 minutes ago, Retro808 said:

That will be perfect than. I will just refine the image assets and then when you release the next build will start the production.

Awesome! The build is practically ready to go, waiting on Jason to finalize his bigbox changes and officially release 10.12.  In the meantime I’m just making a few tweaks here and there.  I’ll put a video together this weekend to cover all the changes in 1.0.7.0

[BMovieBen]

Hello again master themers.  I am trying to build out the requisite TextFiltersView.xml and I have some questions I am hoping you can answer.

What's the difference between TopBoxesView: (nothing shows for me)

<transitions:TransitionPresenter TransitionSelector="{Binding TopBoxesTransitionSelector}" Content="{Binding TopBoxesView}" />

And BottomBoxesView: (shows recent games for me)

<transitions:TransitionPresenter TransitionSelector="{Binding BottomBoxesTransitionSelector}" Content="{Binding BottomBoxesView}" />

?

And finally, what images or videos are supposed to show for this on TextFiltersView?  I must not have the correct media downloaded because nothing is playing/showing:

<transitions:TransitionPresenter Grid.Column="1" TransitionSelector="{Binding ImageTransitionSelector}" Content="{Binding ImageView}" />