如何使用Scroll在水平列表框中添加标题

时间:2016-08-09 12:01:51

标签: c#-4.0 windows-phone-8

我有一个简单的Listbox包含更多项目,我想在其上添加水平滚动并且工作正常但现在我想添加标题并将其滚动为水平或垂直,当我滚动垂直时我的列表框标题也是滚动的。

如何停止在水平列表框中滚动标题?

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

2 个答案:

答案 0 :(得分:0)

使用来自原生Windows Phone工具包的LongListSelector控件内的Pivot控件

我试过如下

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

答案 1 :(得分:0)

我创造了自己的答案,并且完美无缺。以下代码我正在使用

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