LongListMultiSelector Data Template stretches outside screen width - windows phone 8

Question

I've the following pivot control in my application

<phone:PivotItem Header="{Binding Path=LocalizedResources.requests_title, Source={StaticResource LocalizedStrings}}" >
    <Grid Margin="0,-12,0,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <StackPanel Grid.Row="0" >
            <TextBlock FontWeight="Bold" 
                           TextDecorations="Underline" 
                           VerticalAlignment="Top"
                           TextWrapping="NoWrap"
                           FontSize="{StaticResource PhoneFontSizeMediumLarge}"
                           Foreground="{StaticResource PhoneAccentBrush}"
                           toolkit:TurnstileFeatherEffect.FeatheringIndex="1"/>

            <toolkit:PhoneTextBox AcceptsReturn="False" 
                                      TextWrapping="NoWrap" 
                                      Visibility="Collapsed" 
                                      TextChanged="SearchBox_TextChanged" 
                                      toolkit:TurnstileFeatherEffect.FeatheringIndex="1"/>

        </StackPanel>

        <toolkit:LongListMultiSelector Grid.Row="1"
                                           ItemsSource="{Binding Details_OC}" 
                                           SelectionChanged="Requests_SelectionChanged"
                                           toolkit:TurnstileFeatherEffect.FeatheringIndex="1"
                                           HorizontalAlignment="Stretch"
                                           VerticalAlignment="Stretch"
                                           Margin="0,0,24,0">
            <toolkit:LongListMultiSelector.ItemTemplate>
                <DataTemplate>
                    <Border BorderThickness="0.25" BorderBrush="{StaticResource PhoneAccentBrush}">
                        <Grid Background="{StaticResource TransparentBrush}" HorizontalAlignment="Stretch" >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="auto" />
                            </Grid.ColumnDefinitions>

                            <StackPanel Orientation="Horizontal"
                                            Grid.Row="0"
                                            Grid.Column="0" 
                                            HorizontalAlignment="Left" 
                                            VerticalAlignment="Top" >

                                <TextBlock Text="#" FontSize="{StaticResource PhoneFontSizeLarge}" />
                                <TextBlock x:Name="ID" 
                                               Text="{Binding ID}" 
                                               FontSize="{StaticResource PhoneFontSizeLarge}" 
                                               TextWrapping="NoWrap"/>
                            </StackPanel>

                            <TextBlock x:Name="date" 
                                           Text="{Binding Path=TIME, Converter={StaticResource dateConverter}}" 
                                           Grid.Row="0"
                                           Grid.Column="1" 
                                           HorizontalAlignment="Right" 
                                           VerticalAlignment="Top" 
                                           FontSize="{StaticResource PhoneFontSizeSmall}" 
                                           TextWrapping="NoWrap"/>

                        </Grid>
                    </Border>
                </DataTemplate>
            </toolkit:LongListMultiSelector.ItemTemplate>

        </toolkit:LongListMultiSelector>

    </Grid>
</phone:PivotItem>

---

The result appears as follows

You can see that the date Textblock is not appearing fully. I couldn't find the reason for this unexpected behavior. Please help.

Thank you.

Answer 1

The problem appears to be in the sizing of your columns. See the following, inside the <toolkit:LongListMultiSelector.ItemTemplate>:

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="*" />
  <ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>

In this case I would give the first column a static width and then the second can fill the remaining space. Like this:

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="200" />
  <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

Alternatively you may wish to take a look into the ItemInfoTemplate property of the LongListMultiSelector.

It gives you the ability to display a second column at the far right which does not get squashed over by the checkboxes when they become active.

An example can be found here.