9

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.

Sample enter 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" />
wpfwannabe
  • 14,587
  • 16
  • 78
  • 129
  • You should use MeasureString, or some similar technique. Look at this question http://stackoverflow.com/questions/824281/wpf-equivalent-to-textrenderer – Vladimir Perevalov Mar 20 '12 at 14:16

2 Answers2

5

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.

G. Sofien
  • 234
  • 3
  • 11
1

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?

Chris W.
  • 22,835
  • 3
  • 60
  • 94
  • Hm... not really. I do not see any effect in your first XAML. The second one has an extra ".Value" but still does not do it. Thanks anyway. I have added new image to explain further. I am getting closer to nailing this with a custom converter and multibinding. It is not pretty though. I was looking to get a simple solution. – wpfwannabe Mar 20 '12 at 17:35
  • Well I tried to do an edit and its not letting me save saying posts cant contain that content? Which is a weird thing with no explanation but I think what you're wanting to do is maybe use GlyphTypeFace to find you lineheight value and set it without your line gap (leading) will look more into later if I have time since now Im curious to, never had a reason to mess with fonts this way before. – Chris W. Mar 20 '12 at 18:59
  • Thanks! I got this working the way I wanted it after all. If nobody comes up with a solution as an exercise, I will post my own answer in a couple of days. – wpfwannabe Mar 20 '12 at 19:51
  • Yes, please post your results, I'been looking for something similar to this for up/down arrow buttons using the `Marlett` font – Keven M Mar 24 '12 at 14:02