Adding searchBox to pivot application

[quanlich]

Hi,

I have a problem with adding a Search - textbox in writing a pivot app.
You can see in the image below, I can not scroll items after adding a textbox to the pivot.



The code .xaml for the second case:

<phone:PivotItem Header="Tất cả"
                             >
                <ScrollViewer>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="80" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <ListBox Margin="0,0,-12,0"
                                 x:Name="list1"
                                 ItemsSource="{Binding AllSongs.Items}"
                                 ItemTemplate="{StaticResource ListTitleTemplate}"
                                 Grid.Row="1">
                        </ListBox>
                        <toolkit:PhoneTextBox Hint="Search"
                                              TextChanged="SearchBox_TextChanged"
                                              Name="SearchBox"
                                              Grid.Row="0" />
                    </Grid>
                </ScrollViewer>
                

            </phone:PivotItem>

I tried StackPanel and Grid but they weren't better. Could you please give me some solutions?

Thanks in advance.

 

[Catholic Tech Geek]

Your problem is with the row definitions. Stick with the Grid and you don't need the ScrollViewer. For what you want, instead of "auto", you want to use "*" instead. The "*" symbol tells the XAML parser to stretch the component to fill the remaining space after all items with a value of "auto" or a fixed value.

<phone:PivotItem Header="Tất cả">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="80" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <toolkit:PhoneTextBox Hint="Search"
                                TextChanged="SearchBox_TextChanged"
                                Name="SearchBox"
                                Grid.Row="0" />
        <ListBox Margin="0,0,-12,0"
                                x:Name="list1"
                                ItemsSource="{Binding AllSongs.Items}"
                                ItemTemplate="{StaticResource ListTitleTemplate}"
                                Grid.Row="1">
        </ListBox>
    </Grid>
</phone:PivotItem>

I hope this helps. In my solution, notice that I switched the order of the PhoneTextBox and the ListBox. I didn't have to, but I find that it's better organization if you put your XAML in full visual order (as in the order you would see everything if everything was visible at one time).