ListBox ItemTemplate alignment Error

Question

I've got quite an annoying error. So what I've done is that I've made my own ListBox ItemTemplate. The XAML for that is:

<DataTemplate x:Key="DataTemplate1">
        <StackPanel toolkit:TiltEffect.IsTiltEnabled="True" Orientation="Vertical" Width="456" Height="115">
            <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding AccountTitle}" VerticalAlignment="Top" Height="40" Width="446" FontFamily="Segoe WP" FontSize="29" Margin="10,0,0,0"/>
            <TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding AccountDate}" VerticalAlignment="Center" FontFamily="Segoe WP" FontSize="20" TextAlignment="Right" Margin="0,2,0,0">
                <TextBlock.Foreground>
                    <SolidColorBrush Color="{StaticResource PhoneTextMidContrastColor}"/>
                </TextBlock.Foreground>
            </TextBlock>
            <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding AccountUsername}" VerticalAlignment="Top" Height="40" Width="446" FontFamily="Segoe WP" FontSize="26" Margin="10,-33,0,0">
                <TextBlock.Foreground>
                    <SolidColorBrush Color="{StaticResource PhoneTextMidContrastColor}"/>
                </TextBlock.Foreground>
            </TextBlock>
            <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding AccountWebsite}" VerticalAlignment="Top" Height="40" Width="446" FontFamily="Segoe WP" FontSize="22" Margin="10,-9,0,0">
                <TextBlock.Foreground>
                    <SolidColorBrush Color="{StaticResource PhoneTextLowContrastColor}"/>
                </TextBlock.Foreground>
            </TextBlock>
            <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding FolderID}" VerticalAlignment="Top" Height="40" Width="446" FontFamily="Segoe WP" FontSize="29" Margin="10,0,0,0" Visibility="Collapsed"/>
        </StackPanel>
    </DataTemplate>

Now. When I run the app. It looks something like this:

But When I tilt the device and it goes to Landscape, This happens:

Can someone please tell me how I can fix this. So that no matter what orientation it is on, it will adapt and use the whole listbox.

Thanks! If there is any code you need from me please ask and I will provide.

Answer 1

Try to set HorizontalContentAlignment property of ListBoxItem to Stretch :

<ListBox>
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

UPDATE :

In addition to above step, remove hardcoded Width from your StackPanel :

<DataTemplate x:Key="DataTemplate1">
    <StackPanel toolkit:TiltEffect.IsTiltEnabled="True" Orientation="Vertical" Height="115">
        ........
        ........
    </StackPanel>
</DataTemplate>