CODEWITHSUNDEEP
windowsxamlwindows-phone-8.1gridscrollbar
ooooo
ooooo

Reputation: 53

Moving Grid up & down (Scrolling) in windows 8.1

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>

Upvotes: 1

Views: 70

Answers (2)

aelahmar
aelahmar

Reputation: 26

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>

Upvotes: 0

Chubosaurus Software
Chubosaurus Software

Reputation: 8161

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>

Upvotes: 1

Related Questions