Wino-Mail/Wino.Mail.WinUI/Controls/EditorTabbedCommandBarControl.xaml

<UserControl
    x:Class="Wino.Mail.Controls.EditorTabbedCommandBarControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:Wino.Mail.WinUI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mail="using:Wino.Mail.Controls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:toolkit="using:CommunityToolkit.WinUI.Controls"
    x:Name="Root"
    mc:Ignorable="d">

    <UserControl.Resources>
        <Style
            x:Key="CompactComboBoxStyle"
            BasedOn="{StaticResource DefaultComboBoxStyle}"
            TargetType="ComboBox">
            <Setter Property="MinWidth" Value="72" />
            <Setter Property="MaxWidth" Value="132" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Padding" Value="4,0,0,0" />
        </Style>

        <Style x:Key="CompactPickerContainerStyle" TargetType="AppBarElementContainer">
            <Setter Property="MinWidth" Value="0" />
            <Setter Property="Margin" Value="0,8,0,0" />
        </Style>

        <Style x:Key="CompactPickerBorderStyle" TargetType="Border">
            <!--<Setter Property="Background" Value="{ThemeResource ControlFillColorSecondaryBrush}" />-->
            <Setter Property="BorderBrush" Value="{ThemeResource ControlStrokeColorDefaultBrush}" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="CornerRadius" Value="{StaticResource ControlCornerRadius}" />
            <Setter Property="Padding" Value="0" />
            <Setter Property="MinHeight" Value="36" />
            <Setter Property="Margin" Value="4,0" />
        </Style>

        <DataTemplate x:Key="ColorOptionTemplate" x:DataType="mail:EditorColorOption">
            <StackPanel Orientation="Horizontal" Spacing="8">
                <Grid Width="14" Height="14">
                    <Rectangle
                        Fill="{x:Bind Brush}"
                        RadiusX="3"
                        RadiusY="3"
                        Stroke="{ThemeResource TextFillColorSecondaryBrush}"
                        StrokeThickness="1" />
                </Grid>
                <TextBlock VerticalAlignment="Center" Text="{x:Bind Name}" />
            </StackPanel>
        </DataTemplate>

        <DataTemplate x:Key="ParagraphStyleOptionTemplate" x:DataType="mail:EditorParagraphStyleOption">
            <TextBlock Text="{x:Bind Name}" />
        </DataTemplate>

    </UserControl.Resources>

    <toolkit:TabbedCommandBar>
        <toolkit:TabbedCommandBar.Resources>
            <SolidColorBrush x:Key="TabContentContentBorderBackground" Color="Transparent" />
            <SolidColorBrush x:Key="TabContentContentBorderBorderBrush" Color="Transparent" />
            <Thickness x:Key="TabContentBorderBorderThickness">0</Thickness>
            <Style BasedOn="{StaticResource DefaultAppBarToggleButtonStyle}" TargetType="AppBarToggleButton">
                <Setter Property="Width" Value="50" />
            </Style>
            <Style BasedOn="{StaticResource DefaultAppBarButtonStyle}" TargetType="AppBarButton">
                <Setter Property="Width" Value="50" />
            </Style>
        </toolkit:TabbedCommandBar.Resources>

        <toolkit:TabbedCommandBar.PaneCustomContent>
            <ContentPresenter Content="{x:Bind PaneCustomContent, Mode=OneWay}" />
        </toolkit:TabbedCommandBar.PaneCustomContent>

        <toolkit:TabbedCommandBar.MenuItems>
            <toolkit:TabbedCommandBarItem DefaultLabelPosition="Collapsed" Header="Format">
                <AppBarToggleButton
                    x:Name="BoldButton"
                    Click="BoldButton_Click"
                    Label="Bold"
                    ToolTipService.ToolTip="Bold (Ctrl+B)">
                    <AppBarToggleButton.Icon>
                        <PathIcon Data="{StaticResource BoldPathIcon}" />
                    </AppBarToggleButton.Icon>
                </AppBarToggleButton>

                <AppBarToggleButton
                    x:Name="ItalicButton"
                    Click="ItalicButton_Click"
                    Label="Italic"
                    ToolTipService.ToolTip="Italic (Ctrl+I)">
                    <AppBarToggleButton.Icon>
                        <PathIcon Data="{StaticResource ItalicPathIcon}" />
                    </AppBarToggleButton.Icon>
                </AppBarToggleButton>

                <AppBarToggleButton
                    x:Name="UnderlineButton"
                    Click="UnderlineButton_Click"
                    Label="Underline"
                    ToolTipService.ToolTip="Underline (Ctrl+U)">
                    <AppBarToggleButton.Icon>
                        <PathIcon Data="{StaticResource UnderlinePathIcon}" />
                    </AppBarToggleButton.Icon>
                </AppBarToggleButton>

                <AppBarToggleButton
                    x:Name="StrikeButton"
                    Click="StrikeButton_Click"
                    Label="Strikethrough"
                    ToolTipService.ToolTip="Strikethrough">
                    <AppBarToggleButton.Icon>
                        <PathIcon Data="{StaticResource StrikePathIcon}" />
                    </AppBarToggleButton.Icon>
                </AppBarToggleButton>

                <AppBarSeparator />

                <AppBarToggleButton
                    x:Name="BulletListButton"
                    Click="BulletListButton_Click"
                    Label="Bullets"
                    ToolTipService.ToolTip="Bulleted list">
                    <AppBarToggleButton.Icon>
                        <PathIcon Data="{StaticResource BulletedListPathIcon}" />
                    </AppBarToggleButton.Icon>
                </AppBarToggleButton>

                <AppBarToggleButton
                    x:Name="OrderedListButton"
                    Click="OrderedListButton_Click"
                    Label="Numbered list"
                    ToolTipService.ToolTip="Numbered list">
                    <AppBarToggleButton.Icon>
                        <PathIcon Data="{StaticResource OrderedListPathIcon}" />
                    </AppBarToggleButton.Icon>
                </AppBarToggleButton>

                <AppBarButton
                    x:Name="OutdentButton"
                    Click="OutdentButton_Click"
                    Label="Outdent"
                    ToolTipService.ToolTip="Outdent">
                    <AppBarButton.Icon>
                        <PathIcon Data="{StaticResource DecreaseIndentPathIcon}" />
                    </AppBarButton.Icon>
                </AppBarButton>

                <AppBarButton
                    x:Name="IndentButton"
                    Click="IndentButton_Click"
                    Label="Indent"
                    ToolTipService.ToolTip="Indent">
                    <AppBarButton.Icon>
                        <PathIcon Data="{StaticResource IncreaseIndentPathIcon}" />
                    </AppBarButton.Icon>
                </AppBarButton>

                <AppBarElementContainer Style="{StaticResource CompactPickerContainerStyle}" ToolTipService.ToolTip="Text alignment">
                    <Border Style="{StaticResource CompactPickerBorderStyle}">
                        <Grid ColumnSpacing="8">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="32" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <PathIcon
                                Width="14"
                                Height="14"
                                Margin="10,0,0,0"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Data="{StaticResource AlignLeftPathIcon}"
                                Foreground="{ThemeResource TextFillColorPrimaryBrush}" />
                            <ComboBox
                                x:Name="AlignmentComboBox"
                                Grid.Column="1"
                                MinWidth="94"
                                SelectionChanged="AlignmentComboBox_SelectionChanged"
                                Style="{StaticResource CompactComboBoxStyle}" />
                        </Grid>
                    </Border>
                </AppBarElementContainer>

                <AppBarElementContainer Style="{StaticResource CompactPickerContainerStyle}" ToolTipService.ToolTip="Font family">
                    <Border Style="{StaticResource CompactPickerBorderStyle}">
                        <Grid ColumnSpacing="8">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="32" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <FontIcon
                                Margin="10,0,0,0"
                                VerticalAlignment="Center"
                                FontSize="14"
                                Glyph="&#xE8D2;" />
                            <ComboBox
                                x:Name="FontFamilyComboBox"
                                Grid.Column="1"
                                MinWidth="110"
                                PlaceholderText="Font"
                                SelectionChanged="FontFamilyComboBox_SelectionChanged"
                                Style="{StaticResource CompactComboBoxStyle}" />
                            <ComboBox
                                x:Name="FontSizeComboBox"
                                Grid.Column="2"
                                MinWidth="72"
                                HorizontalContentAlignment="Center"
                                PlaceholderText="Size"
                                SelectionChanged="FontSizeComboBox_SelectionChanged"
                                Style="{StaticResource CompactComboBoxStyle}" />
                        </Grid>
                    </Border>
                </AppBarElementContainer>

                <AppBarElementContainer Style="{StaticResource CompactPickerContainerStyle}" ToolTipService.ToolTip="Paragraph style">
                    <Border Style="{StaticResource CompactPickerBorderStyle}">
                        <Grid ColumnSpacing="8">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="32" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <PathIcon
                                Width="14"
                                Height="14"
                                Margin="10,0,0,0"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Data="{StaticResource ParagraphPathIcon}"
                                Foreground="{ThemeResource TextFillColorPrimaryBrush}" />
                            <ComboBox
                                x:Name="ParagraphStyleComboBox"
                                Grid.Column="1"
                                MinWidth="104"
                                ItemTemplate="{StaticResource ParagraphStyleOptionTemplate}"
                                PlaceholderText="Paragraph"
                                SelectionChanged="ParagraphStyleComboBox_SelectionChanged"
                                Style="{StaticResource CompactComboBoxStyle}" />
                        </Grid>
                    </Border>
                </AppBarElementContainer>

                <AppBarElementContainer Style="{StaticResource CompactPickerContainerStyle}" ToolTipService.ToolTip="Text color">
                    <Border Style="{StaticResource CompactPickerBorderStyle}">
                        <Grid ColumnSpacing="8">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="32" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Grid
                                Width="18"
                                Height="18"
                                Margin="8,0,0,0"
                                VerticalAlignment="Center">
                                <Rectangle
                                    Fill="{x:Bind SelectedTextColorBrush, Mode=OneWay}"
                                    RadiusX="4"
                                    RadiusY="4"
                                    Stroke="{ThemeResource TextFillColorSecondaryBrush}"
                                    StrokeThickness="1" />
                                <TextBlock
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    FontSize="11"
                                    FontWeight="SemiBold"
                                    Text="A" />
                            </Grid>
                            <ComboBox
                                x:Name="TextColorComboBox"
                                Grid.Column="1"
                                MinWidth="104"
                                ItemTemplate="{StaticResource ColorOptionTemplate}"
                                PlaceholderText="Text"
                                SelectionChanged="TextColorComboBox_SelectionChanged"
                                Style="{StaticResource CompactComboBoxStyle}" />
                        </Grid>
                    </Border>
                </AppBarElementContainer>

                <AppBarElementContainer Style="{StaticResource CompactPickerContainerStyle}" ToolTipService.ToolTip="Highlight color">
                    <Border Style="{StaticResource CompactPickerBorderStyle}">
                        <Grid ColumnSpacing="8">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="32" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Grid
                                Width="18"
                                Height="18"
                                Margin="8,0,0,0"
                                VerticalAlignment="Center">
                                <Rectangle
                                    Fill="{x:Bind SelectedHighlightColorBrush, Mode=OneWay}"
                                    RadiusX="4"
                                    RadiusY="4"
                                    Stroke="{ThemeResource TextFillColorSecondaryBrush}"
                                    StrokeThickness="1" />
                                <Rectangle
                                    Width="10"
                                    Height="2"
                                    Margin="0,0,0,3"
                                    VerticalAlignment="Bottom"
                                    Fill="{ThemeResource TextFillColorPrimaryBrush}" />
                            </Grid>
                            <ComboBox
                                x:Name="HighlightColorComboBox"
                                Grid.Column="1"
                                MinWidth="108"
                                ItemTemplate="{StaticResource ColorOptionTemplate}"
                                PlaceholderText="Highlight"
                                SelectionChanged="HighlightColorComboBox_SelectionChanged"
                                Style="{StaticResource CompactComboBoxStyle}" />
                        </Grid>
                    </Border>
                </AppBarElementContainer>

                <AppBarElementContainer Style="{StaticResource CompactPickerContainerStyle}" ToolTipService.ToolTip="Line height">
                    <Border Style="{StaticResource CompactPickerBorderStyle}">
                        <Grid ColumnSpacing="8">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="32" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <FontIcon
                                Margin="9,0,0,0"
                                VerticalAlignment="Center"
                                FontSize="14"
                                Glyph="&#xE8C8;" />
                            <ComboBox
                                x:Name="LineHeightComboBox"
                                Grid.Column="1"
                                MinWidth="72"
                                PlaceholderText="Line"
                                SelectionChanged="LineHeightComboBox_SelectionChanged"
                                Style="{StaticResource CompactComboBoxStyle}" />
                        </Grid>
                    </Border>
                </AppBarElementContainer>
            </toolkit:TabbedCommandBarItem>

            <toolkit:TabbedCommandBarItem DefaultLabelPosition="Collapsed" Header="Insert">
                <AppBarButton
                    x:Name="ImageButton"
                    Click="ImageButton_Click"
                    Label="Image"
                    ToolTipService.ToolTip="Insert image">
                    <AppBarButton.Icon>
                        <PathIcon Data="{StaticResource AddPhotoPathIcon}" />
                    </AppBarButton.Icon>
                </AppBarButton>

                <AppBarButton
                    x:Name="EmojiButton"
                    Click="EmojiButton_Click"
                    Label="Emoji"
                    ToolTipService.ToolTip="Insert emoji">
                    <AppBarButton.Icon>
                        <PathIcon Data="{StaticResource EmojiPathIcon}" />
                    </AppBarButton.Icon>
                </AppBarButton>

                <AppBarButton
                    x:Name="LinkButton"
                    Click="LinkButton_Click"
                    Label="Link"
                    ToolTipService.ToolTip="Insert or edit link">
                    <AppBarButton.Icon>
                        <PathIcon Data="{StaticResource AddLinkPathIcon}" />
                    </AppBarButton.Icon>
                </AppBarButton>

                <AppBarButton
                    x:Name="RemoveLinkButton"
                    Click="RemoveLinkButton_Click"
                    Label="Remove link"
                    ToolTipService.ToolTip="Remove link"
                    Visibility="Collapsed">
                    <AppBarButton.Icon>
                        <SymbolIcon Symbol="Remove" />
                    </AppBarButton.Icon>
                </AppBarButton>

                <AppBarButton
                    x:Name="TableButton"
                    Click="TableButton_Click"
                    Label="Table"
                    ToolTipService.ToolTip="Insert table">
                    <AppBarButton.Icon>
                        <FontIcon Glyph="&#xE14C;" />
                    </AppBarButton.Icon>
                </AppBarButton>

                <AppBarElementContainer ToolTipService.ToolTip="Insert actions">
                    <ContentPresenter Content="{x:Bind InsertCustomContent, Mode=OneWay}" />
                </AppBarElementContainer>
            </toolkit:TabbedCommandBarItem>

            <toolkit:TabbedCommandBarItem DefaultLabelPosition="Collapsed" Header="Options">
                <AppBarToggleButton
                    x:Name="BuiltInToolbarButton"
                    Click="BuiltInToolbarButton_Click"
                    Label="Web toolbar"
                    ToolTipService.ToolTip="Toggle built-in web toolbar">
                    <AppBarToggleButton.Icon>
                        <PathIcon Data="{StaticResource WebviewToolBarPathIcon}" />
                    </AppBarToggleButton.Icon>
                </AppBarToggleButton>

                <AppBarToggleButton
                    x:Name="SpellCheckButton"
                    Click="SpellCheckButton_Click"
                    Label="Spell check"
                    ToolTipService.ToolTip="Toggle spell check">
                    <AppBarToggleButton.Icon>
                        <FontIcon Glyph="&#xEA53;" />
                    </AppBarToggleButton.Icon>
                </AppBarToggleButton>

                <AppBarElementContainer ToolTipService.ToolTip="Composer options">
                    <ContentPresenter Content="{x:Bind OptionsCustomContent, Mode=OneWay}" />
                </AppBarElementContainer>
            </toolkit:TabbedCommandBarItem>
        </toolkit:TabbedCommandBar.MenuItems>
    </toolkit:TabbedCommandBar>
</UserControl>