Moving Grid up & down (Scrolling) in windows 8.1 - windows

Question

I made a page in windows 8.1
and I need to put some item down in the Grid so the user can scroll it up and down without moving the BottomBar
but I could not do it
I looked for solutions but nothing work
here is my XAML code
I hope you could help me
<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

Set the IsSticky = true;
Like so,
<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>
But you have to manually show and hide it now in the code-behind
BottomAppBar.IsOpen = true; // show the bar
BottomAppBar.IsOpen = false; // hide the bar
<ScrollViewer >
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<!-- .... inline elements -->
</Grid>
</ScrollViewer>

Answer 2

Try below code
<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>