Uppercase TextBlock (ignoring the splash screen / descender font)

I am looking to get specific behavior on a TextBlock so that its height includes only the height of the capital letters (from the baseline to the top minus "height of height"). Please see the Sphinx Image from Wikipedia to understand what I mean. In addition, the image below may indicate what I want.

Sampleenter image description here

I'm not specifically looking for a clean XAML solution (maybe not possible), so the C # code (converter) is fine too.

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

 <TextBlock Text="A" Background="Aquamarine" FontSize="120" HorizontalAlignment="Center" VerticalAlignment="Center" /> 
+7
source share
2 answers

u may try to use the attribute LineStackingStrategy = "BlockLineHeight" and the converter on the LineHeight attributes and the converter at the height of the TextBlock. This is an example of converter code.

 // 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 for the converters depends on the family fonts used (basic and linear):

 <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 Coeff based on the Baseline and LineSpacing parameters for FontFamily. In this example (Segeo UI) Coeff of Height = 0.715 and LineHeight = 0.875 * FontSize.

+4
source

Updated:

If I understand correctly, there are several tricks that I know for this,

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

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

Or you can insert a TextBlock into the Viewbox to β€œscale” the text so that it matches the borders of its container if, for example, you set the values ​​of the rigid height in the grid lines, for example:

 <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 element to the Container element, for example:

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

Can they imagine the effect you are after?

+1
source

All Articles