LongListSelector content does not match parent

Question

I am currently working on a Windows Phone 8 application in which one I use the LongListSelector control.

I have created an ItemTemplate with a Grid as container and some TextBlock as children. I don't know why, but the Grid container does not match the LongListSelector control.

Here the code I use. I use a blue background for the LongListSelector control and a red one for the Grid control in order to highlight the issue :

<phone:LongListSelector 
  HorizontalContentAlignment="Stretch"
  HorizontalAlignment="Stretch"
  ItemsSource="{Binding Data}" 
  Background="Aqua"
>
  <phone:LongListSelector.ItemTemplate>
    <DataTemplate>
      <Grid
        HorizontalAlignment="Stretch"
        Background="Red"
      >
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="25" />
          <ColumnDefinition Width="75" />
          <ColumnDefinition Width="*" />
          <ColumnDefinition Width="50" />
          <ColumnDefinition Width="47" />
          <ColumnDefinition Width="100" />
          <ColumnDefinition Width="45" />
          <ColumnDefinition Width="35" />
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Column="0" Style="{StaticResource LineStyle}" Text="{Binding Value}" />
        <TextBlock Grid.Column="1" Style="{StaticResource LineStyle}" Text="{Binding Value}" />
        <TextBlock Grid.Column="2" Style="{StaticResource LineStyle}" Text="{Binding Value}" TextAlignment="Left" TextTrimming="WordEllipsis" />
        <TextBlock Grid.Column="3" Style="{StaticResource LineStyle}" Text="{Binding Value}" />
        <TextBlock Grid.Column="4" Style="{StaticResource LineStyle}" Text="{Binding Value}" />
        <TextBlock Grid.Column="5" Style="{StaticResource LineStyle}" Text="{Binding Value}" />
        <TextBlock Grid.Column="6" Style="{StaticResource LineStyle}" Text="{Binding Value}" />
        <TextBlock Grid.Column="7" Style="{StaticResource LineStyle}" Text="{Binding Value}"  />
      </Grid>
    </DataTemplate>
  </phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>

And here the style :

<Style x:Key="LineStyle" TargetType="TextBlock">
  <Setter Property="Foreground" Value="Black" />
  <Setter Property="FontSize" Value="13" />
  <Setter Property="Margin" Value="0, 12" />
  <Setter Property="TextAlignment" Value="Center" />
  <Setter Property="HorizontalAlignment" Value="Stretch" />
</Style>

And here a screenshot :

How to force the Grid container (the one in red) to match its parents ?

Thank you in advance for your help !

Answer 1

I think it is due to the vertical ScrollBar of the LongListSelector, which adds spaces in the right of the list control.

You can remove this right-spaces by adding the following piece of code in the init of your Page.

MyList.Loaded += (sender, e) => { var scrollBar = ((FrameworkElement)VisualTreeHelper.GetChild(MyList, 0)).FindName("VerticalScrollBar") as ScrollBar; scrollBar.Margin = new Thickness(-10, 0, 0, 0); };