在XAML中添加ScrollViewer

时间:2015-11-24 21:28:13

标签: windows xaml win-universal-app scrollviewer

我正在尝试在页面中添加->at(。我的页面包含ScrollViewerGrid(Tiles)。我希望能够横向滚动浏览我的页面...但我无法找到GridViewItems的位置。以下是我的代码以及我放置ScrollViewer的位置:

ScrollViewer

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

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

如果您只想要横向滚动,则只需从Orientation移除ItemseWrapGrid并将其更改为此类

  <ItemsPanelTemplate>
      <ItemsWrapGrid/>
  </ItemsPanelTemplate>

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

如果您同时需要HorizontalVertical滚动意味着更改您的代码就像这样

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