如何在FlipView中访问XAML DataTemplate内的图像控件

时间:2013-06-24 13:38:43

标签: c# wpf windows-8 windows-store-apps winrt-xaml

我正在开发我的第一个Windows Store应用,我遇到了问题。 我正在尝试从计算机中打开图像并将其加载到图像控件中,该图像控件位于DataTemplate内的FlipView cotrol中。我的FlipView看起来像这样:

 <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>

在搜索此问题的解决方案时,我在某些帖子上找到了一个方法,并将其集成到打开图像的函数中:

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();
     }

AllChildren功能:

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;
}

当我选择要打开的图像时,我会得到Exception

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

任何人都可以帮助我吗?

1 个答案:

答案 0 :(得分:0)

看起来很复杂......你只想在flipview中查看图像(并使用FileOpenPicker控件添加新图像)?

我会将我的FlipView绑定到一组图像(或包含图像属性的视图模型),并将我从FileOpenPicker获得的每个新图像添加到此集合中。

也许这个样本有点帮助: http://code.msdn.microsoft.com/windowsapps/XAML-FlipView-control-0ae45312 http://code.msdn.microsoft.com/windowsapps/File-picker-sample-9f294cba

另请查看microsoft示例资源: http://code.msdn.microsoft.com/windowsapps/