ModernWpfPlayground/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:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:ModernWpfPlayground"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:prism="http://prismlibrary.com/"
    xmlns:propertyPresenter="clr-namespace:ModernWpfPlayground.PropertyPresenter"
    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 />
                <ColumnDefinition Width="Auto" />
            </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"
                        InputGestureText="Ctrl+N" />
                    <MenuItem
                        Command="{Binding OpenViewModelCommand}"
                        Header="Open"
                        InputGestureText="Ctrl+O" />
                    <MenuItem
                        Command="{Binding SaveViewModelCommand}"
                        Header="Save"
                        InputGestureText="Ctrl+S" />
                    <Separator />
                    <MenuItem
                        Command="{Binding CloseCommand}"
                        Header="Close"
                        InputGestureText="Alt+F4" />
                </MenuItem>
                <MenuItem Header="Edit">
                    <MenuItem Header="Copy" />
                    <MenuItem Header="Cut" />
                    <MenuItem Header="Paste" />
                </MenuItem>
                <MenuItem Header="Help">
                    <MenuItem Header="?" />
                    <Separator />
                    <MenuItem Header="Info" />
                </MenuItem>
            </Menu>
            <!--  Horizontally centered title  -->
            <TextBlock
                Grid.Column="0"
                Grid.ColumnSpan="4"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                FontSize="13"
                Text="{Binding ElementName=Window, Path=Title}" />
            <ui:PersonPicture
                Grid.Column="3"
                Height="24"
                Margin="0,0,150,0"
                DisplayName="Holger Börchers"
                ToolTip="Holger Börchers"
                WindowChrome.IsHitTestVisibleInChrome="True" />
        </Grid>
        <!--  Footer  -->
        <Grid
            Height="24"
            Background="#00564C"
            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>
        <!--  Content  -->
        <Grid Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="40" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Border
                Grid.Column="0"
                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 Margin="0,5,0,0" IsOn="{Binding IsPaneOpen}" />
                    <TextBlock
                        Cursor="Hand"
                        FontSize="20"
                        Foreground="#F4F4F4"
                        Text="Dummy active" />
                    <TextBlock
                        Cursor="Hand"
                        FontSize="20"
                        Foreground="#808080"
                        Text="Dummy inactive" />
                </ui:SimpleStackPanel>
            </Border>
            <ui:SplitView
                Grid.Column="1"
                BorderThickness="0"
                DisplayMode="Inline"
                IsPaneOpen="{Binding IsPaneOpen}"
                PanePlacement="Left">
                <ui:SplitView.Pane>
                    <TreeViewItem Header="Root" IsExpanded="True">
                        <TreeViewItem Header="Child1" />
                        <TreeViewItem Header="Child2" />
                        <TreeViewItem Header="Child3" />
                    </TreeViewItem>
                </ui:SplitView.Pane>
                <TabControl>
                    <TabItem Header="Bolt">
                        <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>
                    </TabItem>
                    <TabItem Header="General" IsSelected="True">
                        <ui:SimpleStackPanel Margin="5" Spacing="10">
                            <propertyPresenter:PropertyPresenter Label="Theme Mode" Value="{Binding ThemeMode}" />
                            <propertyPresenter:PropertyPresenter
                                Command="{Binding ShowDialogCommand}"
                                Label="Hello"
                                Symbol="x³"
                                Value="{Binding WelcomeMessage}" />
                            <propertyPresenter:PropertyPresenter
                                IsReadOnly="True"
                                Label="Hallo"
                                Symbol="x²"
                                Value="{Binding ValidationTest, UpdateSourceTrigger=PropertyChanged}" />
                            <propertyPresenter:PropertyPresenter
                                Label="Good bye"
                                Symbol="x²"
                                Value="{Binding ValidationTest, UpdateSourceTrigger=PropertyChanged}" />
                            <propertyPresenter:PropertyPresenter Label="Hello" Value="{Binding BooleanValue}" />
                            <propertyPresenter:PropertyPresenter Label="Hello">
                                <Slider
                                    AutoToolTipPlacement="TopLeft"
                                    Interval="1"
                                    IsSnapToTickEnabled="True"
                                    Maximum="150"
                                    Minimum="50"
                                    TickFrequency="10"
                                    TickPlacement="BottomRight"
                                    Value="{Binding SliderTest}" />
                            </propertyPresenter:PropertyPresenter>
                            <ui:ProgressRing
                                Width="{Binding SliderTest}"
                                Height="{Binding SliderTest}"
                                IsActive="{Binding BooleanValue}"
                                Visibility="{Binding VisibilityEnumTest}" />
                            <propertyPresenter:PropertyPresenter Label="Visi" Value="{Binding VisibilityEnumTest}" />
                        </ui:SimpleStackPanel>
                    </TabItem>
                </TabControl>
            </ui:SplitView>
        </Grid>
    </DockPanel>
</Window>