Hybrid Views

One View to Rule Them All.

Written By Brian Faeran

Last updated 7 months 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

NavigationInProgress
A 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}" />

NavigationStartedCounter
An 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}" />

NavigationEndedCounter
An 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}" />

NavigationDirection
A 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

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

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

IndexVisibility
The 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>

PreviousPage
A 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 views
Displays 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>

IsGameWheelActive
A 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>

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

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

CurrentDateTime
A 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.

ImageVideoTransitionSelector
The 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" />

BackgroundTransitionSelector
The 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" />

ImageTransitionSelector
The 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}" />

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

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

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

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

DetailsTransitionSelector
The 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.BannerImagePath
The file path to use for the selected platform’s banner image

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

ActiveFilter.DeviceImagePath
The 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.

FilterTitle
Returns 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.Name
The 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.Progress
The 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: