ModernWpfPlayground/App/MainWindow.xaml

<Window
    x:Class="ModernWpfPlayground.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="http://wpflib.de/"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
    xmlns:local="clr-namespace:ModernWpfPlayground"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:prism="http://prismlibrary.com/"
    xmlns:ui="http://schemas.modernwpf.com/2019"
    x:Name="Window"
    Title="{Binding Title}"
    Width="{Binding WindowWidth, Mode=TwoWay}"
    Height="{Binding WindowHeight, Mode=TwoWay}"
    d:DataContext="{d:DesignInstance local:MainWindowViewModel}"
    prism:ViewModelLocator.AutoWireViewModel="True"
    ui:ThemeManager.IsThemeAware="True"
    ui:TitleBar.ExtendViewIntoTitleBar="True"
    ui:WindowHelper.UseModernWindowStyle="True"
    TextOptions.TextFormattingMode="Display"
    UseLayoutRounding="True"
    mc:Ignorable="d">
    <Window.Resources>
        <local:PixelsToGridLengthConverter x:Key="PixelsToGridLength" />
    </Window.Resources>
    <Window.InputBindings>
        <KeyBinding
            Key="O"
            Command="{Binding OpenViewModelCommand}"
            Modifiers="Control" />
        <KeyBinding
            Key="S"
            Command="{Binding SaveViewModelCommand}"
            Modifiers="Control" />
        <KeyBinding
            Key="N"
            Command="{Binding ResetViewModelCommand}"
            Modifiers="Control" />
    </Window.InputBindings>

    <DockPanel>
        <!--  TitleBar  -->
        <Grid
            Height="{Binding ElementName=Window, Path=(ui:TitleBar.Height)}"
            Background="{DynamicResource SystemControlBackgroundChromeMediumBrush}"
            DockPanel.Dock="Top">
            <Grid.Style>
                <Style TargetType="Grid">
                    <Setter Property="TextElement.Foreground" Value="{DynamicResource SystemControlForegroundBaseHighBrush}" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsActive, ElementName=Window}" Value="False">
                            <Setter Property="TextElement.Foreground" Value="{DynamicResource SystemControlDisabledBaseMediumLowBrush}" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Grid.Style>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="{Binding ElementName=Window, Path=(ui:TitleBar.SystemOverlayLeftInset), Converter={StaticResource PixelsToGridLength}}" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Menu
                Grid.Column="1"
                Height="{Binding ElementName=Window, Path=(ui:TitleBar.Height)}"
                Margin="0"
                Padding="0"
                WindowChrome.IsHitTestVisibleInChrome="True">
                <Menu.Resources>
                    <Style BasedOn="{StaticResource {x:Type MenuItem}}" TargetType="MenuItem">
                        <Style.Triggers>
                            <Trigger Property="Role" Value="TopLevelHeader">
                                <Setter Property="Height" Value="{Binding ElementName=Window, Path=(ui:TitleBar.Height)}" />
                            </Trigger>
                            <DataTrigger Binding="{Binding IsActive, ElementName=Window}" Value="False">
                                <Setter Property="TextElement.Foreground" Value="{DynamicResource SystemControlDisabledBaseMediumLowBrush}" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Menu.Resources>
                <MenuItem Header="File">
                    <MenuItem
                        Command="{Binding ResetViewModelCommand}"
                        Header="New"
                        Icon="{iconPacks:FontAwesome Kind=FileRegular}"
                        InputGestureText="Ctrl+N" />
                    <MenuItem
                        Command="{Binding OpenViewModelCommand}"
                        Header="Open"
                        Icon="{iconPacks:FontAwesome Kind=FolderOpenRegular}"
                        InputGestureText="Ctrl+O" />
                    <MenuItem
                        Command="{Binding SaveViewModelCommand}"
                        Header="Save"
                        Icon="{iconPacks:FontAwesome Kind=SaveRegular}"
                        InputGestureText="Ctrl+S" />
                    <Separator />
                    <MenuItem
                        Command="{Binding CloseCommand}"
                        Header="Close"
                        Icon="{iconPacks:FontAwesome Kind=WindowCloseRegular}"
                        InputGestureText="Alt+F4" />
                </MenuItem>
                <MenuItem Header="Edit">
                    <MenuItem Header="Copy" Icon="{iconPacks:FontAwesome Kind=CopyRegular}" />
                    <MenuItem Header="Cut" Icon="{iconPacks:FontAwesome Kind=CutSolid}" />
                    <MenuItem Header="Paste" Icon="{iconPacks:FontAwesome Kind=ClipboardRegular}" />
                </MenuItem>
                <MenuItem Header="Help">
                    <MenuItem Header="?" Icon="{iconPacks:FontAwesome Kind=QuestionCircleRegular}" />
                    <Separator />
                    <MenuItem Header="Info" Icon="{iconPacks:FontAwesome Kind=InfoSolid}" />
                </MenuItem>
            </Menu>
            <!--  Horizontally centered title  -->
            <TextBlock
                Grid.Column="0"
                Grid.ColumnSpan="3"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                FontSize="13"
                Text="{Binding ElementName=Window, Path=Title}" />
        </Grid>
        <!--  Footer  -->
        <Grid
            Height="24"
            Background="{DynamicResource SystemControlBackgroundAccentBrush}"
            DockPanel.Dock="Bottom">
            <Grid.Resources>
                <Style TargetType="TextBlock">
                    <Setter Property="Foreground" Value="White" />
                    <Setter Property="Margin" Value="10,0" />
                    <Setter Property="VerticalAlignment" Value="Center" />
                </Style>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="0" Text="Holger Börchers" />
            <TextBlock Grid.Column="1" Text="|" />
            <TextBlock Grid.Column="2" Text="SQL-SRV\SQLEXPRESS" />
            <TextBlock
                Grid.Column="3"
                HorizontalAlignment="Right"
                Text="BlaBlaBla" />
        </Grid>
        <Grid Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="40" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <!--  Workspace  -->
            <Border
                Grid.Column="0"
                Panel.ZIndex="1"
                Background="#2C2C2C"
                BorderThickness="0">
                <ui:SimpleStackPanel HorizontalAlignment="Center" Spacing="10">
                    <ui:SimpleStackPanel.Resources>
                        <Style TargetType="TextBlock">
                            <Setter Property="LayoutTransform">
                                <Setter.Value>
                                    <RotateTransform Angle="-90" />
                                </Setter.Value>
                            </Setter>
                        </Style>
                        <Style TargetType="ui:ToggleSwitch">
                            <Setter Property="LayoutTransform">
                                <Setter.Value>
                                    <RotateTransform Angle="-90" />
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </ui:SimpleStackPanel.Resources>
                    <ui:ToggleSwitch
                        x:Name="SplitViewSwitch"
                        Margin="0,5,0,0"
                        IsOn="{Binding IsPaneOpen}"
                        ToolTip="Show/hide navigation" />
                    <TextBlock
                        Cursor="Hand"
                        FontSize="20"
                        Foreground="#F4F4F4"
                        Text="Dummy active" />
                    <TextBlock
                        Cursor="Hand"
                        FontSize="20"
                        Foreground="#808080"
                        Text="Dummy inactive" />
                </ui:SimpleStackPanel>
            </Border>
            <!--  Navigation  -->
            <ui:SplitView
                Grid.Column="1"
                BorderThickness="0"
                DisplayMode="Inline"
                IsPaneOpen="{Binding IsOn, ElementName=SplitViewSwitch}"
                OpenPaneLength="200"
                PanePlacement="Left">
                <ui:SplitView.Pane>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <TextBlock Margin="10,10,10,0" Text="NAVIGATION" />
                        <TreeView Grid.Row="1">
                            <TreeViewItem Header="Root" IsExpanded="True">
                                <TreeViewItem Header="Child1" />
                                <TreeViewItem Header="Child2" />
                                <TreeViewItem Header="Child3" />
                            </TreeViewItem>
                        </TreeView>
                    </Grid>
                </ui:SplitView.Pane>
                <!--  Content  -->
                <TabControl>
                    <TabItem Header="Bolt">
                        <ScrollViewer ui:ScrollViewerHelper.AutoHideScrollBars="True">


                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition />
                                    <ColumnDefinition />
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <ui:SimpleStackPanel
                                    Grid.Column="0"
                                    Margin="5"
                                    Orientation="Vertical"
                                    Spacing="5">
                                    <Button
                                        HorizontalAlignment="Stretch"
                                        Command="{Binding OpenViewModelCommand}"
                                        Content="Open" />
                                    <Button
                                        HorizontalAlignment="Stretch"
                                        Command="{Binding SaveViewModelCommand}"
                                        Content="Save" />
                                </ui:SimpleStackPanel>
                            </Grid>
                        </ScrollViewer>
                    </TabItem>
                    <TabItem Header="General" IsSelected="True">
                        <ScrollViewer ui:ScrollViewerHelper.AutoHideScrollBars="True">

                            <ui:SimpleStackPanel Margin="5" Spacing="10">
                                <controls:PropertyPresenter Label="Theme Mode" Value="{Binding ThemeMode}" />
                                <controls:PropertyPresenter Label="Accent color" Value="{Binding AccentColors}" />
                                <controls:PropertyPresenter
                                    Command="{Binding ShowDialogCommand}"
                                    Label="Hello"
                                    Symbol="x³"
                                    Value="{Binding WelcomeMessage}" />
                                <controls:PropertyPresenter
                                    IsReadOnly="True"
                                    Label="Hallo"
                                    Symbol="x²"
                                    Value="{Binding ValidationTest, UpdateSourceTrigger=PropertyChanged}" />
                                <controls:PropertyPresenter
                                    Label="Good bye"
                                    Symbol="x²"
                                    Value="{Binding ValidationTest, UpdateSourceTrigger=PropertyChanged}" />
                                <Grid Margin="0,5">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition />
                                    </Grid.ColumnDefinitions>
                                    <ToggleButton
                                        x:Name="TextBoxSwitch"
                                        Grid.Column="0"
                                        Width="145"
                                        Margin="0,0,5,0">
                                        <ToggleButton.Style>
                                            <Style BasedOn="{StaticResource {x:Type ToggleButton}}" TargetType="ToggleButton">
                                                <Setter Property="Content" Value="Read/Write" />
                                                <Style.Triggers>
                                                    <Trigger Property="IsChecked" Value="True">
                                                        <Setter Property="Content" Value="Read only" />
                                                    </Trigger>
                                                </Style.Triggers>
                                            </Style>
                                        </ToggleButton.Style>
                                    </ToggleButton>
                                    <TextBox
                                        Grid.Column="1"
                                        IsReadOnly="{Binding IsChecked, ElementName=TextBoxSwitch}"
                                        Text="Eine einfache Textbox" />
                                </Grid>
                                <controls:PropertyPresenter Label="Hello" Value="{Binding BooleanValue}" />
                                <controls:PropertyPresenter Label="Hello">
                                    <Slider
                                        AutoToolTipPlacement="TopLeft"
                                        Interval="1"
                                        IsSnapToTickEnabled="True"
                                        Maximum="150"
                                        Minimum="50"
                                        TickFrequency="10"
                                        TickPlacement="BottomRight"
                                        Value="{Binding SliderTest}" />
                                </controls:PropertyPresenter>
                                <ui:ProgressRing
                                    Width="{Binding SliderTest}"
                                    Height="{Binding SliderTest}"
                                    IsActive="{Binding BooleanValue}"
                                    Visibility="{Binding VisibilityEnumTest}" />
                                <controls:PropertyPresenter Label="Visi" Value="{Binding VisibilityEnumTest}" />
                            </ui:SimpleStackPanel>
                        </ScrollViewer>
                    </TabItem>
                </TabControl>
            </ui:SplitView>
        </Grid>
    </DockPanel>
</Window>