locked
How to change orientation of the FlipView at runtime

    Question

  • I try to change itemPanel programmatically , but it isn't.

    Please help me.

    Thanks.

     
    Wednesday, March 19, 2014 4:10 AM

Answers

  • I assume that it has to be reloaded onto the page.  I recommend that you create a new flipview in the same place and remove the old flipview when you change orientation.  Either that or reload the entire page.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    • Marked as answer by Korawit Thursday, March 20, 2014 8:29 AM
    Wednesday, March 19, 2014 12:13 PM
    Moderator
  • You don't need to use two FlipViews here. You can just swap out the ItemsPanel.

    An easy way is to create two ItemsPanelTemplates in your resources:

        <Page.Resources>
            <ItemsPanelTemplate x:Key="HPanel" >
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
    
            <ItemsPanelTemplate x:Key="VPanel">
                <StackPanel Orientation="Vertical" />
            </ItemsPanelTemplate>
        </Page.Resources>

    Then when you want to change the orientation swap out the panels:

            private void SetVertical(bool p)
            {
                ItemsPanelTemplate panel = Resources[p ? "VPanel" : "HPanel"] as ItemsPanelTemplate;
               flippy.ItemsPanel = panel;
               
                flippy.UpdateLayout();
                flippy.Focus(FocusState.Pointer);
            }
    

    --Rob


    • Marked as answer by Korawit Friday, March 21, 2014 7:19 AM
    Friday, March 21, 2014 1:17 AM
    Owner

All replies

  • I assume that it has to be reloaded onto the page.  I recommend that you create a new flipview in the same place and remove the old flipview when you change orientation.  Either that or reload the entire page.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    • Marked as answer by Korawit Thursday, March 20, 2014 8:29 AM
    Wednesday, March 19, 2014 12:13 PM
    Moderator
  • Please suggest me.

    How to reload the entire page?

    • Edited by Korawit Thursday, March 20, 2014 8:26 AM
    Thursday, March 20, 2014 8:24 AM
  • You can do Frame.Navigate to the same page to reload it.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Thursday, March 20, 2014 3:03 PM
    Moderator
  • You don't need to use two FlipViews here. You can just swap out the ItemsPanel.

    An easy way is to create two ItemsPanelTemplates in your resources:

        <Page.Resources>
            <ItemsPanelTemplate x:Key="HPanel" >
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
    
            <ItemsPanelTemplate x:Key="VPanel">
                <StackPanel Orientation="Vertical" />
            </ItemsPanelTemplate>
        </Page.Resources>

    Then when you want to change the orientation swap out the panels:

            private void SetVertical(bool p)
            {
                ItemsPanelTemplate panel = Resources[p ? "VPanel" : "HPanel"] as ItemsPanelTemplate;
               flippy.ItemsPanel = panel;
               
                flippy.UpdateLayout();
                flippy.Focus(FocusState.Pointer);
            }
    

    --Rob


    • Marked as answer by Korawit Friday, March 21, 2014 7:19 AM
    Friday, March 21, 2014 1:17 AM
    Owner
  • I do follow this.

    But when I change the ItemPanel by programmatically , the ItemPanel isn't visualize.

    1. Original Code , the ItemPanel is visualize

    <FlipView x:Name="xATVDPageViewerFlipView" SelectionChanged="xATVDPageViewerFlipView_SelectionChanged">            
                <FlipView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel x:Name="xATVDPageViewerVirtualizingStackPanel" Orientation="Horizontal" CleanUpVirtualizedItemEvent="xATVDPageViewerVirtualizingStackPanel_CleanUpVirtualizedItemEvent" />
                    </ItemsPanelTemplate>
                </FlipView.ItemsPanel> 
            </FlipView>

    2. New Code , changed orientation but isn't visualize.

    <FlipView x:Name="xATVDPageViewerFlipView" SelectionChanged="xATVDPageViewerFlipView_SelectionChanged">
     </FlipView>

    ItemsPanelTemplate   _horizontalPanel = xATVDPageViewerFlipView.Resources["xATVDPageViewerHorizontalPanel"] as ItemsPanelTemplate;
    ItemsPanelTemplate  _verticalPanel = xATVDPageViewerFlipView.Resources["xATVDPageViewerVerticalPanel"] as ItemsPanelTemplate;
    
    if(isV)
    {
                    xATVDPageViewerFlipView.ItemsSource = ATVDPublizhDataCenter.Current.DataDoublePage;
                    xATVDPageViewerFlipView.ItemTemplate = _doublePageTemplate;
                    xATVDPageViewerFlipView.ItemsPanel = _verticalPanel;
                    xATVDPageViewerFlipView.UpdateLayout();
                    xATVDPageViewerFlipView.Focus(FocusState.Pointer);
    }
    else
    {
                    xATVDPageViewerFlipView.ItemsSource = ATVDPublizhDataCenter.Current.DataDoublePage;
                    xATVDPageViewerFlipView.ItemTemplate = _singlePageTemplate;
                    xATVDPageViewerFlipView.ItemsPanel = _horizontalPanel ;
                    xATVDPageViewerFlipView.UpdateLayout();
                    xATVDPageViewerFlipView.Focus(FocusState.Pointer);
    }
    

    • Edited by Korawit Friday, March 21, 2014 9:08 AM
    Friday, March 21, 2014 8:26 AM