Horizontal ScrollViewer Windows Phone

1
votes

I am totally new to Windows phone, I'm an Android and iOS developer. Trying to replicate my app on Windows. Anyway, I'm looking for a way to use a scrollview to page 12 buttons, 6 on each page and the 6 on each page would be in grid form, 3 rows 2 column. I don't know how to go about it. Please any help would be appreciated. Just giving me a little hint wouldn't be bad. Thanks

2
windows-phone-8scrollviewer
Are you trying to place 12 buttons in one page? the questions is not very clear - Kasun Kodagoda
6 on each page, that's two pages. Each page would have 6 buttons - user3889764
So your page is like a Pivot Page? you swipe to move to the next pivot item or you need to have 2 different pages? - Kasun Kodagoda
Something like this dropbox.com/s/e31p1ojjufpxmlj/… - user3889764
For paging, I think what you need is either Pivot or Panorama. Take a look at the design guideline for those controls. - David To

2 Answers

0
votes

I think you are looking for this:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled">
    <Grid Width="960" >
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Content="1" Margin="10"></Button>
        <Button Content="2" Grid.Row="1" Margin="10"></Button>
        <Button Content="3" Grid.Row="2" Margin="10"></Button>

        <Button Content="4" Grid.Column="1" Margin="10"></Button>
        <Button Content="5" Grid.Row="1" Grid.Column="1" Margin="10"></Button>
        <Button Content="6" Grid.Row="2" Grid.Column="1" Margin="10"></Button>

        <Button Content="7" Grid.Column="2" Margin="10"></Button>
        <Button Content="8" Grid.Row="1" Grid.Column="2" Margin="10"></Button>
        <Button Content="9" Grid.Row="2" Grid.Column="2" Margin="10"></Button>

        <Button Content="10" Grid.Column="3" Margin="10"></Button>
        <Button Content="11" Grid.Row="1" Grid.Column="3" Margin="10"></Button>
        <Button Content="12" Grid.Row="2" Grid.Column="3" Margin="10"></Button>
    </Grid>
    </ScrollViewer>
</Grid>

I have added images here:

Page with 6 items at startup

Page with 6 items at startup

After Scrolling Another 6 Items

After Scrolling Another 6 Items

1
votes

Add this to each of your pages.

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>

        <Button Grid.Column="0" Grid.Row="0" Content="Button" />
        <Button Grid.Column="0" Grid.Row="1" Content="Button" />
        <Button Grid.Column="0" Grid.Row="2" Content="Button" />
        <Button Grid.Column="1" Grid.Row="0" Content="Button" />
        <Button Grid.Column="1" Grid.Row="1" Content="Button" />
        <Button Grid.Column="1" Grid.Row="2" Content="Button" />
    </Grid>
</ScrollViewer>