locked
Dynamic loading text using FlipView with Next and Previous

    Question

  • Problem:
    I have more than 10,000 records in database, if first 50 records are showing in gridview and user clicked in 40th record and 40th record get displayed in flipview, than how can we dynamically load (record number 39,38,37.. soon ) using previous button and  (record number 41,42,43.. soon ) using Next button of flipview.
     
    In other words 
    I want to show these records in flipview with next and previous button.
     
     
    Could someone suggest me how can I do this using xaml and c#.
     
    Thanks in advance.
     
    Ck Nitin
    Tuesday, September 23, 2014 9:22 AM

Answers

  • Hi CK Nitin,

    You could handle the click event of navigation button to check the current select index in FlipView. Use the current index to decide if we need to insert new item to the FlipView data source.

    Right click on the FlipView control in designer, choose Edit Style and create a copy of FlipView default control template. You will find the two navigate buttons in the template. Add handle event of the button. At last code looks like the following.

    Code snippet of FlipView control template.

     

    </VisualStateManager.VisualStateGroups>
    
                                                <Path x:Name="Arrow" Data="M5.63,0 L11.11,5.55 L11.05,9.67 L5.64,4.12 L0.23,9.67 L0.17,5.55 z" Fill="{ThemeResource FlipViewButtonForegroundThemeBrush}" HorizontalAlignment="Center" Height="9.67" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Center" Width="10.94"/>
    
                                            </Border>
    
                                        </ControlTemplate>
    
                                    </Border.Resources>
    
                                    <Grid>
    
                                        <ScrollViewer x:Name="ScrollingHost" AutomationProperties.AccessibilityView="Raw" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalSnapPointsType="MandatorySingle" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsTabStop="False" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" Padding="{TemplateBinding Padding}" TabNavigation="{TemplateBinding TabNavigation}" VerticalSnapPointsType="MandatorySingle" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="Disabled">
    
                                            <ItemsPresenter/>
    
                                        </ScrollViewer>
    
                                        <Button  Click="PreviousButtonHorizontal_Click" x:Name="PreviousButtonHorizontal" HorizontalAlignment="Left" Height="40" IsTabStop="False" Template="{ThemeResource HorizontalPreviousTemplate}" VerticalAlignment="Center" Width="70"/>
    
                                        <Button  Click="NextButtonHorizontal_Click" x:Name="NextButtonHorizontal" HorizontalAlignment="Right" Height="40" IsTabStop="False" Template="{StaticResource HorizontalNextTemplate}" VerticalAlignment="Center" Width="70"/>
    
                                        <Button x:Name="PreviousButtonVertical" HorizontalAlignment="Center" Height="40" IsTabStop="False" Template="{StaticResource VerticalPreviousTemplate}" VerticalAlignment="Top" Width="70"/>
    
                                        <Button x:Name="NextButtonVertical" HorizontalAlignment="Center" Height="40" IsTabStop="False" Template="{StaticResource VerticalNextTemplate}" VerticalAlignment="Bottom" Width="70"/>
    
                                    </Grid>
    
                                </Border>
    
                                <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
    
                                <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
    
                            </Grid>
    
                        </ControlTemplate>
    

                   

    Init code in C#.

     

    ObservableCollection<MyFlipViteItem> images;
    
            public MainPage()
    
            {
    
                this.InitializeComponent();
    
                Random ran = new Random();
    
                images = new ObservableCollection<MyFlipViteItem>();
    
                for (int i = 0; i < 10; i++)
    
                {
    
                    images.Add(new MyFlipViteItem() { Name = ran.Next(0, 101).ToString(), URL = string.Format("Assets/{0}.png", ran.Next(0, 12)) });
    
                }
    
            }
    

    Button event handler.

     

     private void NextButtonHorizontal_Click(object sender, RoutedEventArgs e)
    
            {
    
                Debug.WriteLine("next" + DateTime.Now.ToString()+":"+FlipView1.SelectedIndex.ToString());
    
                int currentindex = FlipView1.SelectedIndex;
    
                int max = images.Count;
    
                //close to the end of the array, add the next 10
    
                if (currentindex == max - 3)
    
                {
    
                    Debug.WriteLine("add items to the array");
    
                    Random ran = new Random();
    
                    for (int i = 0; i < 10; i++)
    
                    {
    
                        images.Add(new MyFlipViteItem() { Name = ran.Next(0, 101).ToString(), URL = string.Format("Assets/{0}.png", ran.Next(0, 12)) });
    
                    }
    
                }
    
            }
    
            private void PreviousButtonHorizontal_Click(object sender, RoutedEventArgs e)
    
            {
    
                Debug.WriteLine("pre" + DateTime.Now.ToString() + ":" + FlipView1.SelectedIndex.ToString());
    
                int currentindex = FlipView1.SelectedIndex;
    
                //close to the first one, add the pre 10
    
                if (currentindex == 3)
    
                {
    
                    Debug.WriteLine("add items to the head of array");
    
                    Random ran = new Random();
    
                    for (int i = 0; i < 10; i++)
    
                    {
    
                        images.Insert(0,new MyFlipViteItem() { Name = ran.Next(0, 101).ToString(), URL = string.Format("Assets/{0}.png", ran.Next(0, 12)) });
    
                    }
    
                }
    
            }
    

    You can also get my test project in OneDrive. Happy coding.

    http://1drv.ms/1wL57mI.

    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.

    Wednesday, September 24, 2014 4:20 AM
    Moderator

All replies

  • Hi CK Nitin,

    You could handle the click event of navigation button to check the current select index in FlipView. Use the current index to decide if we need to insert new item to the FlipView data source.

    Right click on the FlipView control in designer, choose Edit Style and create a copy of FlipView default control template. You will find the two navigate buttons in the template. Add handle event of the button. At last code looks like the following.

    Code snippet of FlipView control template.

     

    </VisualStateManager.VisualStateGroups>
    
                                                <Path x:Name="Arrow" Data="M5.63,0 L11.11,5.55 L11.05,9.67 L5.64,4.12 L0.23,9.67 L0.17,5.55 z" Fill="{ThemeResource FlipViewButtonForegroundThemeBrush}" HorizontalAlignment="Center" Height="9.67" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Center" Width="10.94"/>
    
                                            </Border>
    
                                        </ControlTemplate>
    
                                    </Border.Resources>
    
                                    <Grid>
    
                                        <ScrollViewer x:Name="ScrollingHost" AutomationProperties.AccessibilityView="Raw" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalSnapPointsType="MandatorySingle" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsTabStop="False" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" Padding="{TemplateBinding Padding}" TabNavigation="{TemplateBinding TabNavigation}" VerticalSnapPointsType="MandatorySingle" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="Disabled">
    
                                            <ItemsPresenter/>
    
                                        </ScrollViewer>
    
                                        <Button  Click="PreviousButtonHorizontal_Click" x:Name="PreviousButtonHorizontal" HorizontalAlignment="Left" Height="40" IsTabStop="False" Template="{ThemeResource HorizontalPreviousTemplate}" VerticalAlignment="Center" Width="70"/>
    
                                        <Button  Click="NextButtonHorizontal_Click" x:Name="NextButtonHorizontal" HorizontalAlignment="Right" Height="40" IsTabStop="False" Template="{StaticResource HorizontalNextTemplate}" VerticalAlignment="Center" Width="70"/>
    
                                        <Button x:Name="PreviousButtonVertical" HorizontalAlignment="Center" Height="40" IsTabStop="False" Template="{StaticResource VerticalPreviousTemplate}" VerticalAlignment="Top" Width="70"/>
    
                                        <Button x:Name="NextButtonVertical" HorizontalAlignment="Center" Height="40" IsTabStop="False" Template="{StaticResource VerticalNextTemplate}" VerticalAlignment="Bottom" Width="70"/>
    
                                    </Grid>
    
                                </Border>
    
                                <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
    
                                <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
    
                            </Grid>
    
                        </ControlTemplate>
    

                   

    Init code in C#.

     

    ObservableCollection<MyFlipViteItem> images;
    
            public MainPage()
    
            {
    
                this.InitializeComponent();
    
                Random ran = new Random();
    
                images = new ObservableCollection<MyFlipViteItem>();
    
                for (int i = 0; i < 10; i++)
    
                {
    
                    images.Add(new MyFlipViteItem() { Name = ran.Next(0, 101).ToString(), URL = string.Format("Assets/{0}.png", ran.Next(0, 12)) });
    
                }
    
            }
    

    Button event handler.

     

     private void NextButtonHorizontal_Click(object sender, RoutedEventArgs e)
    
            {
    
                Debug.WriteLine("next" + DateTime.Now.ToString()+":"+FlipView1.SelectedIndex.ToString());
    
                int currentindex = FlipView1.SelectedIndex;
    
                int max = images.Count;
    
                //close to the end of the array, add the next 10
    
                if (currentindex == max - 3)
    
                {
    
                    Debug.WriteLine("add items to the array");
    
                    Random ran = new Random();
    
                    for (int i = 0; i < 10; i++)
    
                    {
    
                        images.Add(new MyFlipViteItem() { Name = ran.Next(0, 101).ToString(), URL = string.Format("Assets/{0}.png", ran.Next(0, 12)) });
    
                    }
    
                }
    
            }
    
            private void PreviousButtonHorizontal_Click(object sender, RoutedEventArgs e)
    
            {
    
                Debug.WriteLine("pre" + DateTime.Now.ToString() + ":" + FlipView1.SelectedIndex.ToString());
    
                int currentindex = FlipView1.SelectedIndex;
    
                //close to the first one, add the pre 10
    
                if (currentindex == 3)
    
                {
    
                    Debug.WriteLine("add items to the head of array");
    
                    Random ran = new Random();
    
                    for (int i = 0; i < 10; i++)
    
                    {
    
                        images.Insert(0,new MyFlipViteItem() { Name = ran.Next(0, 101).ToString(), URL = string.Format("Assets/{0}.png", ran.Next(0, 12)) });
    
                    }
    
                }
    
            }
    

    You can also get my test project in OneDrive. Happy coding.

    http://1drv.ms/1wL57mI.

    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.

    Wednesday, September 24, 2014 4:20 AM
    Moderator
  • Hi, Herro Wong

    Thanks for your reply, I will try to implement your idea in my application and let you know.

    Saturday, October 4, 2014 1:26 AM