In WPF, you can easily create this look using Path
objects to draw the sides (these ones are straight) and a UniformGrid
to display the content:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="300">
<Window.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="TextAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Path Grid.Column="0" Data="M 0,0 0,300 15,300 15,295 5,295 5,5 15,5 15,0"
Width="15" Height="300" Fill="Black" VerticalAlignment="Stretch"
HorizontalAlignment="Center" />
<UniformGrid Grid.Column="1" Columns="2" Rows="2" TextElement.FontFamily=
"Palatino Linotype" TextElement.FontSize="28">
<TextBlock>
<Run Text="a" />
<Run Typography.Variants="Subscript" FontStyle="Italic" Text="11" />
</TextBlock>
<TextBlock>
<Run Text="a" />
<Run Typography.Variants="Subscript" FontStyle="Italic" Text="11" />
</TextBlock>
<TextBlock>
<Run Text="a" />
<Run Typography.Variants="Subscript" FontStyle="Italic" Text="21" />
</TextBlock>
<TextBlock>
<Run Text="a" />
<Run Typography.Variants="Subscript" FontStyle="Italic" Text="22" />
</TextBlock>
</UniformGrid>
<Path Grid.Column="2" Data="M 15,0 15,300 0,300 0,295 10,295 10,5 0,5 0,0"
Width="15" Height="300" Fill="Black" VerticalAlignment="Stretch"
HorizontalAlignment="Center" />
</Grid>
</Window>
There are two important things to note for this to work properly:
The TextElement.FontFamily
that you choose must be able to display Subscript
.
You can bind to the Run.Text
properties instead of hard-coding values in as I have in your example:
<Run Text="{Binding Value1}" />
<Run Typography.Variants="Subscript" FontStyle="Italic" Text="{Binding Value2}" />