Search code examples
c#-4.0windows-phone-8

How to Add Header in horizontal Listbox with Scroll


I have a simple Listbox with more items and I want to add horizontal scroll on it and its working fine but now I want to add header and the scroll it horizontal or vertical and when I am scrolling vertical my list box header is also scroll.

How can I stop scrolling on header in horizontal 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>

Solution

  • I have created my own answer and its working perfect. following code i am using

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