<Window
    x:Class="ModernWpf.SampleApp.WindowWithCustomTitleBar"
    x:Name="Window"
    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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ui="http://schemas.modernwpf.com/2019"
    xmlns:local="clr-namespace:ModernWpf.SampleApp"
    xmlns:sc="clr-namespace:SamplesCommon;assembly=SamplesCommon"
    mc:Ignorable="d"
    Title="Custom Title Bar"
    Width="914"
    Height="686"
    WindowStartupLocation="CenterOwner"
    Background="{DynamicResource SystemControlPageBackgroundChromeMediumLowBrush}"
    ui:WindowHelper.UseModernWindowStyle="True"
    ui:TitleBar.ExtendViewIntoTitleBar="True"
    ui:TitleBar.IsBackButtonVisible="True"
    ui:TitleBar.Style="{DynamicResource AppTitleBarStyle}"
    ui:TitleBar.ButtonStyle="{DynamicResource AppTitleBarButtonStyle}"
    ui:TitleBar.BackButtonStyle="{DynamicResource AppTitleBarBackButtonStyle}"
    ui:ThemeManager.RequestedTheme="Dark">

    <Window.Resources>
        <sc:PixelsToGridLengthConverter x:Key="PixelsToGridLength" />

        <Style x:Key="AppTitleBarStyle" TargetType="ui:TitleBarControl">
            <Setter Property="ui:ThemeManager.RequestedTheme" Value="Dark" />
        </Style>
        <Style x:Key="AppTitleBarButtonStyle" TargetType="ui:TitleBarButton">
            <Setter Property="IsActive" Value="{Binding IsActive, ElementName=Window}" />
        </Style>
        <Style x:Key="AppTitleBarBackButtonStyle" TargetType="ui:TitleBarButton" BasedOn="{StaticResource TitleBarBackButtonStyle}">
            <Setter Property="IsActive" Value="{Binding IsActive, ElementName=Window}" />
        </Style>
    </Window.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <Grid
            x:Name="AppTitleBar"
            Background="{DynamicResource SystemControlBackgroundAccentBrush}"
            Height="{Binding ElementName=Window, Path=(ui:TitleBar.Height)}"
            ui:ThemeManager.RequestedTheme="Dark">

            <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" />
                <ColumnDefinition Width="{Binding ElementName=Window, Path=(ui:TitleBar.SystemOverlayRightInset), Converter={StaticResource PixelsToGridLength}}" />
            </Grid.ColumnDefinitions>

            <ui:TitleBarButton
                x:Name="ForwardButton"
                Grid.Column="1"
                Style="{StaticResource AppTitleBarBackButtonStyle}"
                Content="&#xEA47;"
                ContentTemplate="{x:Null}" />

            <!-- Horizontally centered title -->
            <TextBlock
                Grid.Column="0"
                Grid.ColumnSpan="5"
                FontSize="13"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Text="{Binding ElementName=Window, Path=Title}" />

            <StackPanel
                Grid.Column="3"
                Orientation="Horizontal">
                <ui:TitleBarButton
                    Style="{StaticResource AppTitleBarButtonStyle}"
                    FontFamily="{DynamicResource ContentControlThemeFontFamily}"
                    FontSize="13"
                    Width="NaN"
                    Padding="16,0"
                    Content="User Name" />
                <Rectangle
                    Fill="{Binding ElementName=AppTitleBar, Path=(TextElement.Foreground)}"
                    Width="1"
                    Margin="24,8" />
            </StackPanel>
        </Grid>

    </Grid>
</Window>
