EndlessHostRoles/CTA/CustomTeamAssigner/RichTextEditor.xaml

<Page x:Class="CustomTeamAssigner.RichTextEditor"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:svgc="http://sharpvectors.codeplex.com/svgc/"
      mc:Ignorable="d"
      Title="RichTextEditor" Height="680" Width="1260">
    
    <Page.Resources>
        <Style TargetType="Button">
            <Setter Property="Background" Value="#2D2D2D"/>
            <Setter Property="Foreground" Value="#FFFFFF"/>
            <Setter Property="Opacity" Value="1"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="FontFamily" Value="Segoe UI"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Padding" Value="10"/>
            <Setter Property="Margin" Value="10"/>
            <Setter Property="Width" Value="100"/>
            <Setter Property="Height" Value="40"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="10">
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="#3E3E3E"/>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="Background" Value="#525252"/>
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" From="1" To="0.95" Duration="0:0:0.1" AutoReverse="True"/>
                                <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" From="1" To="0.95" Duration="0:0:0.1" AutoReverse="True"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                </Trigger>
            </Style.Triggers>
        </Style>
        <Style TargetType="RichTextBox">
            <Setter Property="Background" Value="White"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="FontFamily" Value="Segoe UI"/>
        </Style>
        <Style TargetType="TextBox">
            <Setter Property="Background" Value="#2E2E2E"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontFamily" Value="Segoe UI"/>
        </Style>
        <Style TargetType="ComboBox">
            <Setter Property="FontFamily" Value="Segoe UI"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Background" Value="#2D2D2D"/>
            <Setter Property="BorderBrush" Value="Gray"/>
            <Setter Property="Margin" Value="10"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Width" Value="200"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ComboBox">
                        <Grid>
                            <ToggleButton Grid.Column="2" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" >
                                <ToggleButton.Template>
                                    <ControlTemplate>
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="5*" />
                                                <ColumnDefinition Width="*" />
                                            </Grid.ColumnDefinitions>
                                            <Border x:Name="Border"  Grid.ColumnSpan="2" CornerRadius="5" Background="#2D2D2D" BorderBrush="Black" BorderThickness="1" />
                                            <Border Grid.Column="0" CornerRadius="5,0,0,5"  Margin="1"  Background="#2D2D2D"  BorderBrush="Black" BorderThickness="0,0,1,0" />
                                            <Path x:Name="Arrow" Grid.Column="1"  Fill="LightGray" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z"/>
                                        </Grid>
                                        <ControlTemplate.Triggers>
                                            <Trigger Property="ToggleButton.IsMouseOver" Value="true">
                                                <Setter TargetName="Border" Property="Background" Value="#071228" />
                                            </Trigger>
                                            <Trigger Property="ToggleButton.IsChecked" Value="true">
                                                <Setter TargetName="Border" Property="Background" Value="#071228" />
                                            </Trigger>
                                        </ControlTemplate.Triggers>
                                    </ControlTemplate>
                                </ToggleButton.Template>
                            </ToggleButton>
                            <ContentPresenter Name="ContentSite" IsHitTestVisible="False"  Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Margin="3"  />
                            <TextBox x:Name="PART_EditableTextBox" Visibility="Hidden" IsReadOnly="{TemplateBinding IsReadOnly}"/>
                            <Popup Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True"  Focusable="False" PopupAnimation="Slide">
                                <Grid  Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}">
                                    <Border x:Name="DropDownBorder" Background="#071228" />
                                    <ScrollViewer SnapsToDevicePixels="True">
                                        <StackPanel IsItemsHost="True" />
                                    </ScrollViewer>
                                </Grid>
                            </Popup>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="#3E3E3E"/>
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Foreground" Value="#707070"/>
                    <Setter Property="Background" Value="#1E1E1E"/>
                    <Setter Property="Opacity" Value="0.6"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Page.Resources>

    <Grid Name="MainGrid">
        
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        
        <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Background="#2E2E2E" Opacity="0.75" Name="Toolbar">
            <Button Content="Bold" Click="Bold_Click" Margin="5" Foreground="White" />
            <Button Content="Italic" Click="Italic_Click" Margin="5" Foreground="White" />
            <Button Content="Underline" Click="Underline_Click" Margin="5" Foreground="White" />
            
            <!-- Text Size ComboBox -->
            <ComboBox Width="100" Margin="5" SelectionChanged="FontSizeComboBox_SelectionChanged" SelectedIndex="0">
                <ComboBoxItem Content="12" />
                <ComboBoxItem Content="16" />
                <ComboBoxItem Content="20" />
                <ComboBoxItem Content="24" />
                <ComboBoxItem Content="28" />
                <ComboBoxItem Content="32" />
            </ComboBox>

            <!-- Text Color ComboBox -->
            <ComboBox Width="100" Margin="5" SelectionChanged="FontColorComboBox_SelectionChanged" SelectedIndex="0">
                <ComboBoxItem Content="Black" />
                <ComboBoxItem Content="White" />
                <ComboBoxItem Content="Red" />
                <ComboBoxItem Content="Green" />
                <ComboBoxItem Content="Blue" />
                <ComboBoxItem Content="Yellow" />
            </ComboBox>
        </StackPanel>

        <!-- RichTextBox for Text Input -->
        <RichTextBox Name="RichTextBox" Grid.Row="1" Grid.RowSpan="5" VerticalAlignment="Top" Margin="10,20,10,80" BorderBrush="#1C1C1C" MinHeight="50"/>

        <!-- Preview HTML Output -->
        <TextBox Name="HtmlPreview" Grid.Row="6" Grid.RowSpan="3" IsReadOnly="True"
                 VerticalAlignment="Bottom" Margin="10,10,10,0" TextWrapping="Wrap" />
        
        <Button Grid.Row="9" VerticalAlignment="Bottom" HorizontalAlignment="Right" Click="BackButton_Click">
            <Button.RenderTransform>
                <ScaleTransform/>
            </Button.RenderTransform>
            <StackPanel Orientation="Horizontal">
                <svgc:SvgViewbox Source="Resources/back.svg" Width="30" Height="30" Margin="0,0,15,0"/>
                <TextBlock Text="Back"/>
            </StackPanel>
        </Button>
    </Grid>
</Page>