Hybrid Views

Written By Brian Faeran

Last updated About 1 month ago

Hybrid Views are powerful new theme files in Big Box that seamlessly combine both Platform and Game views into a single XAML file. Each Hybrid View includes logic to dynamically switch between platform and game modes using a trigger binding, so you can design unified layouts that smoothly transition between wheels.

You get up to 4 Hybrid Views per theme, located in:\\LaunchBox\Themes\[Your Theme Name]\Views\PlatformHybrid1View.xaml (and 2–4)

  • If a specific Hybrid View file doesn’t exist in your theme, it won’t show up as an option in Big Box.

  • Hybrid Views can also be enabled or disabled for user selection via your ThemeSettings.xml file, located in the root of your theme.

  • Most data bindings available in standard Platform or Game views will also work here. (A full list of supported bindings is included below.)

  • A game view is still needed if:

    • A user enters into the Game Details menu

    • A user makes a search or filters the list

Whether you're building sleek, modern layouts or nostalgic mashups, Hybrid Views give you the best of both worlds—all in one place.

Data Binding Properties for Root Platform/Filters and Game Views

NavigationInProgressA Boolean value that changes to True during navigation between items in the list, and then changes to False when done navigating and the details for the selected item are loaded. This binding is useful primarily as a trigger for animations. When the property is true, navigation is in progress and no clear item is selected. When the property is false, navigation has completed and there is a clear item selected.

<TextBlock Text="{Binding NavigationInProgress}" />

NavigationStartedCounterAn Integer value that increments by one every time NavigationInProgress changes to True. This is useful for various binding operations that don’t look at the value, but need to only trigger when navigation starts.

<TextBlock Text="{Binding NavigationStartedCounter}" />

NavigationEndedCounterAn Integer value that increments by one every time NavigationInProgress changes to False. This is useful for various binding operations that don’t look at the value, but need to only trigger when navigation ends.

<TextBlock Text="{Binding NavigationEndedCounter}" />

NavigationDirectionA point value that changes to reflect what direction the view is being navigated. Returns one of the below values when the input is pressed and clears to (0, 0) once the selected item is loaded.

<TextBlock Text="{Binding NavigationDirection}" /> Possible Values (0, 0) - No input, default (-1, 0) - Left (1, 0) - Right (0, 1) - Up (0, -1) - Down

BackgroundFadeA decimal value between 0 and 1 that specifies how much to fade out background images and videos

<SolidColorBrush Color="Black" Opacity="{Binding BackgroundFade}" />

IndexVisibilityThe current visibility of the alphanumeric index; value of type Visibility

<ListBox Name="Index" Style="{DynamicResource ListBoxStyle}" DockPanel.Dock="Left" Width="60" Visibility="{Binding IndexVisibility}">  <i:Interaction.Triggers>     <i:EventTrigger EventName="MouseDoubleClick">       <cal:ActionMessage MethodName="OnEnter" />     </i:EventTrigger>   </i:Interaction.Triggers> </ListBox>

PreviousPageA text binding that displays the view a user would return to when going back a level

<TextBlock Text="{Binding PreviousPage}" />

Position Count – For FlowControl/wheel viewsDisplays a count of where in the list the selected item is, and a total items count. Only works inside of a view using a FlowControl/Wheel.

<TextBlock Foreground="White">   <Run Text="{Binding ElementName=FlowControl, Path=SelectedItemIndex, Mode=OneWay}"/>        <Run Text="/"/>   <Run Text="{Binding ElementName=FlowControl, Path=MaxItems, Mode=OneWay}"/></TextBlock>

IsGameWheelActiveA boolean that will be True if a user is navigating on a Game Wheel, and False when a user is navigating on a Platform/Filter wheel. This is one of the ONLY Hybrid view specific binding and is extremely important.

<TextBlock Foreground="White" Text="This Text Only Appears on a Game Wheel">   <TextBlock.Style>    <Style TargetType="TextBlock">      <Setter Property="Visibility" Value="Collapsed"/>      <Style.Triggers>        <DataTrigger Binding="{Binding IsGameWheelActive}" Value="True">          <Setter Property="Visibility" Value="Visible"/>        </DataTrigger>      </Style.Triggers>    </Style>  </TextBlock.Style></TextBlock>

CurrentTimeA text binding that displays the current time in 12 hour format: 12:00 AM

<TextBlock Text="{Binding CurrentTime}" />

CurrentDateTimeA text binding that displays the current date time in date time format, allows to adjust the format using StringFormat

<TextBlock Text="{Binding CurrentDateTime}" />

Transition Presenters for Hybrid View

Some TransitionPresenter elements in Hybrid Views are smartly designed for dual use. They’ll automatically display platform or filter-related info and media when you’re in the platform section, and game-specific content when you’re in the game section—all within the same element. We’ll clearly note when a TransitionPresenter supports this dynamic behavior.

ImageVideoTransitionSelectorThe type of transition to use for foreground videos and secondary images. It will display either Platform/Filter or Game videos/images depending on the section the user is in

<transitions:TransitionPresenter Grid.Row="3" TransitionSelector="{Binding ImageVideoTransitionSelector}" Content="{Binding ImageVideoView}" IsContentVideo="true" />

BackgroundTransitionSelectorThe type of transition to use for background images and videos. It will display either Platform/Filter or Game videos/images depending on the section the user is in

<transitions:TransitionPresenter TransitionSelector="{Binding BackgroundTransitionSelector}" Content="{Binding BackgroundView}" Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}" IsContentVideo="true" />

ImageTransitionSelectorThe type of transition to use for Platform/Filter Banner images, or Game Box 3D Model/Box Front images, depending on user settings

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

TopBoxesTransitionSelectorThe type of transition to use for the top game thumbnails for platform/filter section

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

BottomBoxesTransitionSelectorThe type of transition to use for the bottom game thumbnails for platform/filter section

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

DetailsTransitionSelectorThe type of transition to use for the details of the selected platform/filter or game

<transitions:TransitionPresenter Grid.Column="2" TransitionSelector="{Binding DetailsTransitionSelector}" Content="{Binding DetailsView}" />

Data Text and Image Bindings for Platform/Filter Section

ActiveFilter vs. SelectedFilter

Please note that with the below properties, anywhere ActiveFilter is used, SelectedFilter can be used instead. ActiveFilter will wait for the selection to be completely updated before updating, while SelectedFilter will update immediately upon selecting a new platform (even during fast navigation). Using SelectedFilter can cause serious performance issues during fast navigation.

ActiveFilter.BannerImagePathThe file path to use for the selected platform’s banner image

<Image Source="{Binding Path=ActivePlatform.BannerImagePath}" />

ActiveFilter.DeviceImagePathThe file path to use for the selected platform’s device image

<Image Source="{Binding Path=ActiveFilter.DeviceImagePath}" />

ActiveFilter.ClearLogoImagePath The file path to use for the selected platform’s clear logo image

<Image Source="{Binding Path=ActiveFilter.ClearLogoImagePath}" />

ActiveFilter.BackgroundImagePath The file path to use for the selected platform’s background image

<Image Source="{Binding Path=ActiveFilter.BackgroundImagePath}" />

ActiveFilter.DefaultBoxImagePath The file path to use for the selected platform’s default game box image

<Image Source="{Binding Path=ActiveFilter.DefaultBoxImagePath}" />

ActiveFilter.Default3DBoxImagePath The file path to use for the selected platform’s default game 3D box image

<Image Source="{Binding Path=ActiveFilter.Default3DBoxImagePath}" />

ActiveFilter.DefaultCartImagePath The file path to use for the selected platform’s default game cart image

<Image Source="{Binding Path=ActiveFilter.DefaultCartImagePath}" />

ActiveFilter.Default3DCartImagePath The file path to use for the selected platform’s default game 3D cart image

<Image Source="{Binding Path=ActiveFilter.Default3DCartImagePath}" />

Title The title of the view

<TextBlock Text="{Binding Path=Title}" Visibility="{Binding Path=TitleVisibility}" Foreground="White" />

TitleVisibility The visibility of the title of the view per the Big Box settings; value of type Visibility

<TextBlock Text="{Binding Path=Title}" Visibility="{Binding Path=TitleVisibility}" Foreground="White" />

FilterType Displays the filter a user is currently in

<TextBlock Text="{Binding Path=FilterType}" Foreground="White" />

IsFilter A boolean value (True/False) that changes based on whether a user is within a filter section or not

<TextBlock Text="{Binding Path=IsFilter}" Foreground="White" />

ActiveFilter.Name The selected platform’s Name

<TextBlock Text="{Binding Path=ActiveFilter.Name}" Foreground="White" />

ActiveFilter.ReleaseDate The selected platform’s Release Date; nullable DateTime value

<TextBlock Text="{Binding Path=ActiveFilter.ReleaseDate, StringFormat=d}" Foreground="White" />

ActiveFilter.Developer The selected platform’s Developer

<TextBlock Text="{Binding Path=ActiveFilter.Developer}" Foreground="White" />

ActiveFilter.Manufacturer The selected platform’s Manufacturer

<TextBlock Text="{Binding Path=ActiveFilter.Manufacturer}" Foreground="White" />

ActiveFilter.Cpu The selected platform’s CPU details

<TextBlock Text="{Binding Path=ActiveFilter.Cpu}" Foreground="White" />

ActiveFilter.Memory The selected platform’s Memory details

<TextBlock Text="{Binding Path=ActiveFilter.Memory}" Foreground="White" />

ActiveFilter.Graphics The selected platform’s Graphics details

<TextBlock Text="{Binding Path=ActiveFilter.Graphics}" Foreground="White" />

ActiveFilter.Sound The selected platform’s Sound details

<TextBlock Text="{Binding Path=ActiveFilter.Sound}" Foreground="White" />

ActiveFilter.Display The selected platform’s Display details

<TextBlock Text="{Binding Path=ActiveFilter.Display}" Foreground="White" />

ActiveFilter.Media The selected platform’s Media details

<TextBlock Text="{Binding Path=ActiveFilter.Media}" Foreground="White" />

ActiveFilter.TotalGameCount The total number of games available for the selected platform (excluding broken or hidden games based on the user’s settings, and not including filter totals)

<TextBlock Text="{Binding Path=ActiveFilter.TotalGameCount}" Foreground="White" />

GamesCount The total number of games available for any situation, including platforms, categories, playlists, and filters. This will act as an ActiveGame binding due to the performance hit it can cause to your view.

<TextBlock Text="{Binding Path=GamesCount}" Foreground="White" />

ActiveFilter.MaxControllers The selected platform’s Max Controllers details

<TextBlock Text="{Binding Path=ActiveFilter.MaxControllers}" Foreground="White" />

ActiveFilter.Notes The selected platform’s Notes

<TextBlock Text="{Binding Path=ActiveFilter.Notes}" Foreground="White" />

Data Text and Image Bindings for Games Section

ActivePlatform vs. SelectedPlatform

Please note that with the below properties, anywhere ActivePlatform is used, SelectedPlatform can be used instead. ActivePlatform will wait for the selection to be completely updated before updating, while SelectedPlatform will update immediately upon selecting a new platform (even during fast navigation). Using SelectedPlatform can cause serious performance issues during fast navigation.

FilterTitleReturns the name of the filter value that is being used to display games for. For example, if a particular genre is being shown, this will be the genre name. Bare in mind that if the “Show Games List Title” Big Box Setting is set to false, then this property will always be null or empty.

<TextBlock Text="{Binding Path=FilterTitle}" Foreground="White" />

KnownPlatformOrPlaylistTitle This property can be used to get the actual platform name instead of the currently selected nested playlist name, for programmatic purposes. Will be null or empty if the current view is not displaying a platform or playlist.

<TextBlock Text="{Binding Path=KnownPlatformOrPlaylistTitle}" Foreground="White" />

Platform.NameThe platform or playlist name that this games view is currently showing games for. Will be null or empty if the games view is not currently showing a platform or a playlist (if it’s showing a different filter type instead). Please note that other properties on the Platform type can be used as well; see the ActivePlatform properties of the Root Filters/Platforms Views section below.

<TextBlock Text="{Binding Path=Platform.Name}" Foreground="White" />

ActiveGame.ScreenshotImagePath The file path to use for the selected game’s screenshot image

<Image Source="{Binding Path=ActiveGame.ScreenshotImagePath}" />

ActiveGame.FrontImagePath The file path to use for the selected game’s front image

<Image Source="{Binding Path=ActiveGame.FrontImagePath}" />

ActiveGame.BackImagePath The file path to use for the selected game’s back image

<Image Source="{Binding Path=ActiveGame.BackImagePath}" />

ActiveGame.Box3DImagePath The file path to use for the selected game’s 3D box image

<Image Source="{Binding Path=ActiveGame.Box3DImagePath}" />

ActiveGame.BackgroundImagePath The file path to use for the selected game’s background image

<Image Source="{Binding Path=ActiveGame.BackgroundImagePath}" />

ActiveGame.Cart3DImagePath The file path to use for the selected game’s 3D cart image

<Image Source="{Binding Path=ActiveGame.Cart3DImagePath}" />

ActiveGame.CartFrontImagePath The file path to use for the selected game’s front cart image

<Image Source="{Binding Path=ActiveGame.CartFrontImagePath}" />

ActiveGame.CartBackImagePath The file path to use for the selected game’s back cart image

<Image Source="{Binding Path=ActiveGame.CartBackImagePath}" />

ActiveGame.ClearLogoImagePath The file path to use for the selected game’s clear logo image

<Image Source="{Binding Path=ActiveGame.ClearLogoImagePath}" />

ActiveGame.BannerImagePath The file path to use for the selected game’s banner image

<Image Source="{Binding Path=ActiveGame.BannerImagePath}" />

ActiveGame.MarqueeImagePath The file path to use for the selected game’s marquee image

<Image Source="{Binding Path=ActiveGame.MarqueeImagePath}" />

ActiveGame.Cart3DOrNormalImagePath The file path to use for the selected game’s 3D cart image, with fallback to the cart front image

<Image Source="{Binding Path=ActiveGame.Cart3DOrNormalImagePath}" />

ActiveGame.Box3DOrNormalImagePath The file path to use for the selected game’s 3D box image, with fallback to the box front image

<Image Source="{Binding Path=ActiveGame.Box3DOrNormalImagePath}" />

ActiveGame.ArcadeControlsInformationImagePath The file path to use for the selected game’s arcade controls information image

<Image Source="{Binding Path=ActiveGame.ArcadeControlsInformationImagePath}" />

ActiveGame.ArcadeCabinetImagePath The file path to use for the selected game’s arcade cabinet image

<Image Source="{Binding Path=ActiveGame.ArcadeCabinetImagePath}" />

ActiveGame.ArcadeCircuitBoardImagePath The file path to use for the selected game’s arcade circuit board image

<Image Source="{Binding Path=ActiveGame.ArcadeCircuitBoardImagePath}" />

ActiveGame.ArcadeControlPanelImagePath The file path to use for the selected game’s arcade control panel image

<Image Source="{Binding Path=ActiveGame.ArcadeControlPanelImagePath}" />

ActiveGame.ApplicationFileNameWithoutExtension The selected game’s application or ROM file name without the folder path or file extension

<TextBlock Text="{Binding Path=ActiveGame.ApplicationFileNameWithoutExtension}" Foreground="White" />

ActiveGame.ApplicationPath The selected game’s application or ROM file name

<TextBlock Text="{Binding Path=ActiveGame.ApplicationPath}" Foreground="White" />

ActiveGame.DateAdded The date and time that the selected game was added to the collection; DateTime value

<TextBlock Text="{Binding Path=ActiveGame.DateAdded, StringFormat=d}" Foreground="White" />

ActiveGame.DateModified The date and time that the selected game was last modified; DateTime value

<TextBlock Text="{Binding Path=ActiveGame.DateModified, StringFormat=d}" Foreground="White" />

ActiveGame.Developer Semicolon-separated list of the selected game’s developers

<TextBlock Text="{Binding Path=ActiveGame.Developer}" Foreground="White" />

ActiveGame.Favorite Whether or not the selected game is marked as a Favorite; boolean value

<Image Source="pack://application:,,,/Resources/BigBoxFavorite.png" RenderOptions.BitmapScalingMode="HighQuality"> <Image.Style> <Style TargetType="Image"> <Setter Property="Visibility" Value="Collapsed" /> <Style.Triggers> <DataTrigger Binding="{Binding ActiveGame.Favorite}" Value="True"> <Setter Property="Visibility" Value="Visible" /> </DataTrigger> <DataTrigger Binding="{Binding ActiveGame.Favorite}" Value="False"> <Setter Property="Visibility" Value="Collapsed" /> </DataTrigger> </Style.Triggers> </Style> </Image.Style> </Image>

ActiveGame.LastPlayedDate The date and time that the selected game was last played; nullable DateTime value

<TextBlock Text="{Binding Path=ActiveGame.LastPlayedDate, StringFormat=d}" Foreground="White" />

ActiveGame.Notes The selected game’s notes

<TextBlock Text="{Binding Path=ActiveGame.Notes}" Foreground="White" />

ActiveGame.Platform The name of the selected game’s platform

<TextBlock Text="{Binding Path=ActiveGame.Platform}" Foreground="White" />

ActiveGame.PlayTime The number of seconds the selected game has been played

<TextBlock Text="{Binding Path=ActiveGame.PlayTime}" Foreground="White" />

ActiveGame.PlayTimeHms The selected game’s playtime in “##h ##m ##s” format

<TextBlock Text="{Binding Path=ActiveGame.PlayTimeHms}" Foreground="White" />

ActiveGame.PlayTimeHours The selected game’s playtime in “##.## hours” format

<TextBlock Text="{Binding Path=ActiveGame.PlayTimeHours}" Foreground="White" />

ActiveGame.ProgressThe Game Progress value, including both Category and Value (ie. Active / In Progress)

<TextBlock Text="{Binding Path=ActiveGame.Progress}" Foreground="White" />

ActiveGame.Publisher Semicolon-separated list of the selected game’s publishers

<TextBlock Text="{Binding Path=ActiveGame.Publisher}" Foreground="White" />

ActiveGame.Rating The ESRB rating of the selected game

<TextBlock Text="{Binding Path=ActiveGame.Rating}" Foreground="White" />

ActiveGame.ReleaseDate The selected game’s release date; nullable DateTime value

<TextBlock Text="{Binding Path=ActiveGame.ReleaseDate, StringFormat=d}" />

ActiveGame.ReleaseYear The selected game’s release year; nullable integer value

<TextBlock Text="{Binding Path=ActiveGame.ReleaseYear}" Foreground="White" />

ActiveGame.SortTitle The selected game’s Sort Title

<TextBlock Text="{Binding Path=ActiveGame.SortTitle}" Foreground="White" />

ActiveGame.Source The selected game’s Source

<TextBlock Text="{Binding Path=ActiveGame.Source}" Foreground="White" />

ActiveGame.StarRating The user’s selected game’s Star Rating; integer value between 0 and 5

<TextBlock Text="{Binding Path=ActiveGame.StarRating}" Foreground="White" />

ActiveGame.CommunityOrLocalStarRating Display a user’s star rating with a fallback to the community star rating

<TextBlock Text="{Binding Path=ActiveGame.CommunityOrLocalStarRating}" Foreground="White" />

ActiveGame.Status The selected game’s Status

<TextBlock Text="{Binding Path=ActiveGame.Status}" Foreground="White" />

ActiveGame.Title The selected game’s Title

<TextBlock Text="{Binding Path=ActiveGame.Title}" Foreground="White" />

ActiveGame.Version The selected game’s Version

<TextBlock Text="{Binding Path=ActiveGame.Version}" Foreground="White" />

ActiveGame.Series Semicolon-separated list of the selected game’s Series values

<TextBlock Text="{Binding Path=ActiveGame.Series}" Foreground="White" />

ActiveGame.PlayMode Semicolon-separated list of the selected game’s Play Modes

<TextBlock Text="{Binding Path=ActiveGame.PlayMode}" Foreground="White" />

ActiveGame.Region The selected game’s Region

<TextBlock Text="{Binding Path=ActiveGame.Region}" Foreground="White" />

ActiveGame.PlayCount The selected game’s Play Count; integer value

<TextBlock Text="{Binding Path=ActiveGame.PlayCount}" Foreground="White" />

ActiveGame.Portable Whether or not the selected game is marked Portable; boolean value

<Image Source="pack://application:,,,/Resources/BigBoxPortable.png" RenderOptions.BitmapScalingMode="HighQuality"> <Image.Style> <Style TargetType="Image"> <Setter Property="Visibility" Value="Collapsed" /> <Style.Triggers> <DataTrigger Binding="{Binding ActiveGame.Portable}" Value="True"> <Setter Property="Visibility" Value="Visible" /> </DataTrigger> <DataTrigger Binding="{Binding ActiveGame.Portable}" Value="False"> <Setter Property="Visibility" Value="Collapsed" /> </DataTrigger> </Style.Triggers> </Style> </Image.Style> </Image>

ActiveGame.Broken Whether or not the selected game is marked Broken; boolean value

<Image Source="pack://application:,,,/Resources/BigBoxBroken.png" RenderOptions.BitmapScalingMode="HighQuality"> <Image.Style> <Style TargetType="Image"> <Setter Property="Visibility" Value="Collapsed" /> <Style.Triggers> <DataTrigger Binding="{Binding ActiveGame.Broken}" Value="True"> <Setter Property="Visibility" Value="Visible" /> </DataTrigger> <DataTrigger Binding="{Binding ActiveGame.Broken}" Value="False"> <Setter Property="Visibility" Value="Collapsed" /> </DataTrigger> </Style.Triggers> </Style> </Image.Style> </Image>

ActiveGame.GenresString Semicolon-separated list of the selected game’s Genres

<TextBlock Text="{Binding Path=ActiveGame.GenresString}" Foreground="White" />

Data Text Bindings for Platform/Filter and Game Details Views

These bindings can be found on the normal Data Bindings page: