使用C#/ Xaml在网格中显示可更改数量的图像

时间:2013-01-08 12:01:51

标签: c# windows image xaml

我有一个方法可以检索图像的绝对路径列表。我希望使用这些检索到的值来显示Windows 8应用程序内部的图像网格。注意事项是列表可以是任何大小,我希望图像填满屏幕并继续向下。

这似乎是一个非常简单的问题,但我找不到任何关于如何使用Google / Bing执行此操作的明确答案 - 所以我说我会在这里发布,因为有人知道在这种情况下该怎么做

目前,我只是从我的音乐文件夹中检索文件列表,并将它们附加到屏幕上显示的字符串中 - 没有图像出现,我不知道如何使用动态来完成这项工作图像数量。有人可以帮我吗?

到目前为止的代码:

检索音乐文件夹中的图像:

 private async void SearchButton_Click(object sender, RoutedEventArgs e)
        {
            StorageFolder musicFolder = KnownFolders.MusicLibrary;

            List<string> fileTypeFilter = new List<string>();
            fileTypeFilter.Add(".png");

            QueryOptions queryOptions = new QueryOptions(CommonFileQuery.OrderBySearchRank, fileTypeFilter);
            //use the user's input to make a query
            queryOptions.UserSearchFilter = InputTextBox.Text;
            StorageFileQueryResult queryResult = musicFolder.CreateFileQueryWithOptions(queryOptions);

            StringBuilder outputText = new StringBuilder();

            //find all files that match the query
            IReadOnlyList<StorageFile> files = await queryResult.GetFilesAsync();
            //output how many files that match the query were found
            if (files.Count == 0)
            {
                outputText.Append("No files found for '" + queryOptions.UserSearchFilter + "'");
            }
            else if (files.Count == 1)
            {
                outputText.Append(files.Count + " file found:\n\n");
            }
            else
            {
                outputText.Append(files.Count + " files found:\n\n");
            }

            //output the name of each file that matches the query
            foreach (StorageFile file in files)
            {
                outputText.Append(file.Name + "\n");
            }

            OutputTextBlock.Text = outputText.ToString();
        }

用于OutputTextBlock的XAML显示文件名,但没有图像:

<Grid x:Name="Output" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Top">
    <TextBlock x:Name="OutputTextBlock" Style="{StaticResource BasicTextStyle}" TextWrapping="Wrap"/>
</Grid>

1 个答案:

答案 0 :(得分:1)

我不确定这是否适用于Windows 8应用程序...但在WPF中,我会尝试这样的:

<ItemsControl ItemsSource="{Binding Path=YourListOfPaths}" 
              HorizontalContentAlignment="Stretch">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

ItemsSource的{​​{1}}绑定到您的文件路径列表(eG an ItemsControl),ObservableCollection<string>描述每个项目的显示方式 - 我只是对每个文件使用ItemTemplate控件。 Image绑定到项目本身(这是一个文件路径)。