Question

我在Windows 8.1中创建了一个页面

我需要在网格中放置一些项目，这样用户可以在不移动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>

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

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

移动网格＆amp;在Windows 8.1中向下（滚动）

2 个答案: