locked
nested FlipView selected index RRS feed

  • Question

  • I have a nested FlipView - similar to the "XAML FlipView control sample" Scenario 4 (This sample was only available in Consumer Preview). I need to get the selectedItem of the inner FlipView control. The XAML looks like foll:

           <FlipView
                x:Name="flipView"
                AutomationProperties.AutomationId="ItemsFlipView"
                AutomationProperties.Name="Item Details"
                TabIndex="1"
                Grid.Row="1"
                Margin="0,-3,0,0"
                ItemsSource="{Binding Source={StaticResource itemsViewSource}}" SelectionChanged="flipView_SelectionChanged_1"  >
    
                <FlipView.ItemTemplate>
                    <DataTemplate>
    
                       <UserControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates">
                            <ScrollViewer x:Name="scrollViewer" Style="{StaticResource HorizontalScrollViewerStyle}" Grid.Row="1">
                            <StackPanel Orientation="Horizontal" Margin="117,0,117,47">
                                <!-- Content is allowed to flow across as many columns as needed -->
                                <!--<common:RichTextColumns x:Name="richTextColumns" Margin="117,0,117,47">-->
                                    <RichTextBlock x:Name="richTextBlock" Width="250" Style="{StaticResource ItemRichTextStyle}">
                                        <Paragraph>
                                            <Run FontSize="26.667" FontWeight="Light" Text="{Binding Title}"/>
                                            <LineBreak/>
                                            <LineBreak/>
                                            <!--<Run FontWeight="SemiBold" Text="{Binding Subtitle}"/>-->
                                        </Paragraph>
                                        <Paragraph LineStackingStrategy="MaxHeight">
                                            <InlineUIContainer>
                                                <Image x:Name="image" MaxHeight="480" Margin="0,20,0,10" Stretch="Uniform" Source="{Binding Image}"/>
                                            </InlineUIContainer>
                                        </Paragraph>
                                        </RichTextBlock>
    
                                
                                <FlipView x:Name="innerFlipView" Width="800" Height="700"  Margin="117,50,117,50" ItemsSource="{Binding Quotations}" HorizontalAlignment="Stretch" SelectionChanged="listQuotes_SelectionChanged_1">
                                    <FlipView.ItemTemplate>
                                        <DataTemplate>
                                            <StackPanel x:Name="QListPanel" Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Center">
                                                <TextBlock Name="txt1" Text="{Binding Quote}" Margin="0,0,75,0" TextWrapping="Wrap"  Style="{StaticResource SubheaderTextStyleQuote}"/>
                                            </StackPanel>
                                        </DataTemplate>
                                    </FlipView.ItemTemplate>
                                </FlipView>
                                    
    </StackPanel>  
    </ScrollViewer>
                        </UserControl>
                    </DataTemplate>
                </FlipView.ItemTemplate>
            </FlipView>

    Code behind is as follows:

     protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
            {
                if (pageState != null && pageState.ContainsKey("SelectedItem"))
                {
                    navigationParameter = pageState["SelectedItem"];
                }
    
                var item = Quotes.GetItem((String)navigationParameter);
    
                List<Quotations> list = new List<Quotations>();
    
                // reads the quotes data based on Author
                list = LoadQuotes(item.Title, item.Subtitle);
    
                item.Quotations = list;
    
                this.DefaultViewModel["Group"] = item.Group;
                this.DefaultViewModel["Items"] = item.Group.Items;
    
                this.flipView.SelectedItem = item;
            }
    

    The inner FlipView is bound to the item.Quotations.

    Now I need to get the selectedIndex or selectedItem for the "innerFlipView". (need this for sharing charm).

    I have tried:

    var selectedItem = (Quotations)this.innerFlipView.SelectedItem;
    But get an error: ItemDetailPage does not contain a definition for innerFlipView. Any idea how I can get this value?

    Wednesday, June 20, 2012 3:59 AM

Answers

  • Here is the code:

    FlipViewItem p = flipView.ItemContainerGenerator.ContainerFromItem(flipView.SelectedItem) as FlipViewItem;
    FlipView tes = FindVisualChildByName(p, "innerFlipView") as FlipView;
    var selectedItem = tes.SelectedItem as Quotations

    And here is the FindVisualChildByName method:

    private childItem FindVisualChild<childItem>(DependencyObject obj) where childItem : DependencyObject
    {
        for (int i = 0; i < VisualTreeHelper.GetChildrenCount(obj); i++)
        {
            DependencyObject child = VisualTreeHelper.GetChild(obj, i);
            if (child != null && child is childItem)
                return (childItem)child;
            else
            {
                childItem childOfChild = FindVisualChild<childItem>(child);
                if (childOfChild != null)
                    return childOfChild;
            }
        }
        return null;
    }

    Best Regard,

    Permagate

    • Marked as answer by netedk Wednesday, June 20, 2012 7:29 PM
    Wednesday, June 20, 2012 9:53 AM

All replies

  • Here is the code:

    FlipViewItem p = flipView.ItemContainerGenerator.ContainerFromItem(flipView.SelectedItem) as FlipViewItem;
    FlipView tes = FindVisualChildByName(p, "innerFlipView") as FlipView;
    var selectedItem = tes.SelectedItem as Quotations

    And here is the FindVisualChildByName method:

    private childItem FindVisualChild<childItem>(DependencyObject obj) where childItem : DependencyObject
    {
        for (int i = 0; i < VisualTreeHelper.GetChildrenCount(obj); i++)
        {
            DependencyObject child = VisualTreeHelper.GetChild(obj, i);
            if (child != null && child is childItem)
                return (childItem)child;
            else
            {
                childItem childOfChild = FindVisualChild<childItem>(child);
                if (childOfChild != null)
                    return childOfChild;
            }
        }
        return null;
    }

    Best Regard,

    Permagate

    • Marked as answer by netedk Wednesday, June 20, 2012 7:29 PM
    Wednesday, June 20, 2012 9:53 AM
  • Thanks Permagate, that worked!
    Wednesday, June 20, 2012 7:29 PM