The Game Discovery Center - Theme Tutorial

[faeran]

This post should help theme developers create a custom theme for the Game Discovery Center. I assume you already have some knowledge about how Big Box themes work. The Documentation.pdf file inside of your LaunchBox\Themes folder is a better place to gain knowledge on basic Big Box theming and bindings. I'll try and keep this updated if this view gains more themable features. Let me know if you have any questions.

 

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".

[DazStelfox79]

Hi Faeran

Wondering if you could help me. I have created a new theme called Playtime, My themes are normally hybrid so part CTC & part XAML & I want to create a new Game Discovery Center View that looks like my themes Platform View but i am struggling, I have attached some pics for reference.

All I basically want to do is keep the List banners layout as it is in the Game Discovery Center View & drop them in my platform view replacing the current coverflow. or create a new Game Discovery Center View, I tried to do this a few different ways,

Firstly i renamed the PlatformWheel2FiltersView in my theme to DiscoveryPageView & dropped all the relevant binary's from the default DiscoveryPageView into it & Launchbox crashes.

Secondly I copied & pasted the default DiscoveryPageView from Launchbox folder into my Custom theme (Playtime) views folder as stated above then copied & pasted some code from my PlatformWheel2FiltersView into the DiscoveryPageView in my custom theme for instance just the White border you see in my theme & when i go into Big Box, Select Game Discovery Center & either you can't see the white border i put in there or it just crashes.

Sorry if this sounds confusing as i just want to try & make the absolute fantastic Game Discovery Center View look like my theme.

[faeran]

20 hours ago, DazStelfox79 said:

Hi Faeran

Wondering if you could help me. I have created a new theme called Playtime, My themes are normally hybrid so part CTC & part XAML & I want to create a new Game Discovery Center View that looks like my themes Platform View but i am struggling, I have attached some pics for reference.

All I basically want to do is keep the List banners layout as it is in the Game Discovery Center View & drop them in my platform view replacing the current coverflow. or create a new Game Discovery Center View, I tried to do this a few different ways,

Firstly i renamed the PlatformWheel2FiltersView in my theme to DiscoveryPageView & dropped all the relevant binary's from the default DiscoveryPageView into it & Launchbox crashes.

Secondly I copied & pasted the default DiscoveryPageView from Launchbox folder into my Custom theme (Playtime) views folder as stated above then copied & pasted some code from my PlatformWheel2FiltersView into the DiscoveryPageView in my custom theme for instance just the White border you see in my theme & when i go into Big Box, Select Game Discovery Center & either you can't see the white border i put in there or it just crashes.

Sorry if this sounds confusing as i just want to try & make the absolute fantastic Game Discovery Center View look like my theme.

The first thing you did would be very hard to get right, so I can see that instantly crashing.

The second thing you did is more the way to go, but I would take it in steps. Copy and paste the entire Discovery page view, then load it up and make sure it works. Then make one change and see how it affects the view. Keep going like that, so you know the change that is crashing your theme so you can learn from it.

If you want to get into any code specifics send me a PM.

[DazStelfox79]

Thanks Faeran I will try in steps

[marph]

Hi Faeran

Thanks for this great new feature of BigBox. I have a question on how to make it more accessible within BigBox. I hope this is the right place to ask this, because my question is not really theme related.

I have a hierarchical LaunchBox setup. The top level consists of the platform categories "Arcade", "Computers", "Consoles", "Handhelds" and "Playlists". Each platform has the corresponding platform category set as parent. My custom playlists have the platform category "Playlists" set as parent. Now I would like to add an additional platform category which opens the Game Discovery Center. This would provide a more seamless way to access the Game Discovery Center within BigBox. How can I create a platform category like this?

[faeran]

22 hours ago, marph said:

Hi Faeran

Thanks for this great new feature of BigBox. I have a question on how to make it more accessible within BigBox. I hope this is the right place to ask this, because my question is not really theme related.

I have a hierarchical LaunchBox setup. The top level consists of the platform categories "Arcade", "Computers", "Consoles", "Handhelds" and "Playlists". Each platform has the corresponding platform category set as parent. My custom playlists have the platform category "Playlists" set as parent. Now I would like to add an additional platform category which opens the Game Discovery Center. This would provide a more seamless way to access the Game Discovery Center within BigBox. How can I create a platform category like this?

Not quite the section for this, however, at the moment this is not possible. What you could do is set up a hotkey that would bring you to the Game Discovery Center, and another one to bring you back to the Platform Categories section.

Essentially, Big Box is set up with a lot of root sections, you seem to use the Platform Categories section, others might use the Platform section, or playlists section. Game Discovery center is another section independent from all other sections.

It's possible we may revisit this in the future to provide some further customization, but there's going to be some challenges there, and I'm sure we won't be able to handle all mix and match situations, but at some point we'll give it a go.

[JurassicJaws174]

I love using the Game Discovery Center as the main starting point of BigBox.

I don't love having to back up and switch to different sections, or even setting a hotkey to do so, as it isn't intuitive for my "wife-proofing" method of approach.

What I am interested in, is seeing if it's possible to have one platform category displayed as a line on the Game Discovery Center, possibly underneath the platform list. I have a category with all my game series categorized in playlists. For example, a playlist for Mario games. I'd love to have a row with all the playlists of these collections listed out.

Is there a line of code I can enter to allow for this? I'd love some direction with it.

Once again, thanks for this amazing tool!

[marph]

On 5/23/2024 at 10:04 PM, faeran said:

Not quite the section for this, however, at the moment this is not possible. What you could do is set up a hotkey that would bring you to the Game Discovery Center, and another one to bring you back to the Platform Categories section.

Essentially, Big Box is set up with a lot of root sections, you seem to use the Platform Categories section, others might use the Platform section, or playlists section. Game Discovery center is another section independent from all other sections.

It's possible we may revisit this in the future to provide some further customization, but there's going to be some challenges there, and I'm sure we won't be able to handle all mix and match situations, but at some point we'll give it a go.

Thanks for the hint @faeran. I recognize that it might be a bit of a challange to code stuff like this and to meet all the different types of needs from all the users. But I do also agree to @JurassicJaws174. I think from a usability point of view it's confusing if one has to back up to the BigBox menu to change the root section or even more so to remember a hotkey. The problem with this menu is that the selection for this root views is mixed together with a lot of other things that are unrelated with the basic navigation within the games collection (like "About", "Options", "Shut Down" and so on).

My proposal for an easy fix: You could add a simple checkbox within the Edit Playlist dialogue that says someting like "Show Game Discoery Center in BigBox".