Search code examples
c#wpftextblock

WPF: Align TextBlock with different font sizes at top

I need to align two text elements of different font sizes at the top line. All I managed so far is either this : enter image description here

Resulting from this code:

                <Canvas VerticalAlignment="Center" HorizontalAlignment="Center" SnapsToDevicePixels="True">
                <StackPanel x:Name="RemainingTimeDisplay" Orientation="Horizontal" VerticalAlignment="Top">
                    <StackPanel.Margin>
                        <MultiBinding Converter="{StaticResource CenterConverter}">
                            <Binding ElementName="RemainingTimeDisplay" Path="ActualWidth"/>
                            <Binding ElementName="RemainingTimeDisplay" Path="ActualHeight"/>
                        </MultiBinding>
                    </StackPanel.Margin>
                    <!--<Run FontSize="360" Text="{Binding RemainingTime.Minutes, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay, UpdateSourceTrigger=PropertyChanged, StringFormat=D2, Converter={StaticResource IntAbsConverter}}"/>
                        <Run FontSize="128" Text="{Binding RemainingTime.Seconds, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay, UpdateSourceTrigger=PropertyChanged, StringFormat=D2, Converter={StaticResource IntAbsConverter}}"/>-->
                    <TextBlock FontSize="360" Text="{Binding RemainingTime.Minutes, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay, UpdateSourceTrigger=PropertyChanged, StringFormat=D2, Converter={StaticResource IntAbsConverter}}"/>
                    <TextBlock FontSize="128" Text="{Binding RemainingTime.Seconds, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay, UpdateSourceTrigger=PropertyChanged, StringFormat=D2, Converter={StaticResource IntAbsConverter}}"/>
                </StackPanel>
            </Canvas>

Or: enter image description here

<Canvas VerticalAlignment="Center" HorizontalAlignment="Center" SnapsToDevicePixels="True">
  <StackPanel x:Name="RemainingTimeDisplay" Orientation="Horizontal" VerticalAlignment="Top">
    <StackPanel.Margin>
        <MultiBinding Converter="{StaticResource CenterConverter}">
            <Binding ElementName="RemainingTimeDisplay" Path="ActualWidth"/>
            <Binding ElementName="RemainingTimeDisplay" Path="ActualHeight"/>
        </MultiBinding>
    </StackPanel.Margin>
    <TextBlock FontFamily="Roboto" VerticalAlignment="Top">
      <TextBlock FontSize="360" Text="{Binding RemainingTime.Minutes, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay, UpdateSourceTrigger=PropertyChanged, StringFormat=D2, Converter={StaticResource IntAbsConverter}}"/>
      <TextBlock FontSize="128" Text="{Binding RemainingTime.Seconds, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay, UpdateSourceTrigger=PropertyChanged, StringFormat=D2, Converter={StaticResource IntAbsConverter}}"/>
     </TextBlock>
  </StackPanel>
</Canvas>

I tried also some more things, that I don't repeat here in code. I tried using "run" as a child of on single TextBlock for both text elements and I (actually started) tried without the TextBlock that encloses the other two.

So I tried a lot, I googled a lot - and I'm still not where I want to be.

Any hint would be really appreciated!

Thanks, Marcus

Solution

  • Try the following:

    <TextBlock FontSize="360"
            Text="00"
            LineHeight="360"
            LineStackingStrategy="BlockLineHeight" />
<TextBlock FontSize="128"
            LineHeight="360"
            LineStackingStrategy="BlockLineHeight">
    <Run Text="00" BaselineAlignment="Top" />
</TextBlock>