如何在带有滚动的水平列表框中添加 Header

How to Add Header in horizontal Listbox with Scroll

我有一个简单的 Listbox,其中包含更多项目,我想在其上添加水平滚动并且它工作正常,但现在我想添加 header 并水平或垂直滚动​​以及何时我在垂直滚动,我的列表框 header 也在滚动。

如何停止在水平列表框中 header 上滚动?

 <ListBox Name="lst_PreEMISchedule" ScrollViewer.HorizontalScrollBarVisibility="Auto" 
          ScrollViewer.VerticalScrollBarVisibility="Visible" Background="White" 
          Margin="1,0,1,1" Visibility="Collapsed">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid Width="480" Background="White" Margin="0,0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="3*"/>
                    <ColumnDefinition Width="3*"/>
                    <ColumnDefinition Width="3*"/>                                        
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Row="0" FontWeight="SemiBold" FontSize="18"
                       Padding="50,15,0,15"Grid.Column="0" Foreground="#696969" 
                       Text="{Binding installmentNo}"/>
                <TextBlock Grid.Row="0" FontWeight="SemiBold" FontSize="18"
                       Padding="20,15,0,15" Grid.Column="1" Foreground="#696969" 
                       Text="{Binding dueDate}"/>
                <TextBlock Grid.Row="0" FontWeight="SemiBold" FontSize="18"
                       Padding="50,15,0,15" Grid.Column="2" Foreground="#696969" 
                       Text="{Binding preEMIAmount, StringFormat=\{0:n2\}}"/>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

使用 LongListSelector 控件内部的 Pivot 控件来自原生 windows phone 工具包

我试过如下

<Grid x:Name="LayoutRoot" Background="Black">

    <!--Pivot Control-->
    <phone:Pivot x:Name="pivotItem" Title="Demo">

        <!--Pivot item one -->
        <phone:PivotItem Header="item one" FontSize="10"  >
            <Grid>
                <phone:LongListSelector x:Name="llsItemOneList"
                                        Background="Transparent"
                                        LayoutMode="List"
                                        IsGroupingEnabled="True"
                                        HideEmptyGroups="true">
                    <phone:LongListSelector.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="3*"/>
                                    <ColumnDefinition Width="3*"/>
                                    <ColumnDefinition Width="3*"/>                                        
                                </Grid.ColumnDefinitions>
                                <TextBlock Grid.Row="0" FontWeight="SemiBold" 
                                           FontSize="18" Padding="50,15,0,15" 
                                           Grid.Column="0" Foreground="#696969"
                                           Text="{Binding installmentNo}"/>
                                <TextBlock Grid.Row="0" FontWeight="SemiBold" 
                                           FontSize="18" Padding="20,15,0,15" 
                                           Grid.Column="1" Foreground="#696969" 
                                           Text="{Binding dueDate}"/>
                                <TextBlock Grid.Row="0" FontWeight="SemiBold" 
                                           FontSize="18" Padding="50,15,0,15" 
                                           Grid.Column="2" Foreground="#696969" 
                                           Text="{Binding preEMIAmount, 
                                                  StringFormat=\{0:n2\}}"/>
                            </Grid>
                        </DataTemplate>
                    </phone:LongListSelector.ItemTemplate>
                </phone:LongListSelector>

            </Grid>
        </phone:PivotItem>

        <!--Pivot item two -->
        <phone:PivotItem Header="item two" FontSize="10">
            <Grid>
                <phone:LongListSelector x:Name="llsItemTwoList"
                                        Background="Transparent"
                                        LayoutMode="List"
                                        IsGroupingEnabled="False"
                                        HideEmptyGroups="true">
                    <phone:LongListSelector.ItemTemplate>
                        <DataTemplate>
                        </DataTemplate>
                    </phone:LongListSelector.ItemTemplate>
                </phone:LongListSelector>

            </Grid>
        </phone:PivotItem>

        <!--Pivot item three -->
        <phone:PivotItem Header="item three" FontSize="10" >
            <Grid>
                <phone:LongListSelector x:Name="llsItemThreeList" Opacity="0.9"
                                        Background="Transparent"
                                        LayoutMode="List"
                                        IsGroupingEnabled="False"
                                        HideEmptyGroups="true" >
                    <phone:LongListSelector.ItemTemplate>
                        <DataTemplate>
                        </DataTemplate>
                    </phone:LongListSelector.ItemTemplate>
                </phone:LongListSelector>

            </Grid>
        </phone:PivotItem>

        <!--Pivot item four -->
        <phone:PivotItem Header="item four" FontSize="10" x:Name="piFour">
            <Grid>
                <phone:LongListSelector x:Name="llsItemFourList" Opacity="0.9"
                                        Background="Transparent"
                                        LayoutMode="List"
                                        IsGroupingEnabled="False"
                                        HideEmptyGroups="true">
                    <phone:LongListSelector.ItemTemplate>
                        <DataTemplate>
                        </DataTemplate>
                    </phone:LongListSelector.ItemTemplate>
                </phone:LongListSelector>
            </Grid>
        </phone:PivotItem>

    </phone:Pivot>
</Grid>

我已经创建了我自己的答案并且它的工作很完美。下面是我正在使用的代码

<Grid Grid.Row="17" Name="grd_FOUR" Height="Auto" 
      Margin="12,-12,12,0" Visibility="Collapsed" 
      Background="White">
    <ScrollViewer HorizontalScrollBarVisibility = "Auto" 
                  ScrollViewer.VerticalScrollBarVisibility = "Disabled" 
                  Margin="0,0,0,0" Height="Auto" 
                  Name="imageScroll">
        <StackPanel>
            <Grid Width="Auto" Name="grd_FOUR_TWO" Visibility="Collapsed" 
                  Background="#F0F0F0" Margin="0,-5,0,0" 
                  ScrollViewer.VerticalScrollBarVisibility="Disabled">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Row="0" FontWeight="SemiBold" FontSize="20"
                           Padding="0,15,0,15" Width="200"
                           TextAlignment="Center" Grid.Column="0" Foreground="#333333"
                           Text="Financial Year"/>
                <TextBlock Grid.Row="0" FontWeight="SemiBold" FontSize="20"
                           Margin="-70,0,0,0" Padding="0,15,0,15" Width="150" 
                           TextWrapping="Wrap" TextAlignment="Center" Grid.Column="1" 
                           Foreground="#333333" Text="Interest Paid"/>
                <TextBlock Grid.Row="0" FontWeight="SemiBold" FontSize="20"
                           Padding="0,15,0,15" Width="150" Margin="-70,0,0,0"
                           TextAlignment="Center" Grid.Column="2" 
                           Foreground="#333333" Text="Principle Paid"/>
                <TextBlock Grid.Row="0" FontWeight="SemiBold" FontSize="20"
                           Padding="0,15,0,15" Width="150"  Margin="-70,0,0,0"
                           TextAlignment="Center" Grid.Column="3" Foreground="#333333" 
                           Text="Total Payment"/>
            </Grid>

            <Grid Width="Auto" Background="#F0F0F0" Margin="0,0">
                <ListBox Name="lst_Summery" 
                         ScrollViewer.VerticalScrollBarVisibility="Visible" 
                         Height="Auto" Background="#F0F0F0" Visibility="Collapsed">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Grid Width="Auto" Background="#F0F0F0">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <TextBlock Grid.Row="0" FontWeight="SemiBold" FontSize="18"
                                           Padding="60,15,0,15" TextAlignment="Center" 
                                           Grid.Column="0" Foreground="#696969"
                                           Text="{Binding financialYear}"/>
                                <TextBlock Grid.Row="0" FontWeight="SemiBold" FontSize="18"
                                           Margin="10,0,20,0" Padding="30,15,0,15" 
                                           Width="200" TextWrapping="Wrap"
                                           TextAlignment="Center" Grid.Column="1" 
                                           Foreground="#696969" 
                                           Text="{Binding intRecd, StringFormat=\{0:n2\}}"/>
                                <TextBlock Grid.Row="0" FontWeight="SemiBold" FontSize="18"
                                           Margin="-30,0,20,0" Padding="0,15,0,15" 
                                           Width="200" TextAlignment="Center" 
                                           Grid.Column="2" Foreground="#696969" 
                                           Text="{Binding princRecd, StringFormat=\{0:n2\}}"/>
                                <TextBlock Grid.Row="0" FontWeight="SemiBold" FontSize="18"
                                           Margin="-40,0,20,0"  Padding="0,15,0,15" 
                                           Width="200" TextAlignment="Center" 
                                           Grid.Column="3" Foreground="#696969" 
                                           Text="{Binding totalAmount, StringFormat=\{0:n2\}}"/>
                                <Border BorderBrush="#9C9C9C" Grid.Column="0"
                                        BorderThickness="0,1,0,0"/>
                                <Border BorderBrush="#9C9C9C" Grid.Column="1"
                                        BorderThickness="0,1,0,0"/>
                                <Border BorderBrush="#9C9C9C" Grid.Column="2"
                                        BorderThickness="0,1,0,0"/>
                                <Border BorderBrush="#9C9C9C" Grid.Column="3"
                                        BorderThickness="0,1,0,0"/>
                            </Grid>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </Grid>
        </StackPanel>
    </ScrollViewer>
</Grid>