faeran Posted February 13 Share Posted February 13 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". 4 Quote Link to comment Share on other sites More sharing options...
DazStelfox79 Posted March 17 Share Posted March 17 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. Quote Link to comment Share on other sites More sharing options...
faeran Posted March 18 Author Share Posted March 18 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. Quote Link to comment Share on other sites More sharing options...
DazStelfox79 Posted March 19 Share Posted March 19 Thanks Faeran I will try in steps Quote Link to comment Share on other sites More sharing options...
marph Posted May 22 Share Posted May 22 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? Quote Link to comment Share on other sites More sharing options...
faeran Posted May 23 Author Share Posted May 23 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. 1 Quote Link to comment Share on other sites More sharing options...
JurassicJaws174 Posted August 5 Share Posted August 5 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! 1 Quote Link to comment Share on other sites More sharing options...
marph Posted August 10 Share Posted August 10 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". Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.