Silverlight/WP7: I want to place an Button after the Listbox element which are data bound

Question

I am fairly new to silverlight. I am developing on the windows phone platform. I want to place a button at the end of the listbox entries which will be bound to data from the webservice (I am using a listbox template)

• List item 1
• List item 2
• List item 3
• List item 4
• List item 5
• List item 6
• List item 7
• List item 8
• ..Button..

I tried number of things of using grid/stackpanel etc to host the button and all my solutions place the button at the bottom of my screen instead of bottom of all the listbox entries which might span multiple screens.

XAML file I have is below. I want to add a button below the "LBoxItems"

<Grid x:Name="LayoutRoot"
      Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid  x:Name="ads" >
        <!--TitlePanel contains the name of the application and page title-->
    <StackPanel Margin="24,24,0,12"
                x:Name="SearchTitle">
        <StackPanel Orientation="Horizontal">
            <TextBlock FontWeight="Bold"
                       FontSize="{StaticResource PhoneFontSizeLarge}"
                       Text="{Binding Location}" />
            <TextBlock FontSize="{StaticResource PhoneFontSizeLarge}"
                       Text=" > " />
            <TextBlock FontWeight="Bold"
                       FontSize="{StaticResource PhoneFontSizeLarge}"
                       Text="{Binding Category}" />
        </StackPanel>
        <TextBlock FontSize="{StaticResource PhoneFontSizeMedium}"
                   Text="{Binding Converter={StaticResource SearchHistoryItemSubTitleConverter}}" />
        </StackPanel>   

    </Grid>
    <!--ContentPanel - place additional content here-->

    <Grid x:Name="ContentGrid"
          Grid.Row="2">            
            <ListBox x:Name="LBoxItems"
                 HorizontalAlignment="Left"
                 Margin="24, 0"
                 SelectionChanged="LBoxItems_SelectionChanged">
                <ListBox.ItemTemplate>
                    <DataTemplate>

                        <StackPanel Margin="{StaticResource PhoneTouchTargetOverhang}" >
                            <TextBlock FontSize="{StaticResource PhoneFontSizeMediumLarge}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Foreground="{StaticResource PhoneAccentBrush}"                                        
                                   Text="{Binding Title.Text}" TextWrapping="Wrap" Margin="-4,20,0,0">
                            </TextBlock>
                            <TextBlock Text="{Binding PublishDate, Converter={StaticResource ItemPublishDateConverter}}" />

                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>             
    </Grid>

    <l:SpinnerControl x:Name="SpinnerControl"
                      Width="55"
                      Height="55"
                      Grid.RowSpan="2" />

    <TextBlock x:Name="TxtNoResultsMessage"
               FontSize="{StaticResource PhoneFontSizeLarge}"
               Text="No results found"
               VerticalAlignment="Center"
               HorizontalAlignment="Center"
               Grid.RowSpan="2"
               Visibility="Collapsed" />
</Grid>

Answer 1

You could use a ScrollViewer:

<ScrollViewer>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="800"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
            </Grid.RowDefinitions>

            <ListBox Grid.Row="0">

            </ListBox>

            <Button Grid.Row="1" Height="30" Content="Test"></Button>
        </Grid>
</ScrollViewer>

Simply divide the Grid inside into two rows, the second one being for the Button.

For your specific case it would be:

<Grid x:Name="ContentGrid"
          Grid.Row="2">    
        <ScrollViewer>
          <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="600"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
            </Grid.RowDefinitions>

            <ListBox x:Name="LBoxItems"
                 HorizontalAlignment="Left"
                 Margin="24, 0"
                 SelectionChanged="LBoxItems_SelectionChanged" Grid.Row="0">
                <ListBox.ItemTemplate>
                    <DataTemplate>

                        <StackPanel Margin="{StaticResource PhoneTouchTargetOverhang}" >
                            <TextBlock FontSize="{StaticResource PhoneFontSizeMediumLarge}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Foreground="{StaticResource PhoneAccentBrush}"                                        
                                   Text="{Binding Title.Text}" TextWrapping="Wrap" Margin="-4,20,0,0">
                            </TextBlock>
                            <TextBlock Text="{Binding PublishDate, Converter={StaticResource ItemPublishDateConverter}}" />

                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox> 
            <Button Content="Sample" Height="30" Grid.Row="1" />
          </Grid>     
        </ScrollViewer>       
    </Grid>

Of course, you can set the appropriate height depending on your situation.

Answer 2

What you want to do, really is to mix and match different items in the DataTemplate. If you're not really happy with how the other solutions work out I might consider adding a button to the datatemplate, but set its visibility to collapsed. Then for the very last entry, set its visibility to visible.

Either way you are in for a bit of a hack, but this way the button is in your list box. If all the button events point to the same handler, and only one is visible, you should be good to go.