在 XAML 中添加 ScrollViewer答案

【问题标题】：Adding ScrollViewer in XAML在 XAML 中添加 ScrollViewer
【发布时间】：2015-11-24 21:28:13
【问题描述】：

我正在尝试将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>

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

【问题讨论】：

好的，这里有几个问题。您的面板是 WrapGrid。因此，使用滚动查看器和水平滚动将不会设置边界来调用您的包装，而无需某种硬设置的最大宽度或其他东西。你的另一部分，你需要用设置你的 gridview.template 或者你可以将整个 GridView 嵌入到 ScrollViewer 中，因为它坐在那里，每个项目都有一个 ScrollViewer，但你可以想考虑一下你的总体目标是考虑我提到的第一个问题。
您能否发布一个示例作为非 wrapgrid 的建议答案？我不反对

标签： windows xaml win-universal-app scrollviewer

【解决方案1】：

如果您只想要水平滚动意味着只需从 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>

【讨论】：

我在上面的建议中添加了你，它确实添加了滚动条，但现在我有 2 个滚动条（并排）......我对你所做的唯一更改是我将它从水平更改为垂直的。有什么建议吗？
你需要水平和垂直滚动条还是只需要水平的？

【解决方案2】：

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

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

【讨论】：