locked
How to do horisontal scrolling as in logo quiz apps?

    Question

  • Hi!

    I'm playing with an logo quiz look-a-like app to learn Windows phone programming. The first problem I got stuck with is how to get the smooth sidevise scrolling of levels. Like one row with lots of columns for each level streching out to the far right and the user can flip right or left to select a level. I started out with the code below, but I only get a vertical column (top to bottom). Can someone point me in the right direction?

            <Grid Grid.Row="1" x:Name="ContentRoot" Margin="19,9.5,19,0">
    
                <ListView
                x:Name="itemListView"
                AutomationProperties.AutomationId="ItemListView"
                AutomationProperties.Name="Items In Group"
                TabIndex="1"
                Grid.Row="1"
                ItemsSource="{Binding Groups}"
                IsItemClickEnabled="True"
                ItemClick="ItemView_ItemClick"
                SelectionMode="None"
                IsSwipeEnabled="false"
                BorderBrush="red"
                BorderThickness="2"
                Margin="19,0,0,0">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
    
                                <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Margin="0,9.5,0,0" Width="120" Height="79" BorderThickness="2" BorderBrush="AntiqueWhite">
                                    <StackPanel Grid.Column="1" Orientation="Vertical" VerticalAlignment="Top" Margin="14.5,0,0,0">
                                        <TextBlock Text="{Binding Title}" Style="{ThemeResource ListViewItemTextBlockStyle}"/>
                                    </StackPanel>
                                </Border>
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
                
            </Grid>
    

    Thanks, Sigurd F

    Tuesday, September 23, 2014 8:10 PM

Answers

  • Hi Sigurd,

    According to your description, I think the ListView is not the correct control you want to use, because ListView is used to displays a vertical list of data items. I would recommend you have a look at FlipView control, this control lets user flip through a collection of items, one at a time. In this case, we can use data template to display another view without pictures. http://msdn.microsoft.com/en-us/library/windows/apps/hh850405.aspx. Code looks like below.

    XAML.

    <FlipView x:Name="FlipView1" Width="300" Height="100" BorderBrush="Black" BorderThickness="1">
    
                    <FlipView.ItemTemplate>
    
                        <DataTemplate>
    
                            <Grid>
    
                                <Border Background="#A5000000" Height="80" VerticalAlignment="Bottom">
    
                                    <StackPanel>
    
                                        <CheckBox Content="{Binding Title}"></CheckBox>
    
                                    </StackPanel>
    
                                </Border>
    
                            </Grid>
    
                        </DataTemplate>
    
                    </FlipView.ItemTemplate>
    
                </FlipView>
    

    C# code.

    var sampleData = new Controls_FlipView.Data.SampleDataSource();
    
                FlipView1.ItemsSource = sampleData.Items;
    
    
    
      public SampleDataSource()
    
            {
    
                Items.Add(new SampleDataItem("Level1",
    
                        "item",
    
                        "Assets/Cliff.jpg"
    
                        ));
    
                Items.Add(new SampleDataItem("Level2",
    
                        "item",
    
                        "Assets/Grapes.jpg"
    
                        ));
    
                Items.Add(new SampleDataItem("Level3",
    
                        "item",
    
                        "Assets/Rainier.jpg"
    
                        ));
    
                Items.Add(new SampleDataItem("Level4",
    
                        "item",
    
                        "Assets/Sunset.jpg"
    
                        ));
    
                Items.Add(new SampleDataItem("Level5",
    
                        "item",
    
                        "Assets/Valley.jpg"
    
                        ));
    
            }
    

    I modify the code snippet from MSDN code sample. You can have a look at the scenario 1. If you are using Silverlight app, you can copy the code into your test project. Get my test project from OneDrive. http://1drv.ms/1rmRXfn.

    If I misunderstand you, please feel free to let me know.

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    • Proposed as answer by Dinesh Rawat Wednesday, September 24, 2014 10:06 AM
    • Marked as answer by Sigurd F Wednesday, September 24, 2014 7:20 PM
    Wednesday, September 24, 2014 9:55 AM
    Moderator

All replies

  • Hi Sigurd,

    According to your description, I think the ListView is not the correct control you want to use, because ListView is used to displays a vertical list of data items. I would recommend you have a look at FlipView control, this control lets user flip through a collection of items, one at a time. In this case, we can use data template to display another view without pictures. http://msdn.microsoft.com/en-us/library/windows/apps/hh850405.aspx. Code looks like below.

    XAML.

    <FlipView x:Name="FlipView1" Width="300" Height="100" BorderBrush="Black" BorderThickness="1">
    
                    <FlipView.ItemTemplate>
    
                        <DataTemplate>
    
                            <Grid>
    
                                <Border Background="#A5000000" Height="80" VerticalAlignment="Bottom">
    
                                    <StackPanel>
    
                                        <CheckBox Content="{Binding Title}"></CheckBox>
    
                                    </StackPanel>
    
                                </Border>
    
                            </Grid>
    
                        </DataTemplate>
    
                    </FlipView.ItemTemplate>
    
                </FlipView>
    

    C# code.

    var sampleData = new Controls_FlipView.Data.SampleDataSource();
    
                FlipView1.ItemsSource = sampleData.Items;
    
    
    
      public SampleDataSource()
    
            {
    
                Items.Add(new SampleDataItem("Level1",
    
                        "item",
    
                        "Assets/Cliff.jpg"
    
                        ));
    
                Items.Add(new SampleDataItem("Level2",
    
                        "item",
    
                        "Assets/Grapes.jpg"
    
                        ));
    
                Items.Add(new SampleDataItem("Level3",
    
                        "item",
    
                        "Assets/Rainier.jpg"
    
                        ));
    
                Items.Add(new SampleDataItem("Level4",
    
                        "item",
    
                        "Assets/Sunset.jpg"
    
                        ));
    
                Items.Add(new SampleDataItem("Level5",
    
                        "item",
    
                        "Assets/Valley.jpg"
    
                        ));
    
            }
    

    I modify the code snippet from MSDN code sample. You can have a look at the scenario 1. If you are using Silverlight app, you can copy the code into your test project. Get my test project from OneDrive. http://1drv.ms/1rmRXfn.

    If I misunderstand you, please feel free to let me know.

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    • Proposed as answer by Dinesh Rawat Wednesday, September 24, 2014 10:06 AM
    • Marked as answer by Sigurd F Wednesday, September 24, 2014 7:20 PM
    Wednesday, September 24, 2014 9:55 AM
    Moderator
  • Thanks. I got it to work now.

    Maybe you also can help me with one more question.

     I put a tapped event on the border Control, but this don't seems to be a wise choice. I guess it would be much better to use a click event, but what control got a click event and also span most of each page?

    Sigurd F

    Wednesday, September 24, 2014 7:36 PM