How to make a grid column scroll horizontally in metro apps?

Question

I have a Grid column and I have a list view in it. I am populating it from a form which is found in a another column. The values entered in the form gets saved to a list. I want that list displayed in the list view. When the text entered in the form increases the remaining values gets disappeared. I want that column to scroll horizontally so the values don't get disappeared.

This is what I have tried so far..

<Grid Grid.Column="2" Margin="0,0,46,10" ScrollViewer.HorizontalScrollBarVisibility="Visible">
                <ScrollViewer HorizontalScrollMode="Auto"  HorizontalScrollBarVisibility="Auto" VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Hidden" Margin="0,0,-60,10">
                <ListView x:Name="lsvLessons" IsItemClickEnabled="True" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Auto" BorderThickness="1" SelectionMode="Multiple" ItemsSource="{Binding Source={StaticResource cvsLessons}}" Margin="7,0,62,0">
                    <ListView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapGrid Orientation="Vertical" HorizontalChildrenAlignment="left"/>
                        </ItemsPanelTemplate>
                    </ListView.ItemsPanel>
                    <ListView.ItemContainerStyle>
                        <Style TargetType="ListViewItem">
                            <Setter Property="Padding" Value="0"/>
                            <Setter Property="Margin" Value="-12"/>
                        </Style>
                    </ListView.ItemContainerStyle>
                    <ListView.ItemTemplate>
                        <DataTemplate >
                            <StackPanel Orientation="Horizontal" Width="375" Height="20" Background="Transparent" HorizontalAlignment="Left">
                                <StackPanel Width="230" VerticalAlignment="Center" Margin="15,5,0,0">
                                    <TextBlock Text="{Binding Name}" Foreground="white" FontSize="14" Margin="0,3,0,0" FontWeight="Normal"  VerticalAlignment="Center" HorizontalAlignment="Left"/>
                                </StackPanel>
                            </StackPanel>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
                </ScrollViewer>
            </Grid> 

Someone please help me do this.

Any kind of help is appreciated....

Answer 1

Have you tried to do that w/o the ScrollViewer Control? and Enable the horizontal scroll mode?

Try this:

<Grid Grid.Column="2" Margin="0,0,46,10" ScrollViewer.HorizontalScrollBarVisibility="Visible">
                           <ListView x:Name="lsvLessons" IsItemClickEnabled="True" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Auto" BorderThickness="1" SelectionMode="Multiple" ItemsSource="{Binding Source={StaticResource cvsLessons}}" Margin="7,0,62,0"  ScrollViewer.HorizontalScrollMode="Enabled"   >
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapGrid Orientation="Vertical" HorizontalChildrenAlignment="left"/>
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="Padding" Value="0"/>
                        <Setter Property="Margin" Value="-12"/>
                    </Style>
                </ListView.ItemContainerStyle>
                <ListView.ItemTemplate>
                    <DataTemplate >
                        <StackPanel Orientation="Horizontal" Width="375" Height="20" Background="Transparent" HorizontalAlignment="Left">
                            <StackPanel Width="230" VerticalAlignment="Center" Margin="15,5,0,0">
                                <TextBlock Text="{Binding Name}" Foreground="white" FontSize="14" Margin="0,3,0,0" FontWeight="Normal"  VerticalAlignment="Center" HorizontalAlignment="Left"/>
                            </StackPanel>
                        </StackPanel>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

        </Grid>  

Adding ScrollViewer.HorizontalScrollMode="Enabled" & Removing the ScrollViewer control ..

UPDATE:

You can achieve that without using columns.. here's my try:

<Grid x:Name="rootGrid">

            <ScrollViewer HorizontalScrollMode="Enabled" >
                <StackPanel Orientation="Horizontal" >


                    <Grid x:Name="form" >
                        <!-- your form here.. -->
                    </Grid>
                    <Grid x:Name="list" >
                        <!-- your listview here.. -->
                    </Grid>

                </StackPanel>
            </ScrollViewer>

        </Grid>

Good luck :)