locked
FlipView inside an other FlipView RRS feed

  • Question

  • Is it possible to have a flipView inside an other flipView? If not then what workaround we can do to simulate such functionality?

    I thought about having radio buttons as inside flipviewItems and at each click hide unhide relevant panels?

    My code which didn't worked. (Cant see navigation for inside flipview, outone works fine)

    <

    FlipViewx:Name="flCallView"HorizontalAlignment="Center"Margin="0,0,0,0"Grid.Row="1"VerticalAlignment="Center">


                   

    <FlipViewItem>


                       

    <StackPanel>


                           

    <TextBlockFontSize="48">Call Details</TextBlock>


                       

    </StackPanel>


                   

    </FlipViewItem>


                   

    <FlipViewItem>


                       

    <StackPanel>


                           

    <TextBlockFontSize="48">Service Activity Report</TextBlock>


                           

    <FlipViewName="fvSAR">


                               

    <FlipViewItem>


                                   

    <StackPanel>


                                       

    <TextBlockFontSize="40">Problem</TextBlock>


                                   

    </StackPanel>


                               

    </FlipViewItem>


                               

    <FlipViewItem>


                                   

    <StackPanel>


                                       

    <TextBlockFontSize="40">Parts Used</TextBlock>


                                   

    </StackPanel>


                               

    </FlipViewItem>


                           

    </FlipView>


                       

    </StackPanel>


                   

    </FlipViewItem>


               

    </FlipView>


           

    </StackPanel>


    Tuesday, February 26, 2013 1:58 PM

Answers

  • This solution supports embedded orthogonal FlipViews. Ensure to follow the UX guidelines referred to in the XAML.

    <Page
        x:Class="App1.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App1"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <FlipView x:Name="flCallView" HorizontalAlignment="Center" Margin="0,0,0,0" 
                      Grid.Row="1" VerticalAlignment="Center">
                <FlipViewItem>
                    <Grid Margin="100,50,100,50">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <TextBlock FontSize="48">Call Details</TextBlock>
                    </Grid>
                </FlipViewItem>
                <FlipViewItem>
                    <!-- Use a Grid instead of a StackPanel -->
                    <Grid Margin="100,50,100,50">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <TextBlock FontSize="48" Grid.Row="0">Service Activity Report</TextBlock>
                        <FlipView Grid.Row="1">
                            <!-- see http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh781233.aspx -->
                            <!-- important: vertical orientation is required according to UX guidelines 
                            see: http://msdn.microsoft.com/en-us/library/windows/apps/hh465310.aspx
                            Don't chain or place one pannable region within another pannable region if they both pan
                            in the same direction, as shown in the following diagram.
                            -->
                          <FlipView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <VirtualizingStackPanel Orientation="Vertical" Background="Blue"/>
                                </ItemsPanelTemplate>
                            </FlipView.ItemsPanel>
                            <FlipViewItem>
                                <StackPanel>
                                    <TextBlock FontSize="40">Problem
                                    </TextBlock>
                                </StackPanel>
                            </FlipViewItem>
                            <FlipViewItem>
                                <StackPanel>
                                    <TextBlock FontSize="40">Parts Used
                                    </TextBlock>
                                </StackPanel>
                            </FlipViewItem>
                        </FlipView>
                    </Grid>
                </FlipViewItem>
            </FlipView>
        </Grid>
    </Page>
    

    Note: your future XAML/C# posts are better initiated in this Forum

    • Proposed as answer by Aaron Xue Thursday, February 28, 2013 7:59 AM
    • Marked as answer by Aaron Xue Friday, March 8, 2013 10:01 AM
    Tuesday, February 26, 2013 5:02 PM