如何在带有滚动的水平列表框中添加 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>
我有一个简单的 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>