Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TextBlock as big as a capital letter (ignoring font ascender/descender)

Tags:

c#

wpf

xaml

I am looking to get a specific behavior on TextBlock so that its height only includes the height of the capital letters (from baseline to top minus "ascender height"). Please see the image Sphinx from Wikipedia to see what I mean. Also the image below may indicate better what I am after.

Sampleenter image description here

I am not specifically looking for a pure XAML solution (probably impossible) so a C# code behind (a converter) is also fine.

This is the XAML used in XamlPad to produce the left A in the image above.

<TextBlock Text="A" Background="Aquamarine" FontSize="120" HorizontalAlignment="Center" VerticalAlignment="Center" />
like image 400
wpfwannabe Avatar asked Mar 20 '12 10:03

wpfwannabe


2 Answers

u can try to use attribute LineStackingStrategy="BlockLineHeight" and a Converter on the LineHeight attributes and a converter on the Height of TextBlock. This a sample code of converters

// Height Converter
public class FontSizeToHeightConverter : IValueConverter
{
    public static double COEFF = 0.715;
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return (double)value * COEFF;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}
// LineHeightConverter
public class FontSizeToLineHeightConverter : IValueConverter
{
    public static double COEFF = 0.875;
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return double.Parse(value.ToString()) * COEFF;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

The Coefficient used on converters depends on Used Family Fonts (Baseline and LineSpacing):

<TextBlock Text="ABC" Background="Aqua" LineStackingStrategy="BlockLineHeight" 
FontSize="{Binding ElementName=textBox1, Path=Text}" 
FontFamily="{Binding ElementName=listFonts, Path=SelectedItem}" 
Height="{Binding RelativeSource={RelativeSource Self}, Path=FontSize, Mode=OneWay, Converter={StaticResource FontSizeToHeightConverter1}}"
LineHeight="{Binding RelativeSource={RelativeSource Self}, Path=FontSize, Converter={StaticResource FontSizeToLineHeightConverter}}"/>

sample with params Coeff = 0.7

The best solution is to find how to calculate the Coeff based on parameters Baseline and LineSpacing of the FontFamily. In this sample (Segeo UI) the Coeff of Height = 0.715 and LineHeight = 0,875 * FontSize.

like image 60
G. Sofien Avatar answered Nov 09 '22 01:11

G. Sofien


Updated:

If I understand right, there's a few tricks I know for this,

You can Scale it with RenderTransform which is usually the most efficient way;

<TextBlock Text="Blah">
  <TextBlock.RenderTransform>
   <CompositeTransform ScaleY="3"/>
  </TextBlock.RenderTransform>
</TextBlock>

Or you can embed the TextBlock in a Viewbox to "zoom" the text to fit the bounds of its container if for example you set hard height values on grid rows like;

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="120"/>
<RowDefinition Height="120"/>
</Grid.RowDefinitions>
<Viewbox VerticalAlignment="Stretch" Height="Auto">
      <!-- The textblock and its contents are 
      stretched to fill its parent -->
      <TextBlock Text="Sphinx" />
</Viewbox>
<Viewbox Grid.Row="2" VerticalAlignment="Stretch" Height="Auto">
      <!-- The textblock and its contents are 
      stretched to fill its parent -->
      <TextBlock Text="Sphinx2" />
</Viewbox>

or you can bind the FontSize to a Container element like;

<Grid x:Name="MyText" Height="120">
<TextBlock FontSize="{Binding ElementName=MyText, Path=Height}" Text="Sphinx" />
</Grid>

They might present the effect you're after?

like image 26
Chris W. Avatar answered Nov 09 '22 00:11

Chris W.