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

本文关键字:DataTemplate 图像 控件 XAML 访问 FlipView | 更新日期: 2023-09-27 18:19:37

我正在开发我的第一个Windows Store应用程序,但我遇到了一个问题。我正试图从计算机中打开一个图像,并将其加载到图像控件中,该控件位于FlipView中的DataTemplate控件中。我的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.

有人能帮我吗?

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

看起来真的很复杂。。。而您只想在flipview中查看图像(并使用FileOpenPicker控件添加新图像)?

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

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

还可以查看microsoft示例资源:http://code.msdn.microsoft.com/windowsapps/