MainWindow.xaml

<Window x:Class="FgSample.MainWindow"
        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:local="clr-namespace:FgSample"
        xmlns:fg="clr-namespace:PergleLabs.UI;assembly=PergleLabs.Fontogram"
        mc:Ignorable="d"
        Title="Fontogram Sampler" Height="500" Width="800"
        ResizeMode="NoResize"
        Background="WhiteSmoke"
        >
    
    <Window.Resources>
        <Style TargetType="fg:Fontogram">
            <Setter Property="Height" Value="20"/>
            <Setter Property="Width" Value="30"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="Margin" Value="4"/>
        </Style>
        <Style TargetType="local:CustomFgPack">
            <Setter Property="Height" Value="50"/>
            <Setter Property="Width" Value="50"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="Margin" Value="4"/>
        </Style>
        <Style TargetType="Label">
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Padding" Value="8,0"/>
        </Style>
        <Style TargetType="GroupBox">
            <Setter Property="Padding" Value="4"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Background" Value="White"/>
        </Style>
    </Window.Resources>
    
    <Grid>

        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="10*"/>
            <RowDefinition Height="6*"/>
            <RowDefinition Height="2*"/>
        </Grid.RowDefinitions>

        <fg:Fontogram
            ReadyMade="Sample_HoodedSmiley"
            Grid.Column="1" Grid.ColumnSpan="2" HorizontalAlignment="Center"
            Grid.Row="1" Grid.RowSpan="2" VerticalAlignment="Center"
            Width="140" Height="140" Margin="0,20,10,0"
            />

        <GroupBox
            Grid.Column="0" Grid.Row="1"
            Header="Built into original Fontogram"
            >
            
            <StackPanel>
            
                <StackPanel Orientation="Horizontal">
                    <fg:Fontogram
                        ReadyMade="DocState_FolderNotFound"
                        />
                    <Label>Folder not found</Label>
                </StackPanel>

                <StackPanel Orientation="Horizontal">
                    <fg:Fontogram
                        ReadyMade="DocState_OK"
                        />
                    <Label>Document ready</Label>
                </StackPanel>

                <StackPanel Orientation="Horizontal">
                    <fg:Fontogram
                        ReadyMade="DocState_Waiting"
                        />
                    <Label>Waiting for document</Label>
                </StackPanel>

                <StackPanel Orientation="Horizontal">
                    <fg:Fontogram
                        ReadyMade="DocState_NoAccess"
                        />
                    <Label>Access denied</Label>
                </StackPanel>

                <StackPanel Orientation="Horizontal">
                    <fg:Fontogram
                        ReadyMade="DocState_Missing"
                        />
                    <Label>Document missing</Label>
                </StackPanel>

                <StackPanel Orientation="Horizontal">
                    <fg:Fontogram
                        ReadyMade="DocState_Unknown"
                        />
                    <Label>Document status unknown</Label>
                </StackPanel>

            </StackPanel>
        </GroupBox>

        
        <GroupBox
            Grid.Column="1" Grid.Row="1"
            Header="Custom Fontogram pack"
            >

            <StackPanel>

                <StackPanel Orientation="Horizontal">
                    <local:CustomFgPack
                        ReadyMade="Custom1"
                        />
                    <Label>Custom1</Label>
                </StackPanel>

                <StackPanel Orientation="Horizontal">
                    <local:CustomFgPack
                        ReadyMade="Custom2"
                        />
                    <Label>Custom2</Label>
                </StackPanel>

                <StackPanel Orientation="Horizontal">
                    <local:CustomFgPack
                        ReadyMade="Custom3"
                        />
                    <Label>Custom3</Label>
                </StackPanel>

            </StackPanel>
        </GroupBox>


        <GroupBox
            Grid.Column="2" Grid.Row="1"
            Header="Direct XAML example"
            >
            <fg:Fontogram  Width="160" Height="160"
                
                Text="⚙|123🙂ABC"
                TextAttr=";bold;gray|Courier New;bold;darkorange"
                TextPosRel="34;;11|20;;-23"
                BackAttr="1;;black|1;#accc;#08f"
                BackBorderNumbersRel="0,1,0,0;90,90,0,0|15,0,15,30;90,90,0,0"
                BackPosRel=";;;5|80;60;;16"
                />
        </GroupBox>


        <GroupBox
            Grid.Row="2" Grid.ColumnSpan="3"
            Header="Other built-in examples"
            >

            <StackPanel
                Orientation="Horizontal"
                >

                <fg:Fontogram Width="60" Height="60" ReadyMade="Fontogram_Logo" />

                <fg:Fontogram Width="100" Height="60" ReadyMade="Fontogram_LogoWide" />

                <fg:Fontogram Width="60" Height="60" ReadyMade="Sample_ABClogo" />

                <fg:Fontogram Width="60" Height="60" ReadyMade="Sample_BBClogo" />

                <fg:Fontogram Width="60" Height="60" ReadyMade="Sample_CBClogo" />

                <fg:Fontogram Width="60" Height="60" ReadyMade="Sample_GoogleChromeLogo" />

                <fg:Fontogram Width="64" Height="80" ReadyMade="Sample_RgbSwirl" />

                <fg:Fontogram Width="50" Height="72" ReadyMade="Sample_TallHatSmiley" />

                <fg:Fontogram Width="60" Height="60" ReadyMade="Sample_TopHatSmiley" />

                <fg:Fontogram Width="60" Height="60" ReadyMade="Sample_VideoFaceSearch" />

            </StackPanel>
            
        </GroupBox>
        
    </Grid>
</Window>