Ao desenvolver diariamente para Windows Phone por vezes deparo-me com situações em que nem tudo o que parece, realmente o é… esta é uma dessas situações!

Cenário inicial: numa PhoneApplicationPage vazia, adicionamos o seguinte bloco de XAML ao conteúdo da Grid ContentPanel:

<ListBox ItemsSource="{Binding Items}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <TextBlock Text="{Binding}" Style="{StaticResource PhoneTextTitle2Style}" />
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Como podem aqui ver, estamos a criar uma ListBox com um template muito simples (para cada item, apresentar um TextBlock usando o próprio item como texto).

Do lado do código temos uma propriedade Items que tem apenas e só 3 items e que vão servir para alimentar a propriedades ItemsSource da nossa ListBox.

Até aqui tudo bem, ao executar a aplicação o resultado deverá ser este:

Digamos que agora pretendemos alinhar o texto de cada item à direita; normalmente, a seguinte alteração seria suficiente:

<TextBlock Text="{Binding}" HorizontalAlignment="Right" Style="{StaticResource PhoneTextTitle2Style}" />

Ao executar novamente a aplicação, poderemos ver que o resultado se mantém inalterado!

Nesta altura, começamos a testar as propriedades da própria ListBox, ao ponto de fazer algo deste tipo:

<ListBox HorizontalContentAlignment="Right">

E mais uma vez, ao executar poderemos reparar que nada mudou!!!

O que se passa é que cada item da ListBox é instanciado dentro de um ListBoxItem, e este controlo ignora por completo a propriedade HorizontalContentAlignment colocada na própria ListBox.

Para resolver este problema, temos que definir a propriedade ListBox.ItemContainerStyle e ai sim colocar o ListBoxItem.HorizontalAlignment pretendido.

O código corrigido ficará estão da seguinte forma:

<ListBox ItemsSource="{Binding Items}">
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalAlignment" Value="Right"/>
        </Style>
    </ListBox.ItemContainerStyle>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <TextBlock Text="{Binding}" Style="{StaticResource PhoneTextTitle2Style}" />
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

E aqui temos o resultado final:

Pessoalmente, coloco sempre o ListBoxItem.HorizontalAlignment com o valor HorizontalAlignment.Stretch, e depois controlo o alinhamento do item propriamente dito dentro do template; com esta segunda abordagem tenho a garantia de que o item dispõe realmente da largura total da ListBox para apresentar resultados!