Creating Custom Screensavers for Big Box Themes

Screensavers in Big Box are a powerful way to boost game discoverability. They display games from your library, cycling through them every set number of seconds (based on user options), and allow users to press an action button to jump directly to the game being shown.

Everything about a screensaver’s look and behavior can be fully themed. This guide will walk you through all the LaunchBox-specific concepts, files, and bindings you need to know in order to create your own custom screensaver views.

📂 Where Screensaver Files Live

Screensaver view files are stored in your theme folder:

LaunchBox\Themes\[theme name]\Views 

Each theme can include up to four screensaver views:

Screensaver1View.xaml
Screensaver2View.xaml
Screensaver3View.xaml
Screensaver4View.xaml 

These files define the visual layout and bindings for your screensavers. Users will be able to select between them in Big Box.

Recommendation: The safest approach is to copy one of the default theme’s screensaver .xaml files as your starting point, then modify it to fit your design. The default theme includes four fully working examples you can learn from.

🏷 Naming Screensaver Views in Big Box

The ThemeSettings.xml file in your theme’s root folder defines how your screensaver views appear in Big Box’s selection list:

LaunchBox\Themes\[theme name]\ThemeSettings.xml 

Inside, you can set friendly names for each screensaver:

<Screensaver1Name>Ambiance</Screensaver1Name> <Screensaver2Name>Theater</Screensaver2Name>
<Screensaver3Name>Gallery</Screensaver3Name> <Screensaver4Name>Spotlight</Screensaver4Name> 

In Big Box, when a user is picking a screensaver to use, the name will display as:

[Theme Name] - [Screensaver Name] 

Example with the default theme:

Default - Ambiance 

🔗 Understanding Screensaver Bindings

Unlike normal Big Box views, screensavers do not have an ActiveGame or SelectedGame context. Instead, all data bindings reference Game, which represents the game currently being shown.

🎬 Using Transition Presenter Converters

A key concept in screensaver theming is the transition presenter. This allows smooth visual transitions between the outgoing game and the incoming game.

Common transition types include:

• FadeTransition

• DoorTransition

• ExplosionTransition

• FlipTransition

• RotateTransition

Each transition type has a Duration property in hours:minutes:seconds format:

<transitions:FadeTransition Duration="0:0:1" /> 

🛠 Setting up a Transition Presenter

1. Namespace
   Make sure the converters namespace is declared at the top of your .xaml file:

xmlns:converters="clr-namespace:Unbroken.LaunchBox.Windows.Converters;assembly=Unbroken.LaunchBox.Windows" 

2. Define the Converter
   Inside <UserControl.Resources>:

<converters:UpdateableDataTemplateConverter x:Key="TransitionTemplate"> <converters:UpdateableDataTemplateConverter.Template> <DataTemplate> <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> <!-- Your content goes here --> </Grid> </DataTemplate> </converters:UpdateableDataTemplateConverter.Template> </converters:UpdateableDataTemplateConverter> 

3. Use the Transition Presenter
   In your main grid:

<transitions:TransitionPresenter Content="{Binding Converter={StaticResource TransitionTemplate}, Path=Game}"> <transitions:TransitionPresenter.Transition> <transitions:FadeTransition Duration="0:0:1" /> </transitions:TransitionPresenter.Transition> </transitions:TransitionPresenter> 

This links the converter template to the game binding and applies the chosen transition.

Note: We will also cover UpdateableDataTemplateConverter in detail on the Converters page.

💡 Recommended Elements

• FlowImage and FlowVideo — optimized for performance when showing game images or videos. See FlowImage/FlowVideo for details.

• ControllerBindingDisplay — shows the user’s “Select” button mapping in the screensaver. See Controller Binding Display for details.

📊 Progress Indicators

Screensavers can display how long until the next game appears using these bindings:

• TotalTimeBeforeSwap — the number of seconds until the next game is shown.

• TimeSinceLastSwap — counts up from zero since the last game swap.

Example with a basic WPF progress bar:

<ProgressBar DockPanel.Dock="Bottom" Height="50" Foreground="CornflowerBlue" Maximum="{Binding TotalTimeBeforeSwap, Mode=OneWay}" Value="{Binding TimeSinceLastSwap, Mode=OneWay}"/> 

Once TimeSinceLastSwap equals TotalTimeBeforeSwap, the screensaver switches to the next game. You can use these values creatively for custom animations or visual cues.

✅ Final Tips

• Start from an existing default theme screensaver file for safe structure and namespaces.

• Use optimized controls like FlowImage and FlowVideo for performance.

• Keep transitions smooth and short for the best user experience.

• Remember: this is a screensaver. Avoid adding static elements that remain in the same position for long periods, as they could cause burn-in on certain monitors and TVs.