ScrollViewer/StackPanel 构造中的 DataBound ListBox 和 Button，Button 出现在 ListBox 内容的末尾下方

Question

我有以下构造，它在 StackPanel 中显示了一个 DataBound ListBox 和一个 Button，它再次放置在 ScrollViewer 中：

    <ScrollViewer VerticalScrollBarVisibility="Visible"
                  Height="400">
        <StackPanel Orientation="Vertical"
                    MaxHeight="400">
            <ListBox x:Name="LbTelEntries"
                     SelectionChanged="LbTelEntries_SelectionChanged"
                     MaxHeight="340"
                     VerticalAlignment="Top"
                     ItemsSource="{Binding Path=TelItems}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Templates:ListBoxItemTemplateSelector Content="{Binding}" />
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
            <Button x:Name="BtMoreTelEntries"
                    Content="More Results"
                    Click="BtMoreTelEntries_Click"
                    Visibility="{Binding Path=NumberRemainingResults, Converter={StaticResource NullToVisConverter}}"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Bottom"
                    Height="70"
                    Width="410"
                    Margin="0 0 0 0"
                    ></Button>
        </StackPanel>
    </ScrollViewer>

我的问题是，Button 应该只在 ListBox 滚动到末尾时出现。单击 Button 后，会交换 ListBox 的内容，并且 Button 应该再次移动到 ListBox 的末尾...

我将如何做到这一点？

编辑： 我应该提一下，我也在实现一个 ItemTemplate。见下文：

<DataTemplate x:Key="ListBoxItemVmTemplate">
    <Grid DataContext="{Binding}">
        <StackPanel Orientation="Horizontal">
            <Border x:Name="UpperListBoxTemplateBorder"
                    Height="42"
                    Width="44"
                    BorderBrush="White"
                    BorderThickness="2.5"
                    CornerRadius="100"
                    Margin="10,16,0,0"
                    VerticalAlignment="Top">
                <Path x:Name="DataTemplatePath"
                      Height="16"
                      Width="11"
                      Fill="White"
                      Stretch="Fill"
                      Margin="4,0,0,0"
                      HorizontalAlignment="Center"
                      VerticalAlignment="Center"
                      UseLayoutRounding="False"
                      Data="M337.59924,129.61948 L337.59924,141.51501 L345.5704,135.87381 z" />
            </Border>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="40"></RowDefinition>
                    <RowDefinition Height="22"></RowDefinition>
                </Grid.RowDefinitions>
                <StackPanel Orientation="Horizontal"
                            Grid.Row="0">
                    <Controls:EllipsisTextBlock Text="{Binding DataModel.Title}"
                                                MaxWidth="410"
                                                Margin="18 12 0 0" />
                </StackPanel>
                <StackPanel Orientation="Horizontal"
                            Grid.Row="1">
                    <Controls:EllipsisTextBlock Text="{Binding DataModel.Street}"
                                                FontSize="16"
                                                MaxWidth="410"
                                                Margin="18 -3 0 0" />
                    <Controls:EllipsisTextBlock Text="{Binding DataModel.ZipCode}"
                                                FontSize="16"
                                                MaxWidth="410"
                                                Margin="18 -3 0 0" />
                    <Controls:EllipsisTextBlock Text="{Binding DataModel.City}"
                                                FontSize="16"
                                                MaxWidth="410"
                                                Margin="18 -3 0 0" />
                </StackPanel>
            </Grid>
        </StackPanel>
    </Grid>
</DataTemplate>

Answer 1

http://blog.slimcode.com/2010/09/11/detect-when-a-listbox-scrolls-to-its-end-wp7/http://blog.slimcode.com/2010/09/11/detect-when-a-listbox-scrolls-to-its-end-wp7/ 有一篇关于检测列表中最后一项何时滚动查看的博文

您可以使用这种技术将您的按钮动态添加到屏幕上吗？ 如果需要，您可以在列表滚动时再次删除它。

只是一个想法。

Answer 2

我不完全理解您的问题，但我可以看出这是错误的，您将堆栈面板放在滚动查看器中，但您使用了很多固定（最大）高度，因此滚动查看器不再有意义。

尝试从 Stackpanel 和列表框中删除 height 属性，看看它是否符合您的要求。

Answer 3

似乎无法实现我的想法。目前的解决方案是这样的：

<ScrollViewer VerticalScrollBarVisibility="Visible">
    <StackPanel Orientation="Vertical">
        <ListBox x:Name="LbTelEntries"
                 SelectionChanged="LbTelEntries_SelectionChanged"
                 MaxHeight="340"
                 VerticalAlignment="Top"
                 ItemsSource="{Binding Path=TelItems}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Templates:ListBoxItemTemplateSelector Content="{Binding}" />
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <Button x:Name="BtMoreTelEntries"
                Content="More Results"
                Click="BtMoreTelEntries_Click"
                Visibility="{Binding Path=NumberRemainingResults, Converter={StaticResource NullToVisConverter}}"
                HorizontalAlignment="Center"
                VerticalAlignment="Bottom"
                Height="70"
                Width="410"
                Margin="0 0 0 0"
                ></Button>
    </StackPanel>
</ScrollViewer>

这样，我就可以永久看到 ListBox 下方的 Button。单击 Button 后，将扩展 ListBox 的内容。据我所知，没有办法检查 ListBox 是否滚动到末尾...

Answer 4

Baba 演示了在 ListBox 控件模板中使用 ItemsPresenter 和 Button 来完成此答案中列表末尾的“更多”按钮：

http://social.msdn.microsoft.com/Forums/en-US/windowsphone7series/thread/cdf2716d-0ceb-4c03-9e26-cbe9f53328d8

Answer 5

您应该删除 ListBox 的template 中隐式使用的 ScrollViewer，如下所示：

<ListBox ...>
    <ListBox.Template>
        <ControlTemplate>
            <ItemsPresenter/>
        </ControlTemplate>
    </ListBox.Template>
    ...
</ListBox>

这将使 ListBox 控件达到显示其所有元素所需的高度，在 ListBox 的最后一项之后按下按钮。

请注意，如果列表中有很多项目，这可能会影响应用程序的性能。

按照 Wouter 的建议，您还应该从 StackPanel 和 ListBox 中删除 MaxHeight 属性，因为您想要的唯一高度约束是顶级 ScrollViewer 上的那个。