Controls View and Playback Controls

Written By launchbox

Last updated About 1 month ago

ControlsView.xaml is the themed view for LaunchBox's compact top control surface. It is hosted by MainView.xaml and uses ControlsViewModel as its data context.

The default view is small, but it controls several important pieces of behavior: status text, the controls popup, box size adjustment, global volume, mute, and music playback buttons.


Where ControlsView Is Hosted

MainView.xaml hosts the controls view with a ContentControl named ControlsViewModel.

<ContentControl x:Name="ControlsViewModel"                    Visibility="{Binding ControlsVisibility}" />

The contents of that area come from:

LBThemes\[Theme Name]\Views\ControlsView.xaml

If your theme includes a custom ControlsView.xaml, LaunchBox loads it in this top bar area.


What ControlsView Handles

The default ControlsView.xaml includes:

  • Status text for the current game list

  • A controls popup toggle button

  • A box size slider

  • A global volume slider

  • A mute button

  • Previous track button

  • Play button

  • Pause button

  • Next track button


Status Text

The status text binds to StatusText. LaunchBox updates this as content views populate games.

Text="{Binding StatusText}"

This is commonly used for text such as the number of displayed games compared to the total library count. Theme developers can move or restyle it, but should keep the StatusText binding if they want that information shown.


Box Size Slider

The box size slider binds to BoxSize. It changes the size of boxes in the boxes content view.

Value="{Binding Path=BoxSize, Mode=TwoWay}"

The default slider also calls OnSliderValueChanged when the value changes.

cal:Message.Attach="[Event ValueChanged] = [Action OnSliderValueChanged()]"

That action lets LaunchBox repopulate the sidebar/content state when the slider changes outside of drag handling. If you keep a box size slider, preserve the two-way BoxSize binding and the value changed action.


Volume Slider

The volume slider binds to VolumeValue. This value controls LaunchBox music volume and also updates video volume in the game details panel.

Value="{Binding Path=VolumeValue, Mode=TwoWay}"

The default view also wires mouse and drag events so users can click or drag the vertical slider naturally.

OnVolumeSliderPreviewMouseLeftButtonDown    OnVolumeSliderPreviewMouseMove    OnVolumeSliderPreviewMouseLeftButtonUp    OnVolumeSliderDragStarted    OnVolumeSliderDragCompleted

If you restyle the volume slider, keep these bindings and event actions unless you are intentionally replacing the volume interaction model.


Mute Button

The mute button calls ToggleVolumeMute().

cal:Message.Attach="[Action ToggleVolumeMute()]"

When muted, VolumeValue becomes 0. When unmuted, LaunchBox restores the previous non-zero volume value.


Music Playback Buttons

The default controls view includes previous, play, pause, and next buttons. These are bound to commands and state properties from ControlsViewModel.

ControlImportant Bindings

Previous

PreviousCommand, PreviousEnabled

Play

PlayCommand, PlayEnabled, PlayVisibility, PlayPauseToolTip

Pause

PauseCommand, PauseVisibility, PlayPauseToolTip

Next

NextCommand, NextEnabled

PlayVisibility and PauseVisibility switch between the play and pause buttons depending on current music state. Keep those visibility bindings if your theme uses separate play and pause controls.


Text Toggle Support

ControlsViewModel also exposes TextEnabled and ToggleText(). These control whether text appears under boxes in the boxes content view.

TextEnabled    ToggleText()

The current default ControlsView.xaml does not emphasize this as a visible button, but custom themes can expose it if they want a direct toggle for box text.


What You Can Safely Customize

Theme developers commonly customize:

  • The placement of the controls popup button

  • Status text typography and opacity

  • Slider size, orientation, colors, and thumb styling

  • Playback icon shapes

  • Hover, disabled, and pressed visual states

  • The popup background and spacing

  • Whether controls appear inline or inside a popup

The visual structure can change significantly as long as the important bindings and actions remain connected.


What to Be Careful With

Preserve these pieces when rebuilding ControlsView.xaml:

  • StatusText if you show game list status

  • BoxSize if you include a box size slider

  • OnSliderValueChanged() if you keep box size slider behavior

  • VolumeValue if you include volume control

  • Volume slider mouse and drag actions if you keep the default interaction model

  • ToggleVolumeMute() if you include mute

  • PreviousCommand, PlayCommand, PauseCommand, and NextCommand if you include music buttons

  • PlayVisibility and PauseVisibility if play and pause are separate controls

  • PreviousEnabled, PlayEnabled, and NextEnabled for disabled states

Removing these bindings can make the controls look correct while breaking box sizing, volume, mute, or playback behavior.



In Short

ControlsView.xaml themes LaunchBox's top control surface. Use it to restyle status text, box size, volume, mute, and music playback controls. Keep the command, visibility, value, and event bindings connected so the controls continue to drive LaunchBox behavior instead of becoming purely visual elements.