How can I change the direction in which children are added to a wrapPanel?-CodePudding

I have a WrapPanel which is the parent of many TextBlock in an ItemsControl.

Each TextBlock displays a word in Arabic, and the whole forms a sentence. To display the sentence, I put in my Binding List to the ItemsControl the words in the order they are in an Arabic reading (from right to left).

public UserControl_ArabicVerseSelectable(List<WordInVerse> wordsInVerse)
{
    InitializeComponent();
    List<WordsOfUC> items = new List<WordsOfUC>();
    foreach (WordInVerse word in wordsInVerse)
    {
        items.Add(new WordsOfUC() { Arabic = word.Arabic, WordID = word.WordID });
    }

    items.Reverse();
    ItemControl_Words.ItemsSource = items;
}

WPF:

<ItemsControl x:Name="ItemControl_Words" 
              HorizontalAlignment="Center" 
              Margin="0,10,0,0" >
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel  />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical" 
                        Margin="5,0,5,0">

                <TextBlock Tag="{Binding WordID}" 
                           x:Name="textBlock_arabic" 
                           Text="{Binding Arabic}" 
                           FontSize="40" 
                           HorizontalAlignment="Center" 
                           FontFamily="Noto Naskh Arabic"  
                           Cursor="Hand" 
                           MouseDown="textBlock_arabic_MouseDown"/>
            
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

That is to say:

...word3, word2, word1

The problem is that when the sentence is only one line long in the wrapPanel, it displays very well:

1 row

But as soon as the sentence is two lines long...

2 row

The last line should be above the first, as it is the beginning of the sentence, but since the words are added from right to left, first the first line fills and then only the second.

So is there any way to add children to the WrapPanel from right to left, or if not, is there any way to reverse all the lines in a WrapPanel?

CodePudding user response：

Add The "FlowDirection" Style Triggers to your TextBlock

     <ItemsControl.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Vertical" Margin="5,0,5,0">
                <TextBlock Tag="{Binding WordID}" x:Name="textBlock_arabic" Text="{Binding Arabic}" FontSize="40" HorizontalAlignment="Center" 
                 FontFamily="Noto Naskh Arabic"  Cursor="Hand"     
                 MouseDown="textBlock_arabic_MouseDown">
            
    <TextBlock.Style>
        <Style TargetType="{x:Type TextBlock}">
          <Style.Triggers>
            <Trigger Property="FlowDirection"
                  Value="RightToLeft">
              <Setter Property="TextAlignment"
                  Value="Right" />
            </Trigger>
          </Style.Triggers>
        </Style>
      </TextBlock.Style>

     </TextBlock>

            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>

NOTE: I took this of a project a long time ago.