I am customising the amazing Slipstream theme on the latest available CTC version, and have 2 issues:

1. I can't get the selection box border at the bottom of boxes no matter what I do (bottom margin, reducing box scale etc) and in CTC it looks perfectly fine. This is highlighted in red.

2. The behaviour works very inconsitently, so I need to hit right key to enable the selection box, but often it won't highlight anything until I press the down key (up will move 1 platform up), however after hitting it, I can see it did register the number of right key hits before that, so selection is working but the selection box is not displaying until I hit the down key.

What is the Game Discovery Center
From a themers perspective, the Game Discovery Center is a list embedded in another list. You have a list of games inside of a list of lists. It consists of just one xaml file where all code is located within. The file is called DiscoveryPageView.xaml

How to start coding this view in your Custom Theme
Assuming that you've run Big Box at least once with version 13.10 or higher, you can simply find the following file and copy it into your own custom theme's Views folder:
LaunchBox\Themes\Default\Views\DiscoveryPageView.xaml

To start editing the view, open your custom theme's project file, or open the DiscoveryPageView.xaml directly.

The View File
This section will break down the major parts of this file, so you can get an idea of what things are.

The Parent List (The List of Lists)

This will show up in the code as:
<flow:DiscoveryPageList ...>

Place this code where you want all the lists to appear on the screen. Here's a list of some properties you should know about:

• VisibleRows (int) - This controls how many rows should be visible at any given time. The lower the number the better performance, but go too low and you could get rows appearing from out of nowhere. You'll need to find a balance based on what your view looks like.
• SelectedItemPosition - This controls where the selected row will appear in the space you provide. This can force the selected list to always appear in one spot on the screen. The values are: Bottom, Center, None, Top
• SelectedItemOffset (int) - This will offset the list on the y-axis, starting at the top of the space provided, to give you more granular control over where the selected list appears.

The following sections are used inside of the DiscoveryPageList:

flow:DiscoverypageList.Style (optional)
A basic Style section. In the default theme, it's used to change the SelectedItemOffset and SelectedItemPosition values for specific lists.

flow:DiscoveryPageList.ItemTemplate
This will contain what each list will look like. 

A DataTemplate will hold the layout of what each list will look like.

Inside of a DataTemplate, you can add a FlowControl list or a ListView list (or both). These lists will contain the list of games (You can see examples of both inside of the default DiscoveryPageView.xml file). A FlowControl is a regular wheel type of list and is heavily documented inside of the Documentation.pdf file. A ListView is a type of list that is used in Text List Views, as well as the thumbnail lists on some platform views that display favorited and recently played games.

flow:DiscoveryPageList.ContentLists
This will contain the type of lists you want to see in your view. They will display in the order that you list them. The default theme contains a number of them that you can use. There are two distinct types of lists you can use:

• Hardcoded: We've hardcoded a number of lists that can be used inside your view
• Auto-Populated Lists: Lists based on our auto-populate playlist ruleset

A list of all hardcoded binding options:

Quote

<win:BindingProxy x:Key="Favorites" Data="{Binding FavoritesList}" />  - Lists a random group of favorited games
<win:BindingProxy x:Key="HighlyRated" Data="{Binding HighlyRatedList}" /> - Lists a random group of highly rated games of user ratings with a fallback to community star ratings
<win:BindingProxy x:Key="RecentlyPlayed" Data="{Binding RecentlyPlayedList}" /> - Lists recently played games in the order of most recently played
<win:BindingProxy x:Key="MameHighScoresList" Data="{Binding MameHighScoresList}" /> - Lists a random group of MAME Arcade games that are supported by the MAME High Score Leaderboard feature
<win:BindingProxy x:Key="Platforms" Data="{Binding PlatformsList}" /> - Lists a user's platforms in alphanumeric order

An example of a hardcoded list of recently played games:
Under the UserControl.Resources section of the view, add the following line to declare your list:
<win:BindingProxy x:Key="RecentlyPlayed" Data="{Binding RecentlyPlayedList}" />

Then under the ContentLists section, place your list:
<controls:SingleItemCollection Item="{Binding Source={StaticResource RecentlyPlayed}, Path=Data}" />

An example of a custom built list that shows recently added games:
<controls:SingleItemCollection>
    <controls:SingleItemCollection.Item>
        <flow:GameContentList Title="Recently Added" Sort="DateAdded" MaximumItems="25" MinimumItems="5">
            <flow:GameContentList.Criteria>
                <flow:GameContentListCriteria Field="DateAdded" Comparison="RecentDays" Value="360" />
            </flow:GameContentList.Criteria>
        </flow:GameContentList>
    </controls:SingleItemCollection.Item>
</controls:SingleItemCollection>

flow:GameContentList

This list type will populate games based on the choices you make within. Here are notable properties and what they do:

• Title - Gives your list a title which you could use in triggers and also use to display on the view somewhere
• Sort - Will sort the list based on possible values: DateAdded, DateModified, Developer, Favorite, GameCompleted, Genre, Installed, LastPlayed, LaunchBoxId, MameHighScore, MaxPlayers, Platform, PlayCount, PlayMode, PlayTime, Portable, Publisher, Rating, Region, ReleaseDate, ReleaseDateYear, ReleaseType, Series, Source, StarRating, Status, Title, Version, Random
• SortAscending (bool) - Tells which direction the games will be sorted. Default value is True
• MaximumItems - The maximum amount of items that will be generated in this list
• MinimumItems - The minimum amount of items that the list requires before it will be displayed

flow:GameContentList.Criteria
In this section, you can list all possible rules you want your list to adhere to. The rulesets are equal to what we have available under the auto-populate section when creating a playlist. It's highly recommended to build out an auto-populate playlist first so you can check if the games that get added to it meet what you want to accomplish. Then you can use that playlist to determine the values that need to be entered into the list.

The following are the 3 available fields and their potential values (Remember that not all Field values work with all Comparison values)

• Field

Quote

AnyAchievement
AlternateName
Amazon
ApplicationRomPath
Broken
Complete
ControllerSupport
DateAdded
DateModified
Developer
Ea
EpicGames
Favorite
Genre
Gog
GogAchievements
Hide
Installed
LaunchBoxId
LastPlayed
HighScoreSupport
MaxPlayers
Notes
Platform
PlayCount
PlayMode
Portable
Publisher
Rating
Region
ReleaseDate
ReleaseType
RetroAchievements
Series
Source
SortTitle
Steam
SteamAchievements
StarRating
Status
Storefront
Title
Uplay
UseDosBox
UseScummVm
Version
Xbox

• Comparison: 

Quote

EqualTo
NotEqualTo
IsEmpty
IsNotEmpty
OnOrBefore
OnOrAfter
RecentDays
GreaterThan
LessThan
Contains
IsTrue
IsFalse
HasAllValues
HasAtLeastOneOf
HasNoneOfTheValues
IsBetweenDates
IsBetweenNumeric
MainGameIs
MainGameIsNot
AnyAppIs
NoAppIs
Supports
DoesntSupport
PartiallySupports
FullySupports
Requires
DoesntRequire
DoesntContain
IsSimilarTo
IsNotSimilarTo
IsAmazon
IsEpicGames
IsGog
IsOrigin
IsSteam
IsUplay
IsXbox
AchievementsSupported
AchievementsNotSupported
AchievementsNotStarted
AchievementsInProgress
AchievementsCompletedv

• Value - This is the value that you would input into the auto-populate playlist value field

Dynamic Lists
The system is designed to display an unlimited amount of dynamic lists which will start appearing after your lists in the XAML end. To the user this will be seamless, as a theme developer this is something you should be aware of when building your view. There's a lot of different types of lists that this can consist of, and each time the view loads, it will generate a completely random set of dynamic lists.

Here's a breakdown of some types of lists that may appear in this section:

• Best - displays a random group of games that is above a specific user or community star rating
• Explore - displays a random group of games
• Worst - displays a random group of games that is below a specific user or community star rating

The above may also be combined with other pieces of metadata, for example:

• Best of [year]
• Explore [platform]
• Worst of [genre]
• Best [genre] games of [year]

F.A.Q.
I want some game lists to look different than other lists, how do I do this?

Quote

 

Within your UserControl.Resources section, you can create a number of different DataTemplates. You can use one DataTemplate as your default, while the others can be triggered for a specific type of list (ListType), or a specific list altogether (Title).

Let's say you create a "Default" template, a "Tall" template, and a "Sqaure" template.
ie: <DataTemplate x:Key=Default" ...>
ie: <DataTemplate x:Key=Tall" ...>
ie: <DataTemplate x:Key="Square" ...>

Under your flow:DiscoveryPageList.ItemTemplate section, you can use triggers to determine which lists or list types use which DataTemplates.
ie: Use the Tall template when displaying the MameHighScores listtype, and the Square template when displaying the list titled "Recently Added":
<ContentPresenter Content="{Binding}">
    <ContentPresenter.Style>
        <Style TargetType="ContentPresenter">
            <Setter Property="ContentTemplate" Value="{StaticResource Default}"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding ListType}" Value="MameHighScores">
                    <Setter Property="ContentTemplate" Value="{StaticResource Tall}" />
                </DataTrigger>
                <DataTrigger Binding="{Binding Title}" Value="Recently Added">
                    <Setter Property="ContentTemplate" Value="{StaticResource Square}" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ContentPresenter.Style>
</ContentPresenter>

 

How do I display an image or text outside of a template?

Quote

 

There are two distinctive ways to bind to the selected item:

SelectedListItem - changes instantly to the selected item (can cause performance issues)
ie: Display publisher of selected game (points to the name of your DiscoveryPageList)
<TextBlock Text="{Binding ElementName=DiscoveryList, Path=SelectedListItem.Publisher}" />

ActiveItem - changes to the selected item 500ms after navigation has stopped (more performant)
ie: Display publisher of selected game
<TextBlock Text="{Binding ActiveItem.Publisher}" />

It is recommended to use FlowImage to display your images. The use of FlowImage is documented inside of Documentation.pdf

Here are examples of it in use:

Display clear logo using ActiveItem:
ie: <flow:FlowImage DataContext="{Binding ActiveItem}" ImageType="Clear Logos" />

Display clear logo using SelectedListItem
ie: <flow:FlowImage DataContext="{Binding ElementName=DiscoveryList, Path=SelectedListItem}" ImageType="Clear Logos" />

 

 
How do I display a video outside of a template?

Quote

 

It is recommended to use FlowVideo. The use of FlowVideo is documented inside of Documentation.pdf

Here is an example of it in use:

Display video using ActiveItem
ie: <flow:FlowVideo DataContext="{Binding ActiveItem}" LoadDelay="3000" PlayVideo="True" PlayAudio="True" />

 

How do I change the title of a hardcoded or dynamic list?

Quote

You can change the name of a title by using a DataTrigger. You'll find examples of this in the default theme. 

Keep in mind that hardcoded and dynamic titles can be translated into other languages. This DataTrigger will only work in the language you choose to make this DataTrigger for. In this example we will use English.

Here's an example of the code needed to change the Title of a specific list. This code will work if the TextBlock is outside of any lists:

<TextBlock>
    <TextBlock.Style>
        <Style TargetType="TextBlock">
            <Setter Property="Text" Value="{Binding ElementName=DiscoveryList, Path=SelectedList.Title}"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding ElementName=DiscoveryList, Path=SelectedList.Title}" Value="Best of Sega Genesis">
                    <Setter Property="Text" Value="Sega Genesis Does What Nintendon't" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </TextBlock.Style>
</TextBlock>

This code is saying if the title is equal to "Best of Sega Genesis", change it instead to say "Sega Genesis Does What Nintendon't".

How can I make additional applications appear in a window with information about the game?

At the moment, additional applications are displayed as a drop-down list. (code from Default LBTheme):

<Button Margin="6,0,0,0">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="Click">
            <cal:ActionMessage MethodName="PlayableVersionDropDown">
            <cal:Parameter Value="$source" />
            </cal:ActionMessage>
        </i:EventTrigger>
    </i:Interaction.Triggers>
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border BorderThickness="1" Background="{TemplateBinding Background}" BorderBrush="{StaticResource SolidBorderColor}" CornerRadius="3">
                            <Grid Name="Grid">
                                <ContentPresenter x:Name="Presenter" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger SourceName="Grid" Property="IsMouseOver" Value="True">
                                <Setter TargetName="Grid" Property="Background" Value="{StaticResource MouseOverColor}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Background" Value="{StaticResource PrimaryColorSolid}"/>                
            <Style.Triggers>
                <DataTrigger Binding="{Binding HasPlayableVersions}" Value="False">
                    <Setter Property="Visibility" Value="Collapsed"/>
                    <Setter Property="IsTabStop" Value="True"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
    <TextBlock FontSize="18" Foreground="White" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center">
        <TextBlock.Style>
            <Style TargetType="{x:Type TextBlock}">
                <Setter Property="Text" Value="Additional"/>
                <Setter Property="Padding" Value="24,0"/>
            </Style>
        </TextBlock.Style>
    </TextBlock>                            
</Button>

I tried to do the same as the code from the Omni theme for displaying documents (pdf, jpg, cbr: manuals, etc.)

<ItemsControl Margin="3,3,3,0" ItemsSource="{Binding Documents}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image VerticalAlignment="Center" HorizontalAlignment="Left" Stretch="Uniform" StretchDirection="Both" Source="{Binding Icon}"/>
                <TextBlock Margin="9,0,0,3">
                    <Hyperlink Command="{Binding ClickCommand}">
                        <Hyperlink.Style>
                            <Style TargetType="{x:Type Hyperlink}">
                                <Setter Property="TextBlock.TextDecorations" Value="{x:Null}" />
                                <Setter Property="TextBlock.Foreground" Value="#A6FFFFFF"/>
                                <Style.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter Property="TextBlock.TextDecorations" Value="Underline" />
                                        <Setter Property="TextBlock.Foreground" Value="White"/>
                                    </Trigger>
                                </Style.Triggers>
                            </Style>
                        </Hyperlink.Style>
                        <TextBlock Text="{Binding Title}" FontSize="13" TextTrimming="CharacterEllipsis" />
                    </Hyperlink>
                </TextBlock>
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemContainerStyle>
        <Style>
            <Setter Property="Control.Margin" Value="0,0,0,6"/>
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>

Changing 

ItemsSource="{Binding Documents}"

to

ItemsSource="{Binding PlayableVersions}"

ItemsSource="{Binding PlayableVersion}"

It didn't work. Can you help with the code?

I have played with all the ease settings, but cannot find a way to fix this. Any ideas would be appreciated 

CTC currently does not have this feature natively (as of v3.3.2) but it is quite easy to add manually after publishing with some basic understanding of Big Box theme code

• Add a new badge to your theme in CTC. It can be ANY badge since we need to edit this code after publishing it. Give the element an appropriate name that will be easy to find, for ex "Badge - Progress"
• Open the particular view XAML file in some text editor and then search for the element's name. Sticking with my example, I would search for "Badge - Progress"
• Find this line within the element's code and change the badge name (BadgeName) from whatever you selected in CTC to instead be "Progress"
• My ex here I started by using the "Completed" badge name within CTC and selected the corresponding image file to be used within CTC.
• Since I declared an image file within CTC it will look like this and I will need to remove the ImagePath. So the line would look like this once published

<coverFlow:FlowBadge x:Name="Badge6img" DataContext="{Binding ActiveGame}" BadgeName="Completed" ImagePath="LAUNCHBOX_THEME_FOLDER/Media/Badges/Badge_Completed.png"

• And I am changing it to this

<coverFlow:FlowBadge x:Name="Badge6img" DataContext="{Binding ActiveGame}" BadgeName="Progress"

Finished edit will look something like this

Now the caveat here is this will only use the default badge icons which are included with the frontend. What it does is based off the selected game's progress value, it will automatically use the the appropriate image file. If you want to use custom images, there is some additional steps to take

One method would involve simply replacing the default images with your custom ones. This is by far the easiest way to use custom images. But note this means the custom ones will also be used in LaunchBox rather than just the Big Box theme

If you wanted LaunchBox to maintain default images, and only the Big Box theme to use custom images there are ways to do that too.

One method involves using scripts to copy image files around. First make a direct copy of the default progress badges directory since this will be used to be copied into the appropriate default directory only when LaunchBox boots. So one script can be setup in LaunchBox Startup Applications to run only when LaunchBox boots, this one copies the default images from the duplicate directory into the default directory. A second script would be used only when Big Box boots, this time copying your custom images into the default directory. This method is only used by me due to I didn't feel like editing more XAML code manually.....

AHK syntax for this is very simple. Only one line of code required. Providing link to docs here and example below. The 1 parameter at end is to overwrite which is required since the files already exist.

FileCopyDir, C:\My Folder, C:\Copy of My Folder, 1

https://www.autohotkey.com/docs/v1/lib/FileCopyDir.htm

However, it is also possible within the XAML code to declare a specific image. This would require you adding a new badge element for each and every progress badge you want to use in CTC though. So, this is what I meant by more manual editing is required. You would still do the exact same edits I mentioned above, but now we must declare the image location and use a different visibility condition. 

• So just like above select the specific badge image file within CTC and it will be properly declared in the published code.
• Without using proper visibility condition the badge image is going to show on every game. We must use the ActiveGame's Progress value to determine this as shown below.
• Note that the value you want to use will correspond with values listed in LaunchBox's Progress drop down field. Hence why here for a specific Done/Mastered badge, we must use "Done / Mastered" for the value as that is how it is exactly listed in LaunchBox

We changed this line....

<DataTrigger Binding="{Binding ElementName=Badge6img, Path=HasBadge}" Value="True">

to instead read like this....

<DataTrigger Binding="{Binding ActiveGame.Progress}" Value="Done / Mastered">

Final edits would look something like this

You would now need to make the same type of edits to any additional badge elements you added that are meant to display a specific progress badge.

The bookmarks are time stamped to take you directly to the subject matter within the video.
 

 The Basics

How To Build a Big Box Theme

Basics of UI & Parenting Elements

TEXT UI ELEMENT

IMAGE UI ELEMENT

The links below are miscellaneous and in no particular order.

Beginner

Starting a new Theme https://youtu.be/Eu7U0sb1p94?t=754

Setting your intended aspect ratio for the theme and explanation of the different ratios - https://youtu.be/Eu7U0sb1p94?t=779

Explanation of different views within BigBox and selecting view to edit - https://youtu.be/Eu7U0sb1p94?t=838

Opening a new Platform View to edit - https://youtu.be/Eu7U0sb1p94?t=953

Explanation of a Mandatory UI Element. - https://youtu.be/Eu7U0sb1p94?t=986

Explanation of X,Y Coordinates and other properties - https://youtu.be/Eu7U0sb1p94?t=1004

How to add new elements to a theme and brief explanation of types of elements. https://youtu.be/Eu7U0sb1p94?t=1052

Resizing a wheel element https://youtu.be/Eu7U0sb1p94?t=1105

Explaining wheel properties - camera zposition, Item zposition, selected zposition, https://youtu.be/Eu7U0sb1p94?t=8435

Specifying images to use in a wheel https://youtu.be/Eu7U0sb1p94?t=1176

Using the Wheel stylization assist button to quickly set up your wheel - https://youtu.be/Eu7U0sb1p94?t=1236

Adding an image - https://youtu.be/Eu7U0sb1p94?t=1310

Making an image (or other element ) fullscreen - https://youtu.be/Eu7U0sb1p94?t=1317

Aligning an image - https://youtu.be/Eu7U0sb1p94?t=1363

Re-naming the image element (or any other element) https://youtu.be/Eu7U0sb1p94?t=1366

Specifiying what image to use and explanation of how to use image metadata to choose images dynamically - https://youtu.be/Eu7U0sb1p94?t=1378

Organizing groups and elements - Creating new Groups - https://youtu.be/Eu7U0sb1p94?t=1498

Explanation of Stretch - Fill, None, Uniform, Uniform to FIll - https://youtu.be/Eu7U0sb1p94?t=1557

Adding a video - Explaning difference between user defined video and selected item video - https://youtu.be/Eu7U0sb1p94?t=1936

Is Faeran ETA Prime's cousin? https://youtu.be/Eu7U0sb1p94?t=2027

Aspect ratio of video - keep or stretch - https://youtu.be/Eu7U0sb1p94?t=2178

Importance of Order of Elements/Layers https://youtu.be/Eu7U0sb1p94?t=2325

Copy and pasting an element's properties to another element or to a parent https://youtu.be/Eu7U0sb1p94?t=3652

Add a text scroller https://youtu.be/Eu7U0sb1p94?t=4453

Change the font of text scroller https://youtu.be/Eu7U0sb1p94?t=4634

Determine what to display within text scroller  https://youtu.be/Eu7U0sb1p94?t=4667

Change direction (vertical / horizontal) of text scroller https://youtu.be/Eu7U0sb1p94?t=4691

Change the scroll speed of text scroller https://youtu.be/Eu7U0sb1p94?t=4702

Adding a release date element https://youtu.be/Eu7U0sb1p94?t=5001

Adding Platform Name text metadata https://youtu.be/Eu7U0sb1p94?t=5480

Taking Platform Name length into consideration https://youtu.be/Eu7U0sb1p94?t=5541

Editing Text Format (uppercase lowercase), centering text, wrapping text (Wrap, NoWrap, WrapWithOverflow), trimming text (CharacterElipsis - WordEllipsis) https://youtu.be/Eu7U0sb1p94?t=5574

Move an element with cursor - Move an element quickly with cursor plus shift key https://youtu.be/Eu7U0sb1p94?t=5672

Changing text color and using color picker tool. Also a look at linear and radial gradients within color picker tool. https://youtu.be/Eu7U0sb1p94?t=5711

Adding a total games count text box https://youtu.be/Eu7U0sb1p94?t=5889

Adding a text box to display a constant value https://youtu.be/Eu7U0sb1p94?t=6074

Explanation of Smart guides for aligning elements https://youtu.be/Eu7U0sb1p94?t=6001 

Adding and using a dock panel https://youtu.be/Eu7U0sb1p94?t=6669

Using Autosize  - Width and Height - for the text in the dock https://youtu.be/Eu7U0sb1p94?t=7023

Using Margins to dynamically give text elements a designated amount of space regardless of each element's size. https://youtu.be/Eu7U0sb1p94?t=7068

Use a grid or a frame and brief description of how each works https://youtu.be/Eu7U0sb1p94?t=7635

Changing the background color and opacity of a grid. https://youtu.be/Eu7U0sb1p94?t=7749

Publish a theme https://youtu.be/Eu7U0sb1p94?t=2922

Hidden File Menu? https://youtu.be/Eu7U0sb1p94?t=8290

Parent Elements

Explanation and use of Frames  https://youtu.be/4gSvaa-EaU8?t=3191

Explanation and use of Grids https://youtu.be/4gSvaa-EaU8?t=3416

Explanation of Viewboxes https://youtu.be/4gSvaa-EaU8?t=3519

Explanation of Dock https://youtu.be/4gSvaa-EaU8?t=3844

Explanation of Stack https://youtu.be/4gSvaa-EaU8?t=4046

Advanced

Adding an animation to a wheel - https://youtu.be/Eu7U0sb1p94?t=2543

Run Animation choices - Explaining differences of During Selection, Immediately, Once selected -  https://youtu.be/Eu7U0sb1p94?t=2548

Animate a parent grid with text  https://youtu.be/Eu7U0sb1p94?t=8197

Visibility conditioning - colors https://youtu.be/1eGobjpzoXs?t=3759

Using Visibility Conditioning to hide/show/collapse a text element depending on the status of another text element (if no release year, dash disappears). https://youtu.be/Eu7U0sb1p94?t=7243

Applying color tint and opacity mask to an image. https://youtu.be/lT_tIGdthV4?t=6923

Looking at text list wheel presets and creating your own text presets. https://youtu.be/1eGobjpzoXs?t=7710

Again, creating a custom text wheel preset. https://youtu.be/lT_tIGdthV4?t=7049

Understanding the 4 numbers in xaml- padding/margins, etc. https://youtu.be/1eGobjpzoXs?t=8096

Parent UI Element Viewbox https://youtu.be/fSmQyksxtgs?t=672

Obsolete elements and new metadata fields: Playmode1-4, Genre1-4, Region1-4 https://youtu.be/fSmQyksxtgs?t=123

Alt-a shortcut to trigger animation within Theme Creator https://youtu.be/lT_tIGdthV4?t=4609

Alt-i shortcut to enable include animations with movement within Theme Creator https://www.youtube.com/watch?v=Eu7U0sb1p94&t=8290s

Hidden File Menu? (In this menu you can also toggle the Alt-A, Alt-i commands mentioned above as well as other commands.)   https://youtu.be/Eu7U0sb1p94?t=8290

Adding a simple animation to a clear logo. https://youtu.be/lT_tIGdthV4?t=4490

Quick demonstration of how to add a horizontal text scroller https://youtu.be/lT_tIGdthV4?t=7436

Video behind full color (rectangle) and applying opacity to the rectangle to reveal video beneath https://youtu.be/Eu7U0sb1p94?t=3761

Better optimize a theme by using one animation for a parent container (grid) to animate all elements in the parent as opposed to three elements having the same animation. https://youtu.be/Eu7U0sb1p94?t=4002

A quick look at selecting and using linear or radial gradients within the color picker tool https://youtu.be/Eu7U0sb1p94?t=5782

A look at injecting your own XAML code - User Source https://youtu.be/Eu7U0sb1p94?t=6141

Animation Triggers, During Selection, Once Selected, Immediately. https://youtu.be/ktKk3T9Pvag?t=589

A look at the Documentation.pdf in the ..\LaunchBox\Themes folder.  https://youtu.be/Eu7U0sb1p94?t=6366

Adding sounds to your theme with the animation editor https://youtu.be/aeo8-08AVFU?t=3428

Adding custom navigation sounds to your theme https://youtu.be/aeo8-08AVFU?t=7189

Other notes

Collapsed = 0 height , 0 width , Hidden is not shown but width and height is still in place.

Create your docks (info rows) in a separate theme that you can copy from into a new theme, saves you setup.

Take a look at the documentation.pdf within the  ..\LaunchBox\Themes folder. The document goes over all the different views and bindings that can be used in the xaml code.

Shortcuts

Alt-M to Enable/Disable Audio within editor.

Alt-A to Enable/Disable Animations within editor.

Alt-I to Enable/Disable Animations with Movement within editor.

Alt-V to Enable/Disable Videos within editor.

Alt-J to Enable/Disable Animated GIFs within editor (remember, J for JIF, I mean GIF).

Alt-H to Enable/Disable Hover Tracking within editor.

Alt-L to Enable/Disable Lock to Canvas within editor.

Alt-S to Enable/Disable Smart Guides within editor.

All shortcuts defined here can also be turned off and on in the hidden file menu within the editor by hovering your mouse at the top of the screen.

Deciphering the wheel properties

These notes were taken directly from the documentation.pdf that can be found in the Launchbox/Themes folder

ImageType: If not specified or left blank, the FlowControl will use the default ImageType for the active platform, or if no active platform an overall default image type will be used. Here are all the possible valid values for platforms views: Clear Logo, Fanart, Banner, Device Here are all the possible valid values for games views: Boxes, 3D Boxes, Carts, 3D Carts, Screenshots, Clear Logos.

CurveAmount: The CurveAmount is a multiplier decimal value that specifies how much the wheel should curve. Putting 0 in this value will result in no curve at all. A negative value will curve the wheel in the opposite direction. CurveAmount is currently only supported by the wheel views (WheelCoverFactory and HorizontalWheelCoverFactory). This property will be ignored for CoverFlow views. The default CurveAmount value is 4.5.

RotationAmount: The RotationAmount is a multiplier decimal value that specifies how much items in the wheel should rotate as they move further from the selected position. Putting 0 in this value will result in no rotation. A negative value will curve the wheel in the opposite direction. RotationAmount is currently only supported by the wheel views (WheelCoverFactory and HorizontalWheelCoverFactory). This property will be ignored for CoverFlow views. The default RotationAmount value is 0.

CameraZPosition: The CameraZPosition property specifies the position of the camera in relation to the Z positions of the images. Generally this affects the size of the images. The CameraZPosition property should always be greater than both the ItemZPosition and SelectedItemZPosition properties, or the images will appear behind the camera and hence not be shown. The bigger the CameraZPosition property, the further away from the images the camera will be, and thus the smaller the images will appear. The default CameraZPosition value is 3.0.

ItemZPosition: The ItemZPosition property specifies the Z position of items that are not the currently selected item. This also affects the size of the images in relation to the camera. The ItemZPosition property should always be less than the CameraZPosition property, or the images will appear behind the camera and hence not be shown. The bigger the ItemZPosition property, the closer the images will appear to the camera, and thus the bigger the images will appear. ItemZPosition is currently only supported by the wheel views (WheelCoverFactory and HorizontalWheelCoverFactory). This property will be ignored for CoverFlow views. The default ItemZPosition value is 1.0.

SelectedItemZPosition: The SelectedItemZPosition property specifies the Z position of the currently selected item only. This affects the size of the selected image in relation to the camera. The SelectedItemZPosition property should always be less than the CameraZPosition property, or the images will appear behind the camera and hence not be shown. The bigger the SelectedItemZPosition property, the closer the selected image will appear to the camera, and thus the bigger the selected image will appear. Generally, the SelectedItemZPosition property should also be larger than the ItemZPosition property in order to make the selected item appear larger than the other items in the control. SelectedItemZPosition is currently only supported by the wheel views (WheelCoverFactory and HorizontalWheelCoverFactory). This property will be ignored for CoverFlow views. The default SelectedItemZPosition value is 2.0.

Spacing: The Spacing property is a multiplier decimal value that specifies how close the images in the control should appear to each other. The greater the value for the Spacing property, the farther away the images will appear from each other. Spacing is currently only supported by the wheel views (WheelCoverFactory and HorizontalWheelCoverFactory). This property will be ignored for CoverFlow views. The default Spacing value is 1.0. 

VisibleCount: The VisibleCount property specifies the total number of images displayed on the screen at once. This number is automatically increased by 3 on the backend in order to prevent clipping or popping as new images are added to the ends of the control. Therefore, if for some reason you want to display less than three images, you’ll need to set this to a negative value.

PageSize: The PageSize property is primarily used for Page Up and Page Down commands. This specifies how many images should be skipped in either direction when pressing Page Up or Page Down.

MaxVerticalImageResolutionOverride: Used to override the user’s default CoverFlow image quality settings. Omit this property to use the default settings (recommended for most scenarios). Cached images will be resized to this vertical resolution.

Note: CurveAmount and RotationAmount examples. These were counterintuitive to me so here are a few examples. Positive or negative values determine direction of curve or rotation. Default Platform and Games views behave similarly but are horizontal instead of vertical.

You are more than welcome to submit other tips, in fact please do! I will do my best to add them to this list. Questions are also welcome, however I'm no expert on the subject. I will add notes as I learn more about what can be done. I will organize and refine the list as time allows

Some assembly references are missing.

Building to restore the NuGet cache might resolve this issue.

I don't see any references to this in the Launchbox Theme Creation Tutorial videos unless I missed an obvious step.

Is there a more comprehensive explanation or tutorial the delves deeper into the function or one that potentially shows how to do what I've described above?

Thanks

Psynr

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:controls="clr-namespace:Unbroken.LaunchBox.Wpf.Controls;assembly=Unbroken.LaunchBox.Wpf"
             mc:Ignorable="d"
             d:DesignHeight="562"
             d:DesignWidth="1000"
             HorizontalAlignment="Stretch"
             VerticalAlignment="Stretch"
             FocusVisualStyle="{x:Null}"
             BorderThickness="0"
             Margin="0"
             Padding="0"
             Background="#000">
    <Canvas Name="Canvas">
        <controls:VideoControl VideoPath="pack://siteoforigin:,,,/StartupThemes/VideoExampleTheme/Videos/_Default.mp4"
            StretchVideo="true" CenterVideo="false" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
            Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}" />
    </Canvas>
</UserControl>

Keep in mind that you need the xmlns:controls line near the top in order to use the VideoControl tag. Other than that, it's all in that VideoControl tag, and it will play the "LaunchBox\StartupThemes\VideoExampleTheme\Videos\_Default.mp4" video file full-screen. It will also work for both Windows Media Player and VLC.

I'll be adding some subsequent posts in this topic for more involved solutions shortly, but I wanted to post a simple solution first.

anyone willing to help create one?  just looking for basic white text on black background "Delia's Games"

thanks all!

Messing around, I found a way that allowed me to right-click a Custom Field and select "Go to webpage".  It opens the default internet browser to whatever hyperlink page is in the Custom Field.  Note: this will only work with LaunchBox Premium as the free version doesn't show Custom Fields.

For my VPX platform, I also added a custom field for "Table" that would hold a link to the tables’ webpage.  (to look for updates or whatever reason)

Obviously, you can name the Custom Field anything you want for any circumstance. For any platform.

The only pain is entering the hyperlink(s) for each table (or game) individually.

(Pict of Right-Clicking the IPDB link.)

To make this work, I needed to modify the GameDetailsView.xaml located in the Views folder of the LaunchBox theme.   

Here’s what I did.

Summary:

• Insert 2 lines of code
• Comment out 1 line of existing code
• Insert 1 code block

I'll use @faeran's "Default Plus" theme as an example.  First, create a copy of the theme’s main folder and then open the GameDetailsView.xaml file (in the copied folder) in Notepad++.  (Any text editor will work. I used Notepad++ to make it easy to reference line numbers)

D:\LaunchBox\LBThemes\Default Plus - Copy\Views\GameDetailsView.xaml

Below the last "xmlns" entry (line 10) insert a new line.  (here, we're adding a new reference and calling it "web")

xmlns:web="clr-namespace:Unbroken.LaunchBox.Windows.Desktop.Commands;assembly=LaunchBox"

Just before the closing of "UserControl.Resources" (line 34 [after inserting the above]), inset a new line. 

<web:WebLinkCommand x:Key="WebCommand" />

(Here we're creating a static resource which we're calling "WebCommand".)  Indents don't matter. But it looks prettier.

So far, it looks like this:

Now search for and go to CustomFields (or scroll to line 1334 [after inserting the above 2 lines]).  A few lines down, click once on the 2^nd <TextBlock... line.  (line 1345)  This is the line that contains Text="{Binding Value}"  Press Ctrl+K (Notepad++) to comment out that line.  (That may only work because of a plugin I installed. Don't recall.  Alternately, add <!-- to the beginning of the line, and --> to the end).

<!-- <TextBlock Grid.Column="2" Text="{Binding Value}" Foreground="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataContext.ForegroundBrush}" TextWrapping="Wrap" TextAlignment="Right" /> -->

Below this [now] commented line, insert the following:

<TextBlock Grid.Column="2" Text="{Binding Value}" Foreground="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataContext.ForegroundBrush}" TextWrapping="Wrap" TextAlignment="Right" >
    <TextBlock.ContextMenu>
        <ContextMenu>
            <MenuItem Command="{StaticResource WebCommand}" CommandParameter="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=TextBlock}, Path=Text}">
                <MenuItem.Header>
                    <TextBlock Text="Go to webpage" HorizontalAlignment="Center"/>
                </MenuItem.Header>
            </MenuItem>
        </ContextMenu>
    </TextBlock.ContextMenu>
</TextBlock>

Here we're replacing the original TextBlock with a new one that lets us right-click.  If you want it to say something other than “Go to webpage” when you right-click, just replace the part in quotes (Text="Go to webpage"). (Line 1351)

Here's what the whole CustomFields section will look like

Save and close.  Tell LB to use this theme. 

Caveat:

If you have a custom field that's not a hyperlink or is an invalid link and you right-click and select "Go...", you'll get a message box telling you it's an invalid URL.  So just don’t do that.   

Thanks for any help.

If any theme gurus can help with code on this, I would need specific code as I don't think CTC offers anything like this as far as I can see and I don't understand all this just yet...still learning. C-Beats mentioned on discord that it might be easier to "use the current curve settings, then just rotate the image and camera to look at it from the appropriate angle" but I haven't been able to find how to do that. Here is my current wheel code for ref...TIA for ANY help!!!

<!-- Wheel -->
        <Grid x:Name="Wheel" HorizontalAlignment="Left" VerticalAlignment="Top" Visibility="Visible" Width="{Binding ElementName=Canvas,Path=ActualWidth,Converter={StaticResource ScalePropertyValueD},ConverterParameter=W;1703;1920}" Height="{Binding ElementName=Canvas,Path=ActualHeight,Converter={StaticResource ScalePropertyValueD},ConverterParameter=H;627;1080}" RenderTransformOrigin="0.5,0.5" Panel.ZIndex="15"  >
            <coverFlow:FlowControl x:Name="FlowControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                CurveAmount="0" VisibleCount="5"  Rows="1" Endless="True"   ItemSpacing="-0.8,0"
                SelectedItemSpacing="-0.5,0" SelectedOffset="0,0,1" SelectedScale="1.25,1.25"
                PageSize="5" DelaySelectedItemAnimation="False" MinimumAnimationSpeed="400">
                <coverFlow:FlowControl.Camera>
                    <OrthographicCamera Position="0,0,6" LookDirection="0,0,-1" NearPlaneDistance=".01" FarPlaneDistance="1000" Width="6.8"/>
                </coverFlow:FlowControl.Camera>
                <coverFlow:FlowControl.FlowTemplate>
                    <DataTemplate>
                        <coverFlow:FlowContext>
                            <coverFlow:FlowImage ImageType="Clear Logo" RenderOptions.BitmapScalingMode="HighQuality" UseImageCache="False"/>
                            <coverFlow:FlowContext.Style>
                                <Style TargetType="coverFlow:FlowContext">
                                    <Style.Triggers>
                                        <Trigger Property="IsItemSelected" Value="True">
                                            <Setter Property="RotationAxis" Value="0,0,0"/>
                                            <Setter Property="RotationAngle" Value="0"/>
                                        </Trigger>
                                        <Trigger Property="IsLeftOfSelected" Value="True">
                                            <Setter Property="RotationAxis" Value="0,0,0"/>
                                            <Setter Property="RotationAngle" Value="0"/>
                                        </Trigger>
                                        <Trigger Property="IsRightOfSelected" Value="True">
                                            <Setter Property="RotationAxis" Value="0,0,0"/>
                                            <Setter Property="RotationAngle" Value="0"/>
                                        </Trigger>
                                    </Style.Triggers>
                                </Style>
                            </coverFlow:FlowContext.Style>
                        </coverFlow:FlowContext>
                    </DataTemplate>
                </coverFlow:FlowControl.FlowTemplate>
                <coverFlow:FlowControl.RenderTransform>
                    <TransformGroup>
                        <RotateTransform Angle="0" />
                        <ScaleTransform ScaleX="1" ScaleY="1" />
                        <SkewTransform  AngleX="0" AngleY="0" />
                    </TransformGroup>
                </coverFlow:FlowControl.RenderTransform>
            </coverFlow:FlowControl>
            <Grid.RenderTransform>
                <TransformGroup>
                    <SkewTransform AngleX="0" AngleY="0"/>
                    <RotateTransform Angle="0"/>
                    <TranslateTransform X="{Binding ElementName=Canvas,Path=ActualWidth,Converter={StaticResource ScalePropertyValueD},ConverterParameter=X;110;1920}" Y="{Binding ElementName=Canvas,Path=ActualHeight,Converter={StaticResource ScalePropertyValueD},ConverterParameter=Y;207;1080}" />
                </TransformGroup>
            </Grid.RenderTransform>
        </Grid>

im trying to generate marquee images for each game eg display the wheel image and 3d box art onto an image.

ive found software to autogenerate wheel images etv (kustom wheel creation) 

but i cant work out what to do for the marquee.

ive designed the image i want in Community Theme creator but cant find option to generate for each game.

I may have designed in wrong area but im not sure 

Can ANYONE please help.

similar to sample shown 

• Go to 
  • Tools
  • Options
  • Visuals
    • Background
    • Check the Box "Use Game Background Images"

To show a games animated Background Image (i.e. gameName.gif)  Using the Default Theme as an example...

1. Enable Game Background Image as shown above.
   • Note: Blur Amount has no effect on animated gifs. But the Fade Amount does.
2. Add animated gifs to your games as Background Images.  (saving as 'Fanart - Background' works well)
   • You will need to find (create?) your own images.  Animated gifs are not available from the LaunchBox Database (nor EmuMovies??)
3. In Windows Explorer, make a copy of the folder ..\LaunchBox\LBThemes\Default\
   1. i.e.  D:\LaunchBox\LBThemes\Default - Copy\
4. In this 'new' folder, navigate to the Views subfolder and open "ContentBackgroundView.xaml" using any text editor.
5. In the declarations, add

6. xmlns:gif="clr-namespace:WpfAnimatedGif;assembly=Unbroken.LaunchBox.Windows"

7. On the line beginning with <Image change Name="Image" to Name="Image2"
8. On the next line, after "HighQuality" add a space and then insert

9. gif:ImageBehavior.AnimatedSource="{Binding ImagePath}"

10. Save and close.
11. In LaunchBox, go to Tools - Options - Visuals - Main Window Theme
    • Set the Theme: to the one you just copied (created) / saved  (Default - Copy)
12. Click OK to save this option and restart LaunchBox

ContentBackgroundView.xaml After making the above changes:

How can I add the total number of games to the little bit at  the bottom that says the system name and year? I pasted below the part of the code that seems to refer to the metadata, but there seem to be so many little variables and things in each entry that I feel like I have no idea where to start. Could someone help me with making another entry(?) in the year and manufacturer section that has the total number of games for the system as well?

<!-- METADATA GLASS BAR -->
            <Border x:Name="MetaDataGlass" Grid.Column="4" Grid.ColumnSpan="5" Grid.Row="7" Grid.RowSpan="5" Background="Black" Opacity="0" Panel.ZIndex="15" SnapsToDevicePixels="True" CornerRadius="10" />

        <!-- PLATFORM TITLE -->
            <Viewbox Grid.Column="5" Grid.ColumnSpan="3" Grid.Row="8" Panel.ZIndex="20" >
                <DockPanel Height="36" Width="661" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
                    <TextBlock x:Name="DetailsBar1" Text="{Binding Path=SelectedPlatform.Name}" FontFamily="Arial Black" FontSize="28" FontWeight="Bold" DockPanel.Dock="Top" TextAlignment="Center" VerticalAlignment="Center" >
                        <TextBlock.Foreground>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#FF1FA66F" Offset="1"/>
                                <GradientStop Color="#FF30FF30"/>
                            </LinearGradientBrush>
                        </TextBlock.Foreground>
                    </TextBlock>
                </DockPanel>
            </Viewbox>

        <!-- RELEASE YEAR AND MANUFACTURER -->
            <Viewbox Grid.Column="5" Grid.ColumnSpan="3" Grid.Row="10" Panel.ZIndex="20" >
                <DockPanel Height="26" Width="661" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
                    <TextBlock x:Name="DetailsBar2" FontFamily="Calibri" FontSize="24"  FontWeight="Bold" DockPanel.Dock="Top" Foreground="White" TextAlignment="Center" >
                      <Run Text="{Binding Path=ActivePlatform.ReleaseDate, StringFormat=yyyy}"/>
                      <Run Text="    " />
                      <Run Text="{Binding Path=ActivePlatform.Developer}" />
                    </TextBlock>
                </DockPanel>
            </Viewbox>
        </Grid>
    </Canvas>

I was also struggling to figure out how to change the position on the screen of some objects. I would really like for the recently played game boxes to be off to the side a bit... I've tried changing the column number and row number etc but that just seems to have no effect or makes Big Box crash if I enter something invalid. All I've done is take the code for the recently played games and tried pasting it in different locations in the text file. I'm pretty happy with how things look now but I would love to just be able to add the total games for each system.

Thanks

PlatformWheel3FiltersView.xaml

With that out of the way, I'm trying to build a masonry-style layout for the Wall views in Big Box so that collections with games at different aspect ratios (as a very simple example, North American SNES game cases tending towards landscape and Japanese SNES/SFC games tending towards portrait) can still display nicely without any odd sizing issues. From what I can tell, this is not something that can be accomplished using coverFlow. The spacing between items seems to be an offset, rather than, for example, setting a specific pixel (or relative unit) margin between items. I've tried using other controls to display the games in the view to circumvent this, but as soon as I replace the coverFlow control with something else (for example, an ItemsControl), Big Box seems to lock up. It's not throwing an error, but it's not displaying any games or details, nor does it allow you to navigate or leave the view. I'm not sure if this is due to a missing binding on the replacement control, or if there's something else going on here. If anyone has any ideas or suggestions, or if you know for certain that what I'm trying to do is not possible, please let me know! Alternatively, if I'm missing something incredibly simple, please don't hesitate to call me out on it either!