如何在Windows Phone 8中列出所有项目之后添加NEXT和PREVIOUS按钮

时间:2013-07-02 05:36:52

标签: xaml listbox windows-phone-8 next

在我的Windows Phone 8应用程序中,我在列表框中显示结果。每次我只显示列表中的20个项目。

现在显示我要添加NEXT按钮的下20个项目,并显示我想要添加PREVIOUS按钮的旧项目。

下面是我的代码块。在这里我使用另一个列表框内的列表框来显示列表后面的按钮。但列表不滚动。

<Grid x:Name="ContentPanel" Grid.Row="3" Background="White" Margin="0,-3,0,0">
        <ListBox x:Name="outerList">
            <ScrollViewer Margin="0,0,0,0">
                <ListBox x:Name="companiesList"  SelectionChanged="companiesList_SelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Auto">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Grid x:Name="listItem">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="50"/>
                                    <RowDefinition Height="30"/>
                                    <RowDefinition Height="30"/>
                                    <RowDefinition Height="10"/>
                                </Grid.RowDefinitions>

                                <StackPanel x:Name="namePanel" Grid.Row="0" Orientation="Horizontal" Margin="5,0,0,5" Height="50">
                                    <TextBlock x:Name="nameTextBlock" Text="{Binding CompanyName}" Foreground="#FF501F6E" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" FontSize="28" MaxHeight="40" TextTrimming="WordEllipsis" Margin="0,0,0,0" Width="460" FontWeight="Bold"/>
                                </StackPanel>

                                <StackPanel x:Name="addressPanel" Grid.Row="1" Orientation="Horizontal" Margin="5,0,0,5" Height="30">
                                    <TextBlock x:Name="addressTextBlock"  Text="{Binding Address}" Foreground="#FF1F1F1F" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" FontSize="20" MaxHeight="30" TextTrimming="WordEllipsis" Margin="0,0,0,0" Width="460"/>
                                </StackPanel>

                                <StackPanel x:Name="phonePanel" Grid.Row="2" Orientation="Horizontal" Margin="5,0,0,0" Height="30">
                                    <Image x:Name="phone" Stretch="Uniform" Margin="0,0,0,0" Height="25" Source="Images/list_phone.png"  />
                                    <TextBlock x:Name="phoneTextBlock" Text="{Binding Phone1}" Foreground="#FF501F6E" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" FontSize="20" MaxHeight="30" TextTrimming="WordEllipsis" Width="460"/>
                                </StackPanel>

                                <Image  x:Name="line" Grid.Row="3" Width="460" HorizontalAlignment="Center" Source="Images/separator.png"  />
                            </Grid>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </ScrollViewer>
            <StackPanel Height="50" Orientation="Horizontal">
                <Button Content="Previous" Height="70" HorizontalAlignment="Left" Margin="-5,1,0,0" Name="prevbutton" VerticalAlignment="Center" Width="160" Foreground="#FF501F6E">
                    <Button.Background>
                        <ImageBrush Stretch="Fill" ImageSource="Images/blank_button_nav.png"/>
                    </Button.Background>
                </Button>
                <Button Content="Next" Height="70" HorizontalAlignment="Left" Margin="170,1,0,0" Name="nextbutton" VerticalAlignment="Center" Width="160" Foreground="#FF501F6E">
                    <Button.Background>
                        <ImageBrush Stretch="Fill" ImageSource="Images/blank_button_nav.png"/>
                    </Button.Background>
                </Button>
            </StackPanel>
        </ListBox>
    </Grid>

你能帮我解决一下如何在可滚动的列表框中添加按钮。

1 个答案:

答案 0 :(得分:0)

您可以将ListBox放在另一个ListBox中,其中的项目是结果ListBox和按钮,例如:

<Grid x:Name="ContentPanel" Grid.Row="3" Background="White" Margin="0,-3,0,0">
    <ListBox x:Name="outerList">
            <ListBox x:Name="companiesList" Height="{Binding ActualHeight, ElementName=ContentPanel}"  SelectionChanged="companiesList_SelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Auto">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Grid x:Name="listItem">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="50"/>
                                <RowDefinition Height="30"/>
                                <RowDefinition Height="30"/>
                                <RowDefinition Height="10"/>
                            </Grid.RowDefinitions>

                            <StackPanel x:Name="namePanel" Grid.Row="0" Orientation="Horizontal" Margin="5,0,0,5" Height="50">
                                <TextBlock x:Name="nameTextBlock" Text="{Binding CompanyName}" Foreground="#FF501F6E" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" FontSize="28" MaxHeight="40" TextTrimming="WordEllipsis" Margin="0,0,0,0" Width="460" FontWeight="Bold"/>
                            </StackPanel>

                            <StackPanel x:Name="addressPanel" Grid.Row="1" Orientation="Horizontal" Margin="5,0,0,5" Height="30">
                                <TextBlock x:Name="addressTextBlock"  Text="{Binding Address}" Foreground="#FF1F1F1F" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" FontSize="20" MaxHeight="30" TextTrimming="WordEllipsis" Margin="0,0,0,0" Width="460"/>
                            </StackPanel>

                            <StackPanel x:Name="phonePanel" Grid.Row="2" Orientation="Horizontal" Margin="5,0,0,0" Height="30">
                                <Image x:Name="phone" Stretch="Uniform" Margin="0,0,0,0" Height="25" Source="Images/list_phone.png"  />
                                <TextBlock x:Name="phoneTextBlock" Text="{Binding Phone1}" Foreground="#FF501F6E" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" FontSize="20" MaxHeight="30" TextTrimming="WordEllipsis" Width="460"/>
                            </StackPanel>

                            <Image  x:Name="line" Grid.Row="3" Width="460" HorizontalAlignment="Center" Source="Images/separator.png"  />
                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        <StackPanel Height="50" Orientation="Horizontal">
            <Button Content="Previous" Height="70" HorizontalAlignment="Left" Margin="-5,1,0,0" Name="prevbutton" VerticalAlignment="Center" Width="160" Foreground="#FF501F6E">
                <Button.Background>
                    <ImageBrush Stretch="Fill" ImageSource="Images/blank_button_nav.png"/>
                </Button.Background>
            </Button>
            <Button Content="Next" Height="70" HorizontalAlignment="Left" Margin="170,1,0,0" Name="nextbutton" VerticalAlignment="Center" Width="160" Foreground="#FF501F6E">
                <Button.Background>
                    <ImageBrush Stretch="Fill" ImageSource="Images/blank_button_nav.png"/>
                </Button.Background>
            </Button>
        </StackPanel>
    </ListBox>
</Grid>

点击按钮时,您可以修改内部ListBox的内容: