Add xaml to top of Listbox

Question

I have a listbox which is filled up with items taken from a data contract. I want to add a bit of xaml to the top of the listbox which takes data from another data contract. How do i go about doing this?

<phone:PivotItem>
    <ScrollViewer>
        <StackPanel>
            <ListBox x:Name="StatusCommentsList"
                Background="Transparent"
                ItemsSource="{Binding StatusComments}"
                u:ScrollViewerMonitor.AtEndCommand="{Binding FetchMoreStatusCommentsDataCommand}" VerticalContentAlignment="Top">

                <!-- THIS DOESNT WORK-->          

                <ListBoxItem>
                    <Grid Height="auto">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="67" />
                            <ColumnDefinition Width="389"/>
                        </Grid.ColumnDefinitions>
                        <StackPanel Height="auto" Grid.Column="0" Background="Transparent">
                            <Border Background="Transparent" BorderThickness="0" Width="62" Height="62" HorizontalAlignment="Left" Margin="0,0,0,5">
                                <Image Source="{Binding Notification.context.data.created_by.image.thumbnail_link}" Width="62" Height="62"></Image>
                            </Border>
                        </StackPanel>
                        <StackPanel Height="auto" Grid.Column="1" Width="389" MaxWidth="389" Orientation="Vertical" >
                            <TextBlock TextWrapping="Wrap" Text="{Binding Notification.context.data.created_by.name}" HorizontalAlignment="Stretch" FontSize="30" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" Width="389" MaxWidth="389" />
                            <TextBlock TextWrapping="Wrap" Text="{Binding Notification.context.data.created_on}" HorizontalAlignment="Stretch" FontSize="30" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" Width="389" MaxWidth="389" />
                            <TextBlock TextWrapping="Wrap" Text="{Binding Notification.context.data.rich_value}" HorizontalAlignment="Stretch" FontSize="30" VerticalAlignment="Top" Margin="0,0,0,5" Foreground="White" Width="389" MaxWidth="389" />
                        </StackPanel>
                    </Grid>
                </ListBoxItem>

                <!-- /THIS DOESNT WORK -->

                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel VerticalAlignment="Top" Margin="5,0,0,0">
                            <Button Style="{StaticResource JamesTransparentButton}" Padding="-5,0,-5,-5" Margin="-7,-12,-7,-7" Height="auto" BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Left" UseLayoutRounding="True" FontSize="0.01">
                                <Grid Height="auto">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="67" />
                                        <ColumnDefinition Width="389"/>
                                    </Grid.ColumnDefinitions>
                                    <StackPanel Height="auto" Grid.Column="0" Background="Transparent">
                                        <Border Background="Transparent" BorderThickness="0" Width="62" Height="62" HorizontalAlignment="Left" Margin="0,0,0,5">
                                            <Image Source="{Binding created_by.image.thumbnail_link}" Width="62" Height="62"></Image>
                                        </Border>
                                    </StackPanel>
                                    <StackPanel Height="auto" Grid.Column="1" Width="389" MaxWidth="389" Orientation="Vertical" >
                                        <TextBlock Text="{Binding created_by.name}" FontSize="30" VerticalAlignment="Top" Margin="0,0,0,5" Foreground="White" />
                                        <TextBlock Text="{Binding created_on}" FontSize="30" VerticalAlignment="Top" Margin="0,0,0,5" Foreground="White" />
                                        <TextBlock TextWrapping="Wrap" Text="{Binding value}" HorizontalAlignment="Stretch" FontSize="30" VerticalAlignment="Top" Margin="0,0,0,5" Foreground="White" Width="389" MaxWidth="389" />
                                    </StackPanel>
                                </Grid>
                            </Button>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </StackPanel>
    </ScrollViewer>
</phone:PivotItem>

I tried just adding a new item to the listbox but the data contract would mean i have to instantiate all the sub levels of objects and it would suckkk as they are different domains.

Keep in mind that i want the entire screen to scroll in union... so that it looks like one big long list, regardless of the first being like a default value.

Answer 1

Put the first item outside the ListBox and disable ScrollViewer for the ListBox so the whole thing will scroll together. Here's an example where the item is a simple TextBlock. You can change it to suit your requirement.

<ScrollViewer>
       <StackPanel Orientation="Vertical">
                <TextBlock Text="Item 1"/>
                <ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding item}"/>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                 </ListBox>
        </StackPanel>
</ScrollViewer>