Xaml - Textblock Alignment

Question

I'm trying to create a ListViewItemTemplate and my template needs to have two textblocks side by side. The one on the left is a message textblock and should stay left and the one on the right is a date textblock. That textblock needs to stretch to the end of the ItemTemplate and needs to fit all the text. I'm trying to achieve this:

But this is what I get:

The XAML code for this is:

<DataTemplate x:Key="ItemTemplate">
        <Grid Height="84">
            <StackPanel Holding="ListViewItem_Holding">
                <TextBlock Text="{Binding Title}" FontFamily="Segoe WP" FontSize="21" />
                <StackPanel Margin="0,0,-3,0" Orientation="Horizontal">
                    <TextBlock Text="{Binding Post}" FontFamily="Segoe WP SemiLight" FontSize="18" Margin="0,0,-1,0" Height="26" />
                    <TextBlock Text="{Binding Modified}" FontFamily="Segoe WP SemiLight" FontSize="18" Margin="0,0,-3,0" SelectionChanged="TextBlock_SelectionChanged" />
                </StackPanel>
                <TextBlock Text="{Binding ID}" FontFamily="Segoe WP SemiLight" FontSize="18" Visibility="Collapsed" />
            </StackPanel>
        </Grid>
    </DataTemplate>

How can I fix this? I need it so that it stretches properly and at the same time fits all the text regardless of the orientation.

Answer 1

I would personally use a Grid as it is far more flexible than StackPanel and deals with different screen sizes much better. something like below

<Grid>
   <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
   </Grid.ColumnDefinitions>
   <TextBlock Text="Cant send: message" FontFamily="Segoe WP SemiLight" 
              FontSize="18" Margin="0,0,-1,0"
              TextWrapping="Wrap"/>
   <TextBlock Text="1:14a" Grid.Column="1" FontFamily="Segoe WP SemiLight" 
              TextWrapping="Wrap" FontSize="18"
              HorizontalAlignment="Right"                                    
              SelectionChanged="TextBlock_SelectionChanged"
              Margin="0,-15,0,0"/>
</Grid>

Note 2 columns are defined with equal widths. You can adjust this to your needs. Also both TextBlocks have

TextWrapping="Wrap"

which means your text will go to available space (column width) then wrap to the next line if space is available.

The second TextBlock is aligned to the right so adjust margins as appropriate.

HorizontalAlignment="Right"