DataBound ListBox и Button внутри конструкции ScrollViewer / StackPanel, причем Button отображается под концом содержимого ListBox

Question

У меня есть следующая конструкция, которая показывает DataBound ListBox и кнопку внутри StackPanel, которая снова помещается внутри 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>

Моя проблема в том, что кнопка должна появляться только тогда, когда ListBox прокручивается до конца. Как только кнопка нажата, содержимое ListBox заменяется, и кнопка должна снова переместиться в конец ListBox ...

Как бы мне этого добиться?

EDIT: Я должен отметить, что я также реализую 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/

Не могли бы вы использовать эту технику для динамического добавления вашей кнопки на экран?При необходимости вы можете удалить его снова при прокрутке списка.

Просто мысль.

Answer 2

Баба демонстрирует использование ItemsPresenter и Button в шаблоне элемента управления ListBox для выполнения кнопки «Еще» в конце списка в этом ответе:

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

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 расширяется.Насколько я могу судить, нет способа проверить, прокрутил ли ListBox до конца или нет ...

Answer 4

Вы должны удалить ScrollViewer, который неявно используется в шаблоне ListBox , следующим образом:

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

Это сделает элемент управления ListBox настолько высоким, насколько необходимо для отображения всех его элементов, нажав кнопку после последнего элемента ListBox.

Обратите внимание, что это может повлиять на производительность вашего приложения, если в списке много элементов.

В соответствии с предложением Wouter, вы также должны удалить свойства MaxHeight из StackPanel и ListBox, поскольку единственное ограничение по высоте - это ограничение ScrollViewer верхнего уровня.

Answer 5

Я не до конца понимаю ваш вопрос, но я вижу, что неправильно то, что вы помещаете панель стека в средство просмотра прокрутки, но вы используете много фиксированных (макс.) Высот, поэтому средство просмотра прокрутки больше не имеет смысла.

Попробуйте, удалив свойство height из панели стека и списка, чтобы увидеть, выполняет ли оно то, что вам нужно.