How do I access a image control inside a XAML DataTemplate in a FlipView

Question

I am developing my first Windows Store app and i am facing a problem. I am trying to open an image from my computer and load it to an image control, which is in a DataTemplate cotrol, inside a FlipView . My FlipView looks like this:

 <FlipView
        x:Name="flipView"
        AutomationProperties.AutomationId="ItemsFlipView"
        AutomationProperties.Name="Item Details"
        TabIndex="1"
        Grid.RowSpan="2"
        ItemsSource="{Binding Source={StaticResource itemsViewSource}}" SelectionChanged="flipView_SelectionChanged" Margin="10,-58,334,126" Grid.ColumnSpan="2">

        <FlipView.ItemTemplate>
            <DataTemplate>
                <UserControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates">
                        <common:RichTextColumns x:Name="richTextColumns" Margin="80,0,60,30">
                            <RichTextBlock x:Name="richTextBlock" Width="560" Style="{StaticResource ItemRichTextStyle}" IsTextSelectionEnabled="False">
                                <Paragraph>
                                    <Run FontSize="20" FontWeight="Light" Text="{Binding Title}"/>
                                    <LineBreak/>
                                    <LineBreak/>
                                    <Run FontWeight="Normal" Text="{Binding Subtitle}"/>
                                </Paragraph>
                                <Paragraph LineStackingStrategy="MaxHeight">
                                    <InlineUIContainer>
                                        <Image x:Name="image" MaxHeight="480" Margin="0,20,0,-109" Stretch="Uniform" Source="{Binding Image}" AutomationProperties.Name="{Binding Title}"/>
                                    </InlineUIContainer>
                                </Paragraph>

                                <Paragraph>
                                    <Run FontWeight="SemiLight" Text="{Binding Content}"/>
                                </Paragraph>
                            </RichTextBlock>

                            <common:RichTextColumns.ColumnTemplate>
                                <DataTemplate>
                                    <RichTextBlockOverflow Width="560" Margin="80,0,0,0">
                                        <RichTextBlockOverflow.RenderTransform>
                                            <TranslateTransform X="-1" Y="4"/>
                                        </RichTextBlockOverflow.RenderTransform>
                                    </RichTextBlockOverflow>
                                </DataTemplate>
                            </common:RichTextColumns.ColumnTemplate>
                        </common:RichTextColumns>
                </UserControl>
            </DataTemplate>
        </FlipView.ItemTemplate>
    </FlipView>

While searching for a solution to this problem, I found a method on some post and I integrated it in the function for opening the image:

private async void Open_Click(object sender, RoutedEventArgs e)
{
    FileOpenPicker openPicker = new FileOpenPicker();
    openPicker.ViewMode = PickerViewMode.Thumbnail;
    openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
    openPicker.FileTypeFilter.Add(".jpg");
    openPicker.FileTypeFilter.Add(".jpeg");
    openPicker.FileTypeFilter.Add(".png");
    file = await openPicker.PickSingleFileAsync();

    if (file != null)
    {
        var Stream = await file.OpenAsync(FileAccessMode.Read);
        BitmapImage bi = new BitmapImage();
        bi.SetSource(Stream);

        if (flipView.SelectedItem == null)
        {
            return;
        }

        var _Container = flipView.ItemContainerGenerator.ContainerFromItem(flipView.SelectedItem);
        var _Children = AllChildren(_Container);
        var imageControl = _Children.OfType<Image>().First(c => c.Name.Equals("image"));
            imageControl.Source = bi;
     }
     else
     {
         var messageDialog = new MessageDialog("Error!");
         await messageDialog.ShowAsync();
     }

The AllChildren function:

public List<Control> AllChildren(DependencyObject parent)
{
    var _List=new List<Control>{};

    for(int i=0; i<VisualTreeHelper.GetChildrenCount(parent); i++)
    {
        var _Child=VisualTreeHelper.GetChild(parent, i);

        if(_Child is Control)
        {
            _List.Add(_Child as Control);
        }

       _List.AddRange(AllChildren(_Child));
    }

    return _List;
}

When i select the image to open, i get an Exception :

An exception of type 'System.InvalidOperationException' occurred in System.Core.dll but was not handled in user code.

Can anyone please help me?

Answer 1

Looks really complicated... and you just want to view an image inside a flipview (and add new images with the FileOpenPicker-control)?

I would bind my FlipView to a collection of images (or a viewmodel which contains an image property) and add each new image I got from the FileOpenPicker to this collection.

Maybe this samples help a bit: http://code.msdn.microsoft.com/windowsapps/XAML-FlipView-control-0ae45312 http://code.msdn.microsoft.com/windowsapps/File-picker-sample-9f294cba

Also have a look at the microsoft sample-resource: http://code.msdn.microsoft.com/windowsapps/