在 Windows 8.1 中上下移动网格（滚动）答案

【问题标题】：Moving Grid up & down (Scrolling) in windows 8.1在 Windows 8.1 中上下移动网格（滚动）
【发布时间】：2016-05-03 23:21:42
【问题描述】：

我在 windows 8.1 中做了一个页面

我需要在 Grid 中放置一些项目，以便用户可以在不移动 BottomBar 的情况下上下滚动它

但我做不到

我寻找解决方案，但没有任何工作

这是我的 XAML 代码

希望你能帮到我

 <Page.BottomAppBar>
    <CommandBar Height="82">
        <AppBarButton Name="home"
                      Click="homeBarOnClick"
                      Label="Home" 
                      Icon="Home" 
                      ClickMode="Press"/>

        <AppBarButton Name="area"
                      Click="areaBarOnClick"
                      Label="Area" 
                      Icon="Calculator" 
                      ClickMode="Press"/>

        <AppBarButton Name="preimeter"
                      Click="preimeterBarOnClick"
                      Icon="Calculator"
                      Label="Preimeter" 
                      ClickMode="Press"/>

        <AppBarButton Name="size"
                      Click="sizeBarOnClick"
                      Icon="Calculator"
                      Label="Size"
                      ClickMode="Press"/>
    </CommandBar>
</Page.BottomAppBar>

<Grid  ScrollViewer.VerticalScrollBarVisibility="Auto" >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="189*"/>
        <ColumnDefinition Width="11*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="125*"/>
        <RowDefinition Height="280*"/>
        <RowDefinition Height="75*"/>
        <RowDefinition Height="22*"/>
        <RowDefinition Height="78*"/>
    </Grid.RowDefinitions>

    <!--Circle"-->
    <Image x:Name="circle"
           Tapped="circleOnTapped"
           HorizontalAlignment="Left" 
           Height="119"
           Margin="41,80,0,0" 
           VerticalAlignment="Top" 
           Width="159"
           Source="images/circle.png"
           RenderTransformOrigin="-2.528,-1.226" Grid.RowSpan="2"/>

    <TextBlock x:Name="circleTextBlock"
               HorizontalAlignment="Left"
               Margin="73,74,0,0" 
               TextWrapping="Wrap" 
               Text="Circle"
               VerticalAlignment="Top"
               RenderTransformOrigin="0.5,0.5"
               FontSize="25"
               FontStyle="Normal"
               Foreground="#FFF6901E"
               Height="43" Width="80" Grid.Row="1"/>

    <!--rectangle"-->
    <Image x:Name="rectangle"
           HorizontalAlignment="Left"
           Tapped="rectangleOnTapped"
           Height="110"
           Margin="245,80,-4,0" 
           VerticalAlignment="Top" 
           Source="images/rectangle.png"
           Width="159" Grid.RowSpan="2" Grid.ColumnSpan="2"/>

    <TextBlock x:Name="rectangleTextBlock"
               HorizontalAlignment="Left" 
               Margin="245,74,0,0"
               TextWrapping="Wrap"
               Text="Rectangle"
               FontSize="25"
               FontStyle="Normal"
               Foreground="#FF1ABC9C"
               Height="43" Width="120"
               VerticalAlignment="Top" Grid.Row="1"/>

    <!--rhombus"-->
    <Image x:Name="rhombus"
           HorizontalAlignment="Left"
           Height="119"
           Margin="41,153,0,0" 
           VerticalAlignment="Top" 
           Width="159"
           Tapped="rhombosOnClick"
           Source="images/rhombus.png" Grid.Row="1"
           />

    <TextBlock x:Name="rhombusTextBlock"
               HorizontalAlignment="Left"
               Margin="55,277,0,0" 
               TextWrapping="Wrap" 
               Text="Rhombus" 
               FontSize="25"
               FontStyle="Normal"
               Foreground="#FF1ABC9C"
               Height="43" Width="120"
               VerticalAlignment="Top" Grid.RowSpan="2" Grid.Row="1"/>


    <!--triangle"-->
    <Image x:Name="triangle"
           Source="images/triangle.png"
           HorizontalAlignment="Left"
           Height="110"
           Tapped="traingleOnClick"
           Margin="245,153,-4,0" 
           VerticalAlignment="Top"
           Width="159" Grid.Row="1" Grid.ColumnSpan="2"/>

    <TextBlock x:Name="traingleTextBlock" 
               HorizontalAlignment="Left"
               Margin="260,277,0,0" 
               TextWrapping="Wrap"
               Text="Traingle"
                FontSize="25"
               FontStyle="Normal"
               Foreground="#FFC0392B"
               Height="43" 
               Width="120"
               VerticalAlignment="Top" Grid.RowSpan="2" Grid.Row="1" Grid.ColumnSpan="2"/>

    <!--square"-->
    <Image x:Name="square" 
           HorizontalAlignment="Left"
           Height="110"
           Margin="41,0,0,-65"
           Source="images/square.png"
           Grid.Row="4"
           VerticalAlignment="Bottom" 
           Width="159"/>
</Grid>

【问题讨论】：

你试过我的更新解决方案了吗？
是的，但没有任何效果

标签： windows xaml windows-phone-8.1 grid scrollbar

【解决方案1】：

设置IsSticky = true;

这样，

<Page.BottomAppBar>
    <!-- StickyBar and start out as visible -->
    <CommandBar Height="82" IsSticky="True" IsOpen="True">
        <AppBarButton Name="home"                      
                  Label="Home" 
                  Icon="Home" 
                  ClickMode="Press"/>
    </CommandBar>
</Page.BottomAppBar>

但您现在必须在代码隐藏中手动显示和隐藏它

BottomAppBar.IsOpen = true;   // show the bar
BottomAppBar.IsOpen = false;  // hide the bar

<ScrollViewer >    
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <!-- .... inline elements -->
    </Grid>
</ScrollViewer>

【讨论】：

非常感谢您的回答，但我要问的是滚动条本身不起作用，我可以在运行应用程序时上下移动网格
@Omnyyahyahya 啊，我明白了。稍后检查更新的解决方案。目前还不清楚你想要什么。但是您可以在网格周围添加一个 ScrollViewer，这样就可以了。

【解决方案2】：

试试下面的代码

<Grid x:Name="LayoutRoot">
    <Grid.ChildrenTransitions>
        <TransitionCollection>
            <EntranceThemeTransition/>
        </TransitionCollection>
    </Grid.ChildrenTransitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!-- Title Panel -->
    <StackPanel Grid.Row="0" Margin="19,0,0,0">
        <TextBlock x:Uid="Header" Text="MY APPLICATION" Style="{ThemeResource TitleTextBlockStyle}" Margin="0,12,0,0"/>
        <TextBlock Text="{Binding Title}" Style="{ThemeResource HeaderTextBlockStyle}" Margin="0,-6.5,0,26.5" CharacterSpacing="{ThemeResource PivotHeaderItemCharacterSpacing}" />
    </StackPanel>

    <Grid Grid.Row="1" x:Name="ContentRoot" Margin="19,9.5,19,0">

        <ScrollViewer HorizontalScrollBarVisibility="Auto">

            <!-- 
        TODO: Content should be placed within the following grid 
              to show details for the current item
    -->

        </ScrollViewer>
    </Grid>
</Grid>


<Page.BottomAppBar>
    <CommandBar>
        <AppBarButton x:Uid="AddAppBarButton" x:Name="AddAppBarButton" Label="add" Icon="Add" Click="AddAppBarButton_Click" />
        <CommandBar.SecondaryCommands>
            <AppBarButton x:Uid="SecondaryButton1" x:Name="SecondaryButton1" Label="secondary command 1" />
            <AppBarButton x:Uid="SecondaryButton2" x:Name="SecondaryButton2" Label="secondary command 2" />
        </CommandBar.SecondaryCommands>
    </CommandBar>
</Page.BottomAppBar>

【讨论】：