FluentTerminal/FluentTerminal.App/Views/MainPage.xaml

<Page
    x:Class="FluentTerminal.App.Views.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:converters="using:FluentTerminal.App.Converters"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:views="using:FluentTerminal.App.Views"
    RequestedTheme="{x:Bind ViewModel.SelectedTerminal.TerminalTheme.Colors.Background, Mode=OneWay, Converter={StaticResource BackgroundToApplicationThemeConverter}}"
    mc:Ignorable="d">
    <Page.Resources>
        <converters:TerminalViewModelToViewConverter x:Key="TerminalViewModelToViewConverter" />
    </Page.Resources>
    <Grid x:Name="Root">
        <Grid.Background>
            <AcrylicBrush
                BackgroundSource="HostBackdrop"
                FallbackColor="{x:Bind ViewModel.SelectedTerminal.TerminalTheme.Colors.Background, Mode=OneWay}"
                TintColor="{x:Bind ViewModel.SelectedTerminal.TerminalTheme.Colors.Background, Mode=OneWay}"
                TintOpacity="{x:Bind ViewModel.BackgroundOpacity, Mode=OneWay}"
                TintTransitionDuration="{x:Bind NoDuration}" />

        </Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Rectangle x:Name="TitleBar" Fill="Transparent" />
        <Grid
            x:Name="TitleBarContents"
            Height="{Binding CoreTitleBarHeight, Mode=OneWay}"
            Margin="{Binding CoreTitleBarPadding, Mode=OneWay}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Button
                x:Name="Hamburger"
                Height="32"
                Style="{StaticResource TitleBarButtonStyle}">
                <Button.Content>
                    <Viewbox Width="16" Height="16">
                        <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE700;" />
                    </Viewbox>
                </Button.Content>
                <Button.Flyout>
                    <MenuFlyout>
                        <MenuFlyoutItem
                            x:Uid="NewTab"
                            Command="{x:Bind ViewModel.AddLocalShellCommand}"
                            Text="New local shell">
                            <MenuFlyoutItem.Icon>
                                <SymbolIcon Symbol="Add" />
                            </MenuFlyoutItem.Icon>
                        </MenuFlyoutItem>
                        <MenuFlyoutItem
                            Command="{x:Bind ViewModel.AddSshShellCommand}"
                            x:Uid="NewSshTab">
                            <MenuFlyoutItem.Icon>
                                <SymbolIcon Symbol="Add" />
                            </MenuFlyoutItem.Icon>
                        </MenuFlyoutItem>
                        <MenuFlyoutItem
                            Command="{x:Bind ViewModel.AddQuickShellCommand}"
                            x:Uid="NewQuickTab">
                            <MenuFlyoutItem.Icon>
                                <SymbolIcon Symbol="Add" />
                            </MenuFlyoutItem.Icon>
                        </MenuFlyoutItem>
                        <MenuFlyoutItem x:Uid="Settings" Command="{x:Bind ViewModel.ShowSettingsCommand}">
                            <MenuFlyoutItem.Icon>
                                <SymbolIcon Symbol="Setting" />
                            </MenuFlyoutItem.Icon>
                        </MenuFlyoutItem>
                        <MenuFlyoutItem
                            Command="{x:Bind ViewModel.ShowAboutCommand}"
                            x:Uid="About">
                            <MenuFlyoutItem.Icon>
                                <FontIcon
                                    FontFamily="Segoe MDL2 Assets"
                                    Glyph="&#xE946;"
                                    ToolTipService.ToolTip="About" />
                            </MenuFlyoutItem.Icon>
                        </MenuFlyoutItem>
                    </MenuFlyout>
                </Button.Flyout>
            </Button>
            <RelativePanel
                Grid.Column="1"
                Height="32"
                HorizontalAlignment="Left"
                VerticalAlignment="Stretch"
                Background="{x:Bind ViewModel.SelectedTerminal.TabTheme, Mode=OneWay, Converter={StaticResource TabColorFallbackConverter}, ConverterParameter=Background}">
                <RelativePanel.ContextFlyout>
                    <MenuFlyout>
                        <MenuFlyoutSubItem x:Uid="Color">
                            <ToggleMenuFlyoutItem
                                Command="{x:Bind ViewModel.SelectedTerminal.SelectTabThemeCommand}"
                                CommandParameter="0"
                                IsChecked="{x:Bind ViewModel.SelectedTerminal.TabTheme, Mode=OneWay, Converter={StaticResource TabThemeSelectedConverter}, ConverterParameter=None}"
                                Text="{x:Bind Converter={StaticResource I18NConverter}, ConverterParameter=TabTheme.None}">
                                <ToggleMenuFlyoutItem.Icon>
                                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xF126;" />
                                </ToggleMenuFlyoutItem.Icon>
                            </ToggleMenuFlyoutItem>
                            <ToggleMenuFlyoutItem
                                Command="{x:Bind ViewModel.SelectedTerminal.SelectTabThemeCommand}"
                                CommandParameter="1"
                                IsChecked="{x:Bind ViewModel.SelectedTerminal.TabTheme, Mode=OneWay, Converter={StaticResource TabThemeSelectedConverter}, ConverterParameter=Red}"
                                Text="{x:Bind Converter={StaticResource I18NConverter}, ConverterParameter=TabTheme.Red}">
                                <ToggleMenuFlyoutItem.Icon>
                                    <FontIcon
                                        FontFamily="Segoe MDL2 Assets"
                                        Foreground="#E81123"
                                        Glyph="&#xF127;" />
                                </ToggleMenuFlyoutItem.Icon>
                            </ToggleMenuFlyoutItem>
                            <ToggleMenuFlyoutItem
                                Command="{x:Bind ViewModel.SelectedTerminal.SelectTabThemeCommand}"
                                CommandParameter="2"
                                IsChecked="{x:Bind ViewModel.SelectedTerminal.TabTheme, Mode=OneWay, Converter={StaticResource TabThemeSelectedConverter}, ConverterParameter=Green}"
                                Text="{x:Bind Converter={StaticResource I18NConverter}, ConverterParameter=TabTheme.Green}">
                                <ToggleMenuFlyoutItem.Icon>
                                    <FontIcon
                                        FontFamily="Segoe MDL2 Assets"
                                        Foreground="#10893E"
                                        Glyph="&#xF127;" />
                                </ToggleMenuFlyoutItem.Icon>
                            </ToggleMenuFlyoutItem>
                            <ToggleMenuFlyoutItem
                                Command="{x:Bind ViewModel.SelectedTerminal.SelectTabThemeCommand}"
                                CommandParameter="3"
                                IsChecked="{x:Bind ViewModel.SelectedTerminal.TabTheme, Mode=OneWay, Converter={StaticResource TabThemeSelectedConverter}, ConverterParameter=Blue}"
                                Text="{x:Bind Converter={StaticResource I18NConverter}, ConverterParameter=TabTheme.Blue}">
                                <ToggleMenuFlyoutItem.Icon>
                                    <FontIcon
                                        FontFamily="Segoe MDL2 Assets"
                                        Foreground="#0078D7"
                                        Glyph="&#xF127;" />
                                </ToggleMenuFlyoutItem.Icon>
                            </ToggleMenuFlyoutItem>
                            <ToggleMenuFlyoutItem
                                Command="{x:Bind ViewModel.SelectedTerminal.SelectTabThemeCommand}"
                                CommandParameter="4"
                                IsChecked="{x:Bind ViewModel.SelectedTerminal.TabTheme, Mode=OneWay, Converter={StaticResource TabThemeSelectedConverter}, ConverterParameter=Purple}"
                                Text="{x:Bind Converter={StaticResource I18NConverter}, ConverterParameter=TabTheme.Purple}">
                                <ToggleMenuFlyoutItem.Icon>
                                    <FontIcon
                                        FontFamily="Segoe MDL2 Assets"
                                        Foreground="#881798"
                                        Glyph="&#xF127;" />
                                </ToggleMenuFlyoutItem.Icon>
                            </ToggleMenuFlyoutItem>
                            <ToggleMenuFlyoutItem
                                Command="{x:Bind ViewModel.SelectedTerminal.SelectTabThemeCommand}"
                                CommandParameter="5"
                                IsChecked="{x:Bind ViewModel.SelectedTerminal.TabTheme, Mode=OneWay, Converter={StaticResource TabThemeSelectedConverter}, ConverterParameter=Orange}"
                                Text="{x:Bind Converter={StaticResource I18NConverter}, ConverterParameter=TabTheme.Orange}">
                                <ToggleMenuFlyoutItem.Icon>
                                    <FontIcon
                                        FontFamily="Segoe MDL2 Assets"
                                        Foreground="#FF8C00"
                                        Glyph="&#xF127;" />
                                </ToggleMenuFlyoutItem.Icon>
                            </ToggleMenuFlyoutItem>
                            <ToggleMenuFlyoutItem
                                Command="{x:Bind ViewModel.SelectedTerminal.SelectTabThemeCommand}"
                                CommandParameter="6"
                                IsChecked="{x:Bind ViewModel.SelectedTerminal.TabTheme, Mode=OneWay, Converter={StaticResource TabThemeSelectedConverter}, ConverterParameter=Teal}"
                                Text="{x:Bind Converter={StaticResource I18NConverter}, ConverterParameter=TabTheme.Teal}">
                                <ToggleMenuFlyoutItem.Icon>
                                    <FontIcon
                                        FontFamily="Segoe MDL2 Assets"
                                        Foreground="#00B7C3"
                                        Glyph="&#xF127;" />
                                </ToggleMenuFlyoutItem.Icon>
                            </ToggleMenuFlyoutItem>
                        </MenuFlyoutSubItem>
                        <MenuFlyoutItem x:Uid="EditTitle" Command="{x:Bind ViewModel.SelectedTerminal.EditTitleCommand}" />
                    </MenuFlyout>
                </RelativePanel.ContextFlyout>
                <TextBlock
                    Margin="12,8,12,0"
                    Style="{StaticResource CaptionTextBlockStyle}"
                    Text="{x:Bind ViewModel.WindowTitle, Mode=OneWay}"
                    TextTrimming="CharacterEllipsis"
                    TextWrapping="NoWrap"
                    Visibility="{x:Bind ViewModel.ShowTabsOnTop, Mode=OneWay, Converter={StaticResource FalseToVisibleConverter}}" />
            </RelativePanel>
            <Rectangle x:Name="TabDropArea" Fill="LightGray" Opacity="0.2" Grid.Column="1" HorizontalAlignment="Stretch"
                       AllowDrop="True"
                       DragEnter="TabDropArea_DragEnter"
                       Drop="TabDropArea_Drop"
                       Visibility="{x:Bind DraggingHappensFromAnotherWindow, Mode=TwoWay, Converter={StaticResource TrueToVisibleConverter}}"/>
            <views:TabBar
                x:Name="TopTabBar"
                Grid.Column="1"
                HorizontalAlignment="Left"
                AddCommand="{x:Bind ViewModel.AddLocalShellCommand}"
                ItemsSource="{x:Bind ViewModel.Terminals, Mode=OneWay}"
                SelectedItem="{x:Bind ViewModel.SelectedTerminal, Mode=TwoWay}"
                Visibility="{x:Bind ViewModel.ShowTabsOnTop, Mode=OneWay}"
                TabDraggedOutside="TabBar_TabDraggedOutside"
                TabWindowChanged="TabView_Drop"
                TabDraggingCompleted="TabBar_TabDraggingCompleted"
                TabDraggingChanged="TabBar_TabDraggingChanged" />
        </Grid>
        <ContentControl
            x:Name="TerminalContainer"
            Grid.Row="1"
            HorizontalContentAlignment="Stretch"
            VerticalContentAlignment="Stretch"
            Content="{x:Bind ViewModel.SelectedTerminal, Mode=OneWay, Converter={StaticResource TerminalViewModelToViewConverter}}" />
        <Rectangle Fill="LightGray" Opacity="0.01" Grid.Row="1"
                       Visibility="{x:Bind DraggingHappens, Mode=TwoWay, Converter={StaticResource TrueToVisibleConverter}}"/>
        <Rectangle Fill="LightGray" Opacity="0.2" Grid.Row="2" HorizontalAlignment="Stretch"
                       AllowDrop="True"
                       DragEnter="TabDropArea_DragEnter"
                       Drop="TabDropArea_Drop"
                       Visibility="{x:Bind DraggingHappensFromAnotherWindow, Mode=TwoWay, Converter={StaticResource TrueToVisibleConverter}}"/>
        <views:TabBar
            x:Name="BottomTabBar"
            Grid.Row="2"
            HorizontalAlignment="Left"
            AddCommand="{x:Bind ViewModel.AddLocalShellCommand}"
            ItemsSource="{x:Bind ViewModel.Terminals, Mode=OneWay}"
            SelectedItem="{x:Bind ViewModel.SelectedTerminal, Mode=TwoWay}"
            Visibility="{x:Bind ViewModel.ShowTabsOnBottom, Mode=OneWay}"
            TabDraggedOutside="TabBar_TabDraggedOutside"
            TabWindowChanged="TabView_Drop"
            TabDraggingCompleted="TabBar_TabDraggingCompleted"
            TabDraggingChanged="TabBar_TabDraggingChanged" />
    </Grid>
</Page>