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.