在 XAML 中添加 ScrollViewer

Question

我正在尝试将 ScrollViewer 添加到我的页面。我的页面由 Grid 和 GridViewItems(Tiles) 组成。我希望能够水平滚动我的页面...但是我无法找到我应该放置 ScrollViewer 的位置。下面是我的代码以及我放置 ScrollViewer:

的位置

<Grid>
    <GridView  Margin="12,60" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollMode="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollMode="Auto">
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <ItemsWrapGrid  Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>

        <GridView.ItemContainerStyle>
            <Style TargetType="GridViewItem">
                <Style.Setters>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Grid Background="#2A2A2A"
                                  Margin="5"
                                  Height="200"
                                  Width="300">
                                    <ContentPresenter />
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style.Setters>
            </Style>
        </GridView.ItemContainerStyle>

        <GridViewItem>
            <Grid>
                <TextBlock Text="SampleText"
                       FontFamily="Segoe UI"
                       FontWeight="SemiBold"
                       FontSize="18"
                       Foreground="White"
                       TextWrapping="Wrap"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Top"
                       Margin="10,10" />
            </Grid>
        </GridViewItem>
        <GridViewItem>
            <Grid>
                <TextBlock Text="SampleText"
                       FontFamily="Segoe UI"
                       FontWeight="SemiBold"
                       FontSize="18"
                       Foreground="White"
                       TextWrapping="Wrap"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Top"
                       Margin="10,10" />
            </Grid>
        </GridViewItem>
        <GridViewItem>
            <Grid>
                <TextBlock Text="SampleText"
                       FontFamily="Segoe UI"
                       FontWeight="SemiBold"
                       FontSize="18"
                       Foreground="White"
                       TextWrapping="Wrap"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Top"
                       Margin="10,10" />
            </Grid>
        </GridViewItem>
        <GridViewItem>
            <Grid>
                <TextBlock Text="SampleText"
                       FontFamily="Segoe UI"
                       FontWeight="SemiBold"
                       FontSize="18"
                       Foreground="White"
                       TextWrapping="Wrap"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Top"
                       Margin="10,10" />
            </Grid>
        </GridViewItem>
        <GridViewItem>
            <Grid>
                <TextBlock Text="SampleText"
                       FontFamily="Segoe UI"
                       FontWeight="SemiBold"
                       FontSize="18"
                       Foreground="White"
                       TextWrapping="Wrap"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Top"
                       Margin="10,10" />
            </Grid>
        </GridViewItem>
        <GridViewItem>
            <Grid>
                <TextBlock Text="SampleText"
                       FontFamily="Segoe UI"
                       FontWeight="SemiBold"
                       FontSize="18"
                       Foreground="White"
                       TextWrapping="Wrap"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Top"
                       Margin="10,10" />
            </Grid>
        </GridViewItem>
        <GridViewItem>
            <Grid>
                <TextBlock Text="SampleText"
                       FontFamily="Segoe UI"
                       FontWeight="SemiBold"
                       FontSize="18"
                       Foreground="White"
                       TextWrapping="Wrap"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Top"
                       Margin="10,10" />
            </Grid>
        </GridViewItem>
        <GridViewItem>
            <Grid>
                <TextBlock Text="SampleText"
                       FontFamily="Segoe UI"
                       FontWeight="SemiBold"
                       FontSize="18"
                       Foreground="White"
                       TextWrapping="Wrap"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Top"
                       Margin="10,10" />
            </Grid>
        </GridViewItem>
    </GridView>
</Grid>

这目前没有做任何事情....任何人都可以指出我正确的方向吗？我想要做的是能够水平滚动页面的内容

Answer 1

它应该在没有 ScrollViewer 的情况下工作。添加几个带有示例文本的 GridViewItem 并检查。

 <GridView  ScrollViewer.VerticalScrollBarVisibility="Disabled"
               ScrollViewer.HorizontalScrollBarVisibility="Auto"
               ScrollViewer.HorizontalScrollMode="Auto">
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <ItemsWrapGrid  Orientation="Vertical"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>

        <GridView.ItemContainerStyle>
            <Style TargetType="GridViewItem">
                <Style.Setters>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Grid Background="#2A2A2A"
                                      Margin="5"
                                      Height="200"
                                      Width="300">
                                    <ContentPresenter />
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style.Setters>
            </Style>
        </GridView.ItemContainerStyle>

        <GridViewItem>
            <Grid>
                <TextBlock Text="SampleText"
                           FontFamily="Segoe UI"
                           FontWeight="SemiBold"
                           FontSize="18"
                           Foreground="White"
                           TextWrapping="Wrap"
                           HorizontalAlignment="Left"
                           VerticalAlignment="Top"
                           Margin="10,10" />
            </Grid>
        </GridViewItem>
    </GridView>

Answer 2

如果你只想要水平滚动意味着只需从 ItemseWrapGrid 中删除你的 Orientation 并将其更改为这样

  <ItemsPanelTemplate>
      <ItemsWrapGrid/>
  </ItemsPanelTemplate>

并为您的 GridView 控件设置一些 Height。

如果您想要 Horizontal 和 Vertical 滚动意味着像这样更改您的代码

 <ScrollViewer>
            <GridView Margin="12,60" ScrollViewer.HorizontalScrollBarVisibility="Auto"
                    ScrollViewer.HorizontalScrollMode="Auto" Height="800">
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <ItemsWrapGrid />
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
                <GridView.ItemContainerStyle>
                    <Style TargetType="GridViewItem">
                        <Style.Setters>
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate>
                                        <Grid Background="#2A2A2A" Margin="5" Height="200" Width="300">
                                            <ContentPresenter />
                                        </Grid>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style.Setters>
                    </Style>
                </GridView.ItemContainerStyle>
                <GridViewItem>
                    <Grid>
                        <TextBlock Text="SampleText" FontFamily="Segoe UI" FontWeight="SemiBold" FontSize="18"
                                Foreground="White" TextWrapping="Wrap" HorizontalAlignment="Left"
                                VerticalAlignment="Top" Margin="10,10" />
                    </Grid>
                </GridViewItem>
                <GridViewItem>
                    <Grid>
                        <TextBlock Text="SampleText" FontFamily="Segoe UI" FontWeight="SemiBold" FontSize="18"
                                Foreground="White" TextWrapping="Wrap" HorizontalAlignment="Left"
                                VerticalAlignment="Top" Margin="10,10" />
                    </Grid>
                </GridViewItem>
            </GridView>
        </ScrollViewer>

在 XAML 中添加 ScrollViewer

Adding ScrollViewer in XAML

windows

xaml

scrollviewer

win-universal-app