Silverlight/WP7：我想在数据绑定的 Listbox 元素之后放置一个 Button

Question

我对 Silverlight 还很陌生。我正在windows phone平台上开发。 我想在列表框条目的末尾放置一个按钮，该按钮将绑定到来自网络服务的数据（我正在使用列表框模板）

• 列表项 1
• 列表项 2
• 列表项 3
• 列表项 4
• 列表项 5
• 列表项 6
• 列表项 7
• 列表项 8
• ..按钮..

我尝试了许多使用网格/堆栈面板等来托管按钮的方法，并且我的所有解决方案都将按钮放置在我的屏幕底部，而不是所有可能跨越多个屏幕的列表框条目的底部。

我拥有的 XAML 文件如下。我想在“LBoxItems”下方添加一个按钮

<Grid x:Name="LayoutRoot"
      Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid  x:Name="ads" >
        <!--TitlePanel contains the name of the application and page title-->
    <StackPanel Margin="24,24,0,12"
                x:Name="SearchTitle">
        <StackPanel Orientation="Horizontal">
            <TextBlock FontWeight="Bold"
                       FontSize="{StaticResource PhoneFontSizeLarge}"
                       Text="{Binding Location}" />
            <TextBlock FontSize="{StaticResource PhoneFontSizeLarge}"
                       Text=" > " />
            <TextBlock FontWeight="Bold"
                       FontSize="{StaticResource PhoneFontSizeLarge}"
                       Text="{Binding Category}" />
        </StackPanel>
        <TextBlock FontSize="{StaticResource PhoneFontSizeMedium}"
                   Text="{Binding Converter={StaticResource SearchHistoryItemSubTitleConverter}}" />
        </StackPanel>   

    </Grid>
    <!--ContentPanel - place additional content here-->

    <Grid x:Name="ContentGrid"
          Grid.Row="2">            
            <ListBox x:Name="LBoxItems"
                 HorizontalAlignment="Left"
                 Margin="24, 0"
                 SelectionChanged="LBoxItems_SelectionChanged">
                <ListBox.ItemTemplate>
                    <DataTemplate>

                        <StackPanel Margin="{StaticResource PhoneTouchTargetOverhang}" >
                            <TextBlock FontSize="{StaticResource PhoneFontSizeMediumLarge}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Foreground="{StaticResource PhoneAccentBrush}"                                        
                                   Text="{Binding Title.Text}" TextWrapping="Wrap" Margin="-4,20,0,0">
                            </TextBlock>
                            <TextBlock Text="{Binding PublishDate, Converter={StaticResource ItemPublishDateConverter}}" />

                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>             
    </Grid>

    <l:SpinnerControl x:Name="SpinnerControl"
                      Width="55"
                      Height="55"
                      Grid.RowSpan="2" />

    <TextBlock x:Name="TxtNoResultsMessage"
               FontSize="{StaticResource PhoneFontSizeLarge}"
               Text="No results found"
               VerticalAlignment="Center"
               HorizontalAlignment="Center"
               Grid.RowSpan="2"
               Visibility="Collapsed" />
</Grid>

Answer 1

你可以使用ScrollViewer:

<ScrollViewer>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="800"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
            </Grid.RowDefinitions>

            <ListBox Grid.Row="0">

            </ListBox>

            <Button Grid.Row="1" Height="30" Content="Test"></Button>
        </Grid>
</ScrollViewer>

简单地将Grid里面分成两行，第二行用于Button。

对于您的具体情况，它将是：

<Grid x:Name="ContentGrid"
          Grid.Row="2">    
        <ScrollViewer>
          <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="600"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
            </Grid.RowDefinitions>

            <ListBox x:Name="LBoxItems"
                 HorizontalAlignment="Left"
                 Margin="24, 0"
                 SelectionChanged="LBoxItems_SelectionChanged" Grid.Row="0">
                <ListBox.ItemTemplate>
                    <DataTemplate>

                        <StackPanel Margin="{StaticResource PhoneTouchTargetOverhang}" >
                            <TextBlock FontSize="{StaticResource PhoneFontSizeMediumLarge}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Foreground="{StaticResource PhoneAccentBrush}"                                        
                                   Text="{Binding Title.Text}" TextWrapping="Wrap" Margin="-4,20,0,0">
                            </TextBlock>
                            <TextBlock Text="{Binding PublishDate, Converter={StaticResource ItemPublishDateConverter}}" />

                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox> 
            <Button Content="Sample" Height="30" Grid.Row="1" />
          </Grid>     
        </ScrollViewer>       
    </Grid>

当然，你可以根据自己的情况设置合适的高度。

Answer 2

您想要做的，实际上是在 DataTemplate 中混合和匹配不同的项目。如果您对其他解决方案的工作方式不太满意，我可能会考虑向数据模板添加一个按钮，但将其可见性设置为折叠。然后对于最后一个条目，将其可见性设置为可见。

无论哪种方式，您都会遇到一些麻烦，但是这样按钮就在您的列表框中。如果所有按钮事件都指向同一个处理程序，并且只有一个是可见的，那么您应该很高兴。

Answer 3

我遇到了同样的问题并尝试使用 ScrollViewer 方法，但是在禁用列表框上的垂直滚动条之前，我无法摆脱“卡住滚动”问题。也许这对其他人也有帮助。