WPF: Period character (".") in a strange place in TextBlock

Question

I am displaying a string with a TextBlock in WPF. It has a period character followed by a newline somewhere in the middle. For some reason this causes the TextBlock to always show the period character at the start of the line (it should be right after the word "content"). When I enable text wrapping it gets even stranger. Now by resizing the window I can move the character to a different line but it will always be right at the start.

This is my Markup:

<Grid Width="Auto">
    <Grid.Style>
        <Style TargetType="Grid">
            <Setter Property="Margin" Value="{StaticResource MessageBubbleMarginRight}" />
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=Message.IsMine, ElementName=owner}" Value="True">
                    <Setter Property="Margin" Value="{StaticResource MessageBubbleMarginLeft}" />
                    <Setter Property="HorizontalAlignment" Value="Right" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Grid.Style>
    <Rectangle RadiusX="10" RadiusY="10" Stroke="Black" Fill="AliceBlue" />
    <TextBlock Text="{Binding ElementName=owner, Path=Message.Text, FallbackValue=This is a super long&#x0a;Multiline text}"
               Margin="20, 20, 20, 20"
               TextWrapping="Wrap"
               VerticalAlignment="Center">
        <TextBlock.Style>
            <Style TargetType="TextBlock">
                <Setter Property="TextAlignment" Value="Right" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Message.IsMine, ElementName=owner}" Value="True">
                        <Setter Property="TextAlignment" Value="Left" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </TextBlock.Style>
    </TextBlock>
</Grid>

Am I missing something here? Or is this a rendering glitch in WPF?

Answer 1

I just found the answer. I managed to reproduce the error in the designer (see first screenshot, period is placed after "long", followed by a newline) and realized the message bubbles were in an ItemsControl with FlowDirection=RightToLeft. Changing that back to LeftToRight or introducing a LTR StackPanel further down the tree fixed the issue. Still, I believe this is a bug as flow direction should not change text flow direction (especially messing up the order of some characters) and will report it to the dev team.

Edit: Apparently this is the intended behavior as UI elements are supposed to inherit the FlowDirection, including the TextBlock, causing it to render its text as RTL. The solution is simply setting FlowDirection=LeftToRight in the TextBlock. For more info see https://learn.microsoft.com/en-us/dotnet/framework/wpf/advanced/bidirectional-features-in-wpf-overview.

For later reference, this is using .NET Core 3.0 (no preview). This code caused the issue, in particular line 2:

<ItemsControl ItemsSource="{Binding ElementName=owner, Path=Session.CurrentConversation.Value.Messages, FallbackValue=ABCDEFG}"
              FlowDirection="RightToLeft">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <DockPanel LastChildFill="False" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <chat:ChatMessageTextBubble Message="{Binding}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemContainerStyle>
        <Style>
            <Setter Property="DockPanel.Dock" Value="Bottom" />
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>