如何在 Metro 应用程序中使网格列水平滚动？

Question

我有一个 Grid 列，其中有一个列表视图。我正在从另一列中找到的表单中填充它。在表单中输入的值将保存到列表中。我希望该列表显示在列表视图中。当表单中输入的文本增加时，剩余的值就会消失。我希望该列水平滚动，这样值就不会消失。

这是我迄今为止尝试过的..

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

请有人帮我做这件事。

感谢任何形式的帮助....

Answer 1

您是否尝试过不使用 ScrollViewer 控件？和启用水平滚动模式？

试试这个：

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

添加 ScrollViewer.Horizo​​ntalScrollMode="Enabled" & 移除 ScrollViewer 控件..

更新：

您可以在不使用列的情况下实现这一点。这是我的尝试：

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

祝你好运:)