JetPack for WPF

The JetPack theme from Microsoft's Silverlight 4 Application Themes, rebuilt as a complete controls library for WPF on .NET 8 and later. It follows the same model as MahApps.Metro: one resource dictionary gives every standard control the JetPack look, and the library adds its own controls (window, ToggleSwitch, NumericUpDown, Flyout, HamburgerMenu and more), including a searchable, filterable data grid and a type-ahead combo box (see Highlights).

Documentation: montago.github.io/JetPackTheme covers every control, the theme and accents, typography and all resource keys (source in docs/).

Highlights

JetPackGrid: a free data grid for large lists

JetPackGrid brings the features that usually send WPF developers to a commercial grid such as Telerik's RadGridView, in a free, MIT-licensed DataGrid:

• Search across all columns. Every word must match somewhere in the row, every hit is marked in the cells, and quotes keep a phrase together: volvo "dark blue" automatic.
• Filter in every column header. Tick values from a list with row counts, or type them, with * as a wildcard.
• Grouping with headers that fold up, three-state sorting and paging.
• Virtualized rows and columns, also while grouping, so thousands of rows in tens of columns stay fast.

It derives from DataGrid, so columns, bindings, selection and templates work as usual:

<jp:JetPackGrid ItemsSource="{Binding Cars}" SearchText="{Binding Text, ElementName=Search}"
                GroupMemberPath="Make" PageSize="100">
    <jp:JetPackGrid.Columns>
        <jp:JetPackGridColumn Header="Make" Binding="{Binding Make}" />
        <jp:JetPackGridColumn Header="Body" Binding="{Binding Body}" FilterText="estate suv" />
    </jp:JetPackGrid.Columns>
</jp:JetPackGrid>

It is built for searching, filtering and browsing large lists. It does not try to match everything a commercial suite offers, such as hierarchical child grids or built-in export. JetPackGrid documentation

SearchComboBox: a light alternative to RadComboBox

SearchComboBox is a combo box you can type in, for long lists such as customers or products. It covers what RadComboBox is most often used for, filtering and autocomplete, without a commercial licence:

• Typing filters the drop-down (Contains or StartsWith, ignoring case) and completes the first match.
• Virtualized drop-down, so thousands of items stay fast.
• The usual bindings: ItemsSource, SelectedItem, SelectedValue with SelectedValuePath, DisplayMemberPath and ItemTemplate.
• Full keyboard use: arrow keys, PageUp/PageDown, Enter, Tab and Escape.

<jp:SearchComboBox ItemsSource="{Binding Companies}" DisplayMemberPath="Name"
                   SelectedValuePath="Id" SelectedValue="{Binding CompanyId}" />

SearchComboBox documentation

Mica backdrop on Windows 11

EnableMica="True" lets the Windows 11 Mica material show through the JetPack ground. The window picks up a soft tint from the desktop wallpaper, like the apps that come with Windows, and keeps its grey texture, vignette and title bar. GroundOpacity sets the balance: about 0.75 keeps the classic JetPack look, and the default of 0.5 shows more Mica.

<jp:JetPackWindow ... EnableMica="True" GroundOpacity="0.75">

It costs next to nothing. The compositor draws Mica from a sampled wallpaper, and the window does not use AllowsTransparency. On Windows 10 and early Windows 11 the window stays opaque. Mica documentation

_{Telerik, RadGridView and RadComboBox are trademarks of Progress Software Corporation. JetPack for WPF is not affiliated with or endorsed by Progress.}

Getting started

Install the JetPack.Wpf package:

dotnet add package JetPack.Wpf

The package is published to GitHub Packages first; see Getting started for adding that feed.

Then merge the dictionary in App.xaml:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/JetPack.Wpf;component/Styles/JetPack.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

Derive your window from JetPackWindow:

<jp:JetPackWindow x:Class="MyApp.MainWindow"
                  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                  xmlns:jp="urn:jetpack-wpf"
                  Title="My app" TitleBarMode="Dark">
    ...
</jp:JetPackWindow>

public partial class MainWindow : JetPack.Wpf.Controls.JetPackWindow { ... }

JetPackWindow options:

Property	Values
TitleBarMode	Dark (default), Light, Texture
CornerStyle	Square (default, as in the original theme) or Rounded. Rounded corners are drawn by the Windows 11 compositor; on Windows 10 the corners stay square.
ShowVignette, ShowIcon, ShowMinButton, ShowMaxRestoreButton	bool
LeftWindowCommands, RightWindowCommands, Flyouts	any content
EnableMica, GroundOpacity	Windows 11 Mica backdrop behind the window; GroundOpacity (0-1, default 0.5, about 0.75 keeps the JetPack look) sets how much of the ground covers it
ResizeMode	CanResizeWithGrip adds a dotted grip in the bottom-right corner and resizes only by it; CanResize resizes by the edges

The window has no status bar of its own: dock a StatusBar at the bottom of the content, as below.

Two common layouts for the window content:

<DockPanel>
    <!-- footer -->
    <StatusBar DockPanel.Dock="Bottom">
        <StatusBarItem Content="Ready" />
        <StatusBarItem HorizontalAlignment="Right" Content="Last synced 09:42" />
    </StatusBar>
    <!-- full-width grey navigation bar right under the title bar; Tag goes to its right end -->
    <TabControl Style="{StaticResource JetPack.Styles.TabControl.Navigation}">
        <TabControl.Tag>
            <TextBlock Margin="0,0,16,0" FontSize="15" FontWeight="Bold" Text="My app" />
        </TabControl.Tag>
        <TabItem Header="Companies">...</TabItem>
        <TabItem Header="Orders">...</TabItem>
    </TabControl>
</DockPanel>

For the dark tab strip of the original theme browser, use JetPack.Styles.TabControl.Strip instead (the demo can switch between the two under Settings → Page navigation). The notch slides to the selected tab; jp:TabControlHelper.SelectionAnimation and jp:TabControlHelper.ContentTransition="Fade" change that and add a cross-fade between pages.

Theme and accent

using JetPack.Wpf.Theming;

ThemeManager.ChangeAccent(JetPackAccent.Orange);            // Green (default), Orange, Blue
ThemeManager.ChangeAccent(Color.FromRgb(0x8E, 0x44, 0xAD)); // generate a full accent from one colour
ThemeManager.ShowFocusVisuals = false;                      // the original's invisible focus
ThemeManager.ControlFontSize = 11;                          // the original's control font size (default: 12)

Resource keys follow the MahApps scheme with a JetPack. prefix: JetPack.Brushes.Accent, JetPack.Brushes.Accent.Selection, JetPack.Brushes.Control.Background, JetPack.Styles.Button.Accent and so on. The Palette tab in the demo lists them all.

What's included

Group	Controls
Standard WPF (implicit styles)	Button, RepeatButton, ToggleButton, Hyperlink, TextBox, PasswordBox, RichTextBox, Label, CheckBox, RadioButton, ComboBox, ListBox, ListView/GridView, TreeView, ScrollBar, ScrollViewer, ProgressBar, Slider, ToolTip, GroupBox, Expander, TabControl, Calendar, DatePicker, DataGrid, GridSplitter, Separator, Menu, ContextMenu, ToolBar, StatusBar, ResizeGrip, validation errors
Named variants	Button.Accent/Green/Orange/Blue/Square/Flat/Link, TextBox.Dark, TextBox.MultiLine(.Dark), PasswordBox.Dark, TabControl.Navigation (the full-width light link bar with the notch), TabControl.Strip (the dark tab strip), Expander.Accordion, TextBlock.Heading1–6
Own controls (jp:)	JetPackWindow, JetPackDialog, ToggleSwitch, NumericUpDown, SplitButton, DropDownButton, ProgressRing, Badged, Tile, Flyout, HamburgerMenu, InfoBar, RangeSlider, Rating, TimePicker, ColorPicker, AutoSuggestBox, SearchComboBox, JetPackGrid, BusyIndicator, Accordion, Vignette, DitheredFill
Helpers	TextBoxHelper.Watermark, TextBoxHelper.ClearTextButton, TabControlHelper.SelectionAnimation, TabControlHelper.ContentTransition, ControlHelper.CornerRadius and others

Demo

dotnet run --project src/JetPack.Wpf.Demo

Two sample applications show the controls together in real screen layouts (see Sample apps):

dotnet run --project samples/JetPack.Wpf.Samples.Admin
dotnet run --project samples/JetPack.Wpf.Samples.Portal

The demo's --snapshot <folder> renders every page to PNG and exits, plus one picture per control in <folder>/controls (from Views/GalleryPage.xaml). The images in docs/screenshots were made that way.

Layout

src/JetPack.Wpf/
  Assets/            window texture, drawn by tools/generate_backgrounds.py
  Styles/            Brushes, Fonts, Effects, Accents/*, Controls.*.xaml, JetPack.xaml
  Themes/Generic.xaml
  Controls/          own controls
  Helpers/           attached properties and converters
  Theming/           ThemeManager and AccentGenerator
src/JetPack.Wpf.Demo/
samples/             Admin (HamburgerMenu) and Portal (navigation bar) sample apps
docs/                documentation and screenshots
tools/               generate_resource_keys.py (rebuilds docs/resource-keys.md)
design/              the HTML draft the look was approved from

License

MIT License (see LICENSE). The look follows the JetPack theme in Microsoft's Silverlight 4 Application Themes: colours and shadow values come from it, while all WPF styles and both background images (drawn by tools/generate_backgrounds.py) are made from scratch. See NOTICE.md for details.

Known limitations

• TabControl only supports tabs at the top.
• The DatePicker watermark ("Select a date") comes from WPF's own resources and does not follow the app language.
• There is no built-in chart; the theme provides the JetPack.Brushes.Chart.1–6 palette for a charting library.