MainView Layout and Composition

Written By launchbox

Last updated About 1 month ago

MainView.xaml is the top-level layout file for a LaunchBox Desktop theme.

It controls the main LaunchBox window itself and decides where the major interface regions appear:

SideBarView.xaml    ContentBackgroundView.xaml    BoxesContentView.xaml or ListContentView.xaml    GameDetailsView.xaml or PlatformFiltersDetailsView.xaml    WorkingView.xaml

If you want to make a LaunchBox theme feel structurally different, MainView.xaml is usually the first file to study.

What MainView Controls

MainView.xaml controls the outer shell of LaunchBox:

Area	Purpose
Window	The main LaunchBox window, including custom chrome and sizing.
Top bar	Menu buttons, view buttons, badge menu, cloud sync indicator, achievement score, license text, and window controls.
Sidebar column	Hosts `SideBarView.xaml`.
Main content column	Hosts the active content view, usually boxes or list view.
Game details column	Hosts `GameDetailsView.xaml` or `PlatformFiltersDetailsView.xaml`.
Background layer	Hosts `ContentBackgroundView.xaml`.
Working overlay	Hosts `WorkingView.xaml` during long operations.
Splitters	Allow resizing sidebar and game details areas.

A simplified layout looks like this:

MainView.xaml      Top Bar      ContentBackgroundView      SideBarView      BoxesContentView or ListContentView      GameDetailsView or PlatformFiltersDetailsView      WorkingView

Main Layout Grid

The default MainView.xaml uses a main Grid with five columns:

Sidebar    Sidebar splitter    Main content    Game details splitter    Game details

The sidebar and game details widths are bound to LaunchBox settings through the main view model:

Width="{Binding SideBarWidth, Mode=TwoWay}"    Width="{Binding GameDetailsWidth, Mode=TwoWay}"

The splitters use related width and visibility bindings:

SideBarGridSplitterWidth    GameDetailsGridSplitterWidth    SideBarVisibility    GameDetailsVisibility

This allows LaunchBox to show, hide, and resize those areas based on user settings.

Sidebar Region

The sidebar region is hosted with:

<ContentControl x:Name="SideBarViewModel" />

The name is important. LaunchBox uses Caliburn.Micro conventions to connect SideBarViewModel to SideBarView.xaml.

Theme developers can move this control, restyle its surrounding area, or change how much space the sidebar gets. The actual sidebar contents are controlled by SideBarView.xaml.

Main Content Region

The main content area is hosted with a transition presenter:

<transitions:TransitionPresenter        TransitionSelector="{Binding ContentTransitionSelector}"        Content="{Binding ContentView}" />

ContentView is usually one of the main browsing views:

BoxesContentView.xaml    ListContentView.xaml

The active content view changes when the user switches between image/grid view and list view.

Background Region

The background layer is loaded behind the rest of the main interface:

<transitions:TransitionPresenter        TransitionSelector="{Binding ContentBackgroundTransitionSelector}"        Content="{Binding ContentBackgroundView}" />

This hosts ContentBackgroundView.xaml.

The default theme also places a fade rectangle over the background. Its opacity is bound through BackgroundFadeBrush, allowing LaunchBox visual settings to affect how strongly the background is faded.

Game Details Region

The game details area is hosted with:

<transitions:TransitionPresenter        TransitionSelector="{Binding GameDetailsTransitionSelector}"        Content="{Binding GameDetailsView}" />

This region can show:

GameDetailsView.xaml    PlatformFiltersDetailsView.xaml

GameDetailsVisibility, GameDetailsWidth, and GameDetailsMinWidth control whether the details panel is visible and how much room it uses.

Working Overlay

The working overlay is hosted at the end of the layout:

<ContentControl x:Name="WorkingViewModel" />

This loads WorkingView.xaml.

Because it spans the main grid, it can appear above the rest of the interface during long-running operations, downloads, imports, or progress states.

Top Bar

The default MainView.xaml includes a custom top bar instead of using the normal Windows title bar.

Common top bar controls include:

MenuDropDown    ToolsDropDown    ViewDropDown    ArrangeByDropDown    ImageGroupDropDown    BadgesDropDown    OpenAchievementProfile    License    Minimize    Maximize    Restore    Close

These button names connect to methods on MainViewModel. For example:

ToolsDropDown - opens the Tools menu    ViewDropDown - opens the View menu    ImageGroupDropDown - opens the Image Group menu    BadgesDropDown - opens the Badges menu    Minimize - minimizes LaunchBox    Maximize - maximizes LaunchBox    Restore - restores the window    Close - closes LaunchBox

When customizing the top bar, preserve button names for controls that are meant to trigger LaunchBox behavior.

Required License UI

MainView.xaml must include the LaunchBox license display.

The default theme includes a button named:

<Button x:Name="License">

Inside it, the license text is bound to:

Text="{Binding LicenseText}"

Custom themes should keep both:

License button    LicenseText binding

You can restyle or reposition the license UI, but it should not be removed. LaunchBox checks for this required UI when loading a custom MainView.xaml.

Transition Bindings

The default main view uses transition presenters for smooth changes between major regions:

Binding	Region
`ContentTransitionSelector`	Main content view transitions.
`ContentBackgroundTransitionSelector`	Background transitions.
`GameDetailsTransitionSelector`	Game details transitions.

These are provided by LaunchBox. Most themes should keep these bindings unless they are intentionally replacing transition behavior.

Common MainView Bindings

These bindings are especially important in MainView.xaml:

Binding	Purpose
`SideBarWidth`	Current sidebar width.
`SideBarMinWidth`	Minimum sidebar width.
`SideBarVisibility`	Shows or hides the sidebar.
`GameDetailsWidth`	Current game details panel width.
`GameDetailsMinWidth`	Minimum game details width.
`GameDetailsVisibility`	Shows or hides the game details panel.
`ContentView`	Active content view.
`ContentBackgroundView`	Active background view.
`GameDetailsView`	Active details view.
`WorkingVisibility`	Shows or hides the working overlay.
`ProcessingVisibility`	Shows or hides the thin processing indicator.
`ForegroundBrush`	Main foreground color.
`SelectionBackgroundBrush`	Selection/accent color.
`WindowControlsMargin`	Adjusts top bar positioning when maximized.

What to Be Careful With

When editing MainView.xaml, be careful with:

Renaming controls that map to view model actions.
Removing SideBarViewModel, WorkingViewModel, or transition presenters.
Removing the License button or LicenseText binding.
Hard-coding sidebar or details widths without preserving user resizing.
Blocking the top bar drag area or window controls.
Moving overlays behind other content unintentionally.
Removing visibility bindings that LaunchBox uses to show and hide regions.

The safest approach is to start from the Default theme, move one region at a time, and restart LaunchBox after each major layout change.

In Short

MainView.xaml is the composition root for a LaunchBox Desktop theme. It defines the main window, top bar, sidebar, content region, background, game details panel, splitters, transitions, and working overlay. Theme developers can heavily customize it, but should preserve the named controls, required license UI, region hosts, and visibility/width bindings that LaunchBox uses to keep the interface functional.