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

时间:2015-12-22 10:02:20

标签: c# xaml windows-store-apps microsoft-metro

我有一个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> 

有人请帮我这样做。

赞赏任何形式的帮助......

1 个答案:

答案 0 :(得分:1)

您是否尝试过使用ScrollViewer Control?并启用水平滚动模式?

试试这个:

<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 =“已启用”&amp;删除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>
祝你好运:)