View/MainWindow.xaml

<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:Wpf="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
        mc:Ignorable="d"
        Title="" Height="450" Width="800"
        Background="{DynamicResource ControlBackgroundBrush}">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Assets/Theme.xaml" />
                <ResourceDictionary Source="Assets/Style.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" MinWidth="100"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
 
        <Grid Grid.Column="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
 
            <TabControl Margin="0,0,2,0">
                <TabItem Header="General">
                    <ScrollViewer>
                        <StackPanel Margin="10">
                            <TextBlock Text="Color" Margin="{DynamicResource ContentMargin}" />
                            <ComboBox x:Name="ColorsComboBox" ItemsSource="{Binding Colors}" Margin="{DynamicResource ContentMargin}">
                                <ComboBox.ItemTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding Name}" />
                                    </DataTemplate>
                                </ComboBox.ItemTemplate>
                            </ComboBox>
                            <TextBlock Text="Style" Margin="{DynamicResource ContentMargin}" />
                            <ComboBox x:Name="StylesComboBox" ItemsSource="{Binding Styles}" Margin="{DynamicResource ContentMargin}">
                                <ComboBox.ItemTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding Name}" />
                                    </DataTemplate>
                                </ComboBox.ItemTemplate>
                            </ComboBox>
                            <TextBlock Text="Custom Text" Margin="{DynamicResource ContentMargin}" />
                            <TextBox x:Name="Line1TextBox" Text="Title"/>
                            <TextBox x:Name="Line2TextBox" Text="Sub title" Margin="{DynamicResource ContentMargin}"/>
                            <Grid x:Name="TextLineFontStyleContainer" Margin="{DynamicResource ContentMargin}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <TextBlock Text="&#xE8D2;" FontFamily="Segoe Fluent Icons" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,5,0" />
                                <ComboBox x:Name="FontFamilyComboBox" IsEditable="True" ItemsSource="{Binding FontFamily}" Grid.Column="1" VerticalAlignment="Center" IsTextSearchEnabled="False" IsEnabled="False" d:IsEnabled="True" />
                                <TextBlock Text="&#xE8E9;" FontFamily="Segoe Fluent Icons" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,5,0" Grid.Row="1" />
                                <ComboBox x:Name="FontSizeComboBox" IsEditable="True" ItemsSource="{Binding FontSize}" Grid.Column="1" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Left" MinWidth="50" IsTextSearchEnabled="False" IsEnabled="False" d:IsEnabled="True" />
                            </Grid>
                        </StackPanel>
                    </ScrollViewer>
 
                </TabItem>
                <TabItem Header="Layout">
                    <ScrollViewer>
                        <StackPanel Margin="10">
                            <TextBlock Text="Alignment" Margin="{DynamicResource ContentMargin}" />
                            <Grid HorizontalAlignment="Center" Margin="{DynamicResource ContentMargin}">
                                <Grid.ColumnDefinitions >
                                    <ColumnDefinition Width="30"/>
                                    <ColumnDefinition Width="30"/>
                                    <ColumnDefinition Width="30"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="30"/>
                                    <RowDefinition Height="30"/>
                                    <RowDefinition Height="30"/>
                                </Grid.RowDefinitions>
                                <RadioButton x:Name="TopLeftAlignmentRadioButton" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                <RadioButton x:Name="TopCenterAlignmentRadioButton" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                <RadioButton x:Name="TopRightAlignmentRadioButton" Grid.Column="2" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                <RadioButton x:Name="LeftAlignmentRadioButton" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                <RadioButton x:Name="CenterAlignmentRadioButton" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" IsChecked="True" />
                                <RadioButton x:Name="RightAlignmentRadioButton" Grid.Column="2" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                <RadioButton x:Name="BottomLeftAlignmentRadioButton" Grid.Column="0" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                <RadioButton x:Name="BottomCenterAlignmentRadioButton" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                <RadioButton x:Name="BottomRightAlignmentRadioButton" Grid.Column="2" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center" />
 
                            </Grid>
                            <TextBlock Text="Size" VerticalAlignment="Center" Margin="{DynamicResource ContentMargin}" />
                            <StackPanel Margin="{DynamicResource ContentMargin}">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <TextBox x:Name="WidthTextBox" Text="500" Grid.Column="0" />
                                    <TextBlock Text="×" Grid.Column="1" VerticalAlignment="Center" />
                                    <TextBox x:Name="HeightTextBox" Text="400" Grid.Column="2" />
                                </Grid>
                                <Button x:Name="SetPrimaryScreenSizeButton" Content="Set primary screen size" Margin="0" />
                            </StackPanel>
                            <TextBlock Text="Settings" Margin="{DynamicResource ContentMargin}" />
                            <CheckBox x:Name="AutoOverFlowCheckBox" Margin="{DynamicResource ContentMargin}" Content="Auto over flow"/>
                            <CheckBox x:Name="IgnoreDpiSettingsCheckBox" Margin="{DynamicResource ContentMargin}" Content="Ignore DPI settings"/>
 
                        </StackPanel>
                    </ScrollViewer>
                </TabItem>
            </TabControl>
 
            <Button x:Name="SaveImageButton" Grid.Row="1" Content="Save Image" VerticalAlignment="Center" Style="{DynamicResource ActiveButtonStyle}" />
        </Grid>
        <GridSplitter Height="100" Width="5"/>
        <Grid Grid.Column="1">
            <Wpf:WebView2 x:Name="WebView2" Source="about:blank" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        </Grid>
    </Grid>
</Window>