DataBound ListBox und Button innerhalb eines ScrollViewer/StackPanel-Konstrukts, wobei der Button unter dem Ende des ListBox-Inhalts erscheint

Question

Ich habe das folgende Konstrukt, das eine DataBound ListBox und eine Schaltfläche innerhalb eines StackPanels zeigt, das wiederum innerhalb eines ScrollViewers platziert ist:

    <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>

Mein Problem ist, dass der Button erst erscheinen soll, wenn die ListBox bis zum Ende gescrollt ist. Sobald der Button angeklickt wird, wird der Inhalt der ListBox ausgetauscht und der Button soll wieder an das Ende der ListBox wandern...

Wie würde ich dies erreichen?

EDIT: Ich sollte erwähnen, dass ich auch ein ItemTemplate implementiere. Siehe unten:

<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

Es gibt einen Blog-Beitrag über die Erkennung, wann das letzte Element in einer Liste zur Ansicht gescrollt wird, unter http://blog.slimcode.com/2010/09/11/detect-when-a-listbox-scrolls-to-its-end-wp7/

Können Sie diese Technik verwenden, um Ihre Schaltfläche dynamisch auf dem Bildschirm einzufügen? Bei Bedarf können Sie sie wieder entfernen, wenn die Liste gescrollt wird.

Nur ein Gedanke.

Answer 2

Ich verstehe Ihre Frage nicht ganz, aber was ich sehen kann, ist, dass Sie ein Stackpanel in einen Scrollviewer setzen, aber Sie verwenden zu viele feste (max) Höhen, so dass der Scrollviewer keinen Sinn mehr hat.

Versuchen Sie es, indem Sie die Eigenschaft Höhe aus dem Stackpanel und der Listbox entfernen, um zu sehen, ob es das tut, was Sie möchten.

Answer 3

Es scheint, dass es nicht möglich ist, das zu erreichen, was ich mir vorgestellt habe. Aktuelle Lösung ist dies:

<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>

Damit sehe ich permanent die Schaltfläche unter der ListBox. Sobald der Button angeklickt wird, wird der Inhalt der ListBox erweitert. Soweit ich das beurteilen kann, gibt es keine Möglichkeit zu überprüfen, ob die ListBox bis zum Ende gescrollt wurde oder nicht...

Answer 4

Sie sollten den ScrollViewer entfernen, der implizit in der ListBox verwendet wird Vorlage wie folgt:

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

Dadurch wird das ListBox-Steuerelement so groß wie nötig, um alle seine Elemente anzuzeigen, und die Schaltfläche wird nach dem letzten Element der ListBox gedrückt.

Beachten Sie, dass dies die Leistung Ihrer Anwendung beeinträchtigen kann, wenn die Liste sehr viele Einträge enthält.

Wie von Wouter vorgeschlagen, sollten Sie auch die MaxHeight-Eigenschaften aus dem StackPanel und der ListBox entfernen, da die einzige Höhenbeschränkung, die Sie wollen, die des ScrollViewers auf oberster Ebene ist.

Answer 5

Baba demonstriert in dieser Antwort die Verwendung von ItemsPresenter und Button in einer ListBox-Steuervorlage, um eine Schaltfläche "More" am Ende der Liste zu erstellen:

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