Sidebar, Search, and Filter Theming

The LaunchBox sidebar is the main navigation surface for Desktop themes. It is hosted by MainView.xaml, but most of the sidebar's actual layout and behavior lives in SideBarView.xaml.

Theme developers can restyle the sidebar heavily, but the view is also connected to search, filters, platform/category/playlist navigation, right-click menus, and game list population. Because of that, sidebar themes should preserve the core bindings and named controls that LaunchBox uses to keep navigation working.

Where the Sidebar Lives

MainView.xaml hosts the sidebar with a ContentControl named SideBarViewModel. That host controls the sidebar column, splitter, visibility, and width.

<ContentControl x:Name="SideBarViewModel" ... Visibility="{Binding SideBarVisibility}" />

The contents of that host come from SideBarView.xaml. If you want to change the search box, filter button, list type selector, tree styling, counts, icons, indentation, hover states, or selected states, customize SideBarView.xaml.

What SideBarView Controls

SideBarView.xaml includes several separate pieces of sidebar functionality:

• The search box

• The clear search button

• The advanced filters button

• The list type selector

• The navigation tree

• Sidebar icons

• Game counts

• Tree expand and collapse behavior

• Selected and hover visual states

• Right-click context menu behavior

These pieces all share the same view model, SideBarViewModel.

The Navigation Tree

The main tree binds to Nodes. Each node represents a platform, category, playlist, filter value, or nested item depending on the current sidebar list type.

ItemsSource="{Binding Nodes}"

The default tree item template uses a HierarchicalDataTemplate so child nodes can be displayed recursively.

<HierarchicalDataTemplate ItemsSource="{Binding Nodes}">

Common node bindings include:

When styling tree items, keep the IsSelected and IsExpanded bindings intact. LaunchBox uses those bindings to preserve navigation state and to load the correct game list when the selected node changes.

Selection Behavior

The tree uses Caliburn Micro to call OnSelectedItemChanged when the selected tree item changes.

cal:Message.Attach="[Event SelectedItemChanged] = [Action OnSelectedItemChanged($eventArgs)]"

This is one of the most important bindings in the sidebar. It connects the selected sidebar node to the content view. If this event hookup is removed, the tree may still appear visually, but selecting items will no longer update the game list correctly.

The List Type Selector

The sidebar list type selector is the combo box that lets users switch what the sidebar is organized by. It binds to ListTypeItems and SelectedListTypeItem.

ItemsSource="{Binding ListTypeItems}"    SelectedItem="{Binding Path=SelectedListTypeItem, Mode=TwoWay}"

The available list types include standard LaunchBox filters such as Platform, Platform Category, Playlists, Genre, Developer, Publisher, Series, Release Date, Region, Favorite, Installed, and custom fields.

Theme developers can restyle this combo box, but it should remain bound to ListTypeItems and SelectedListTypeItem. Changing the selected item repopulates the sidebar tree and updates which type of filter the user is browsing.

Search

The sidebar search box binds to SearchText. It updates as the user types and LaunchBox uses it to filter the current game list.

Text="{Binding Path=SearchText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"

The placeholder label binds to SearchLabel. The clear button is named SearchClear and its visibility binds to SearchClearVisibility.

x:Name="Search"    Name="SearchClear"    Visibility="{Binding SearchClearVisibility}"

Because LaunchBox locates the search box by name, keep the search text box named Search if your theme still supports sidebar search focus behavior. Keep the clear button named SearchClear if you want LaunchBox's automatic clear action to continue working.

Filters Button

The filters button opens LaunchBox's filter menu. It is named OpenFiltersMenu, uses FilterLabel for its tooltip, and visually reacts to FiltersApplied.

x:Name="OpenFiltersMenu"    ToolTip="{Binding FilterLabel}"    FiltersApplied

Keep the button named OpenFiltersMenu if your theme supports the built-in filter menu. LaunchBox finds this button and uses it as the placement target when opening the filter popup.

Counts and Icons

Sidebar counts and icons are controlled by user settings. A theme should allow those elements to appear and disappear without breaking the layout.

The default sidebar uses PlatformIcon with BackendValue and FilterType to display icons for supported sidebar modes.

<controls:PlatformIcon PlatformName="{Binding BackendValue}" PlatformType="{Binding FilterType}" />

Scrolling and Tree Width

The tree's vertical scrollbar binds to ScrollBarVisibility, which follows the user's LaunchBox scrollbar setting.

ScrollViewer.VerticalScrollBarVisibility="{Binding ScrollBarVisibility}"

The default theme also binds the expander area width to TreeViewToggleButtonWidth. This allows LaunchBox to adjust the tree item layout when needed.

What You Can Safely Customize

Theme developers commonly customize:

• Sidebar background and spacing

• Search box styling

• Clear button styling

• Filter button styling

• List type combo box styling

• Tree item padding and indentation

• Expand and collapse icons

• Selected and hover states

• Count placement and typography

• Platform/category/playlist icon placement

• Scrollbar styling

These visual changes are safe as long as the functional bindings remain intact.

What to Be Careful With

When rebuilding the sidebar layout, preserve these pieces unless you intentionally want to remove that feature:

• ItemsSource="{Binding Nodes}" on the tree

• HierarchicalDataTemplate ItemsSource="{Binding Nodes}" for child nodes

• Selected and Expanded bindings on tree items

• OnSelectedItemChanged event hookup

• Search text box name and SearchText binding

• SearchClear button name

• OpenFiltersMenu button name

• ListTypeItems and SelectedListTypeItem bindings

• Count and icon visibility bindings

• ScrollBarVisibility binding

Removing any of these can make the sidebar look correct while breaking search, filtering, selection, right-click behavior, icon visibility, or user settings.

Related Articles

• LaunchBox Views Reference

• MainView Layout and Composition

In Short

SideBarView.xaml is the main file for theming LaunchBox's sidebar. Use it to restyle search, filtering, list type selection, navigation nodes, icons, counts, and tree states. Keep the core bindings and named controls in place so LaunchBox can continue to populate the tree, open menus, apply search text, preserve expanded nodes, and update the selected game list.