Windows Phone TextBlock aligment - windows-phone-8

Question

In ListBox with ItemTemplate second TextBlock not align to right.
In design mode second TextBlock align to right
<ListBox >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock
Grid.Column="0" Padding="10" HorizontalAlignment="Left"
Text="{Binding Display}" FontSize="30"
/>
<TextBlock
Grid.Column="1" HorizontalAlignment="Right"
Text="{Binding Length}" FontSize="30"
/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBoxItem>
<Grid>
<TextBlock
Grid.Column="0" Padding="10" HorizontalAlignment="Left"
Text="2014-01-24 23:00:00" FontSize="30"
/>
<TextBlock
Grid.Column="1" HorizontalAlignment="Right"
Text="00:00" FontSize="30"
/>
</Grid>
</ListBoxItem>
</ListBox>
Result:
Item in designer:

Answer 1

You need to change HorizontalContentAligment to Strech - to fill the space with your item, by default it's set to the left:
<ListBox Name="myList">
<ListBoxItem HorizontalContentAlignment="Stretch">
<Grid>
<TextBlock HorizontalAlignment="Left" Text="2014-01-24 23:00:00" FontSize="30"/>
<TextBlock HorizontalAlignment="Right" Text="00:00" FontSize="30"/>
</Grid>
</ListBoxItem>
</ListBox>
You can also set Property of ItemContainerStyle:
<ListBox>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Padding="10" HorizontalAlignment="Left" Text="{Binding Display}" FontSize="30"/>
<TextBlock HorizontalAlignment="Right" Text="{Binding Length}" FontSize="30"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBoxItem>
<Grid>
<TextBlock Padding="10" HorizontalAlignment="Left" Text="2014-01-24 23:00:00" FontSize="30"/>
<TextBlock Padding="10" HorizontalAlignment="Right" Text="00:00" FontSize="30"/>
</Grid>
</ListBoxItem>
</ListBox>
In case you have only two items, one aligned to left, one to right - I've removed Colums. Although they help to manage the content, align it and they also will be helpful if you need to wrap text and/or perform more operations on it.

Answer 2

This is how you can do it :
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="0" Padding="10" HorizontalAlignment="Left"
Text="{Binding Display}" FontSize="30"
/>
<TextBlock
Grid.Column="1" HorizontalAlignment="Right"
Text="{Binding Length}" FontSize="30"
/>
</Grid>
This will give 75% width to the first column and remaining 25% to the second column.
If you want the first and second columns to dynamically change width according to the content then you can give one width as "Auto" and the other no width property (or Width="*") which means it will take the remaining area as the column width.

Answer 3

I would take Alexandr Sulimov solution. I made some improvements. I think it is the best way to do it.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Padding="10" Text="{Binding Display}" FontSize="30" />
<TextBlock Grid.Column="1" Text="{Binding Length}" FontSize="30" />
</Grid>