Windows 10 IoT Xaml 动态添加图像到 flipview

Question

我的项目中有一个包含图像的文件夹。这些图像应该加载到 flipview-Control 中，它会显示它们并在 3 秒后显示下一张。切换已经有效，但我无法显示图像。

public MainPage()
{
    this.InitializeComponent();
    String path = Directory.GetCurrentDirectory() + @"\Imports";
    foreach (String imgurl in Directory.GetFiles(path))
    {
        String filename = Path.GetFileName(imgurl);
        Uri uri = new Uri("ms-appx:///" + filename);
        var image = new Image
        {
            Source = new BitmapImage(uri)
        };
        // fv is my flipview
        fv.Items.Add(image);
    }

    timer = new DispatcherTimer()
    {
        Interval = TimeSpan.FromSeconds(3)
    };
    timer.Tick += ChangeImage;
    timer.Start();
}

private void ChangeImage(object sender, object o)
{
    var totalItems = fv.Items.Count;
    var newItemIndex = (fv.SelectedIndex + 1) % totalItems;
    fv.SelectedIndex = newItemIndex;
}

我的 XAML-代码如下所示：

<FlipView x:Name="fv" HorizontalAlignment="Left" VerticalAlignment="Top" Width="1280" Height="720" SelectionChanged="flipView_SelectionChanged"></flipview>

正如我所说，滑动有效，但图像未显示。我错过了什么？另外，

fv.Items.Count();

总是告诉我，它包含的图像数量是我在 "imports" 文件夹中的两倍。为什么？

编辑：

private readonly DispatcherTimer timer;

    public MainPage()
    {
        this.InitializeComponent();

        String path = Directory.GetCurrentDirectory() + @"\Imports";
        fv.ItemsSource = Directory.GetFiles(path);

        timer = new DispatcherTimer()
        {
            Interval = TimeSpan.FromSeconds(3)
        };
        timer.Tick += ChangeImage;
        timer.Start();
    }

    private void ChangeImage(object sender, object o)
    {
        var totalItems = fv.Items.Count;
        var newItemIndex = (fv.SelectedIndex + 1) % totalItems;
        fv.SelectedIndex = newItemIndex;

    }

Answer 1

您必须添加一个 ItemTemplate 才能显示图像：

<FlipView x:Name="fv" HorizontalAlignment="Left" VerticalAlignment="Top" Width="1280" Height="720" SelectionChanged="flipView_SelectionChanged">
    <FlipView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Image Source="{Binding PathToImage}" Stretch="UniformToFill" />
            </Grid>
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

Source 只需要一个图像路径即可。这意味着您可以在 code-behind:

中执行此操作

String path = Directory.GetCurrentDirectory() + @"\Imports";
fv.ItemsSource = Directory.GetFiles(path);

对于 fv.Items.Count(); 的意外 return 值：您是否转储了 collection 中的项目？类似于

foreach(var item in fv.Items.Count()) System.Diagnostics.Debug.WriteLine(item);

或者，您可以将所有图像添加到新列表<>，并将该列表设置为 ItemsSource

String path = Directory.GetCurrentDirectory() + @"\Imports";
var newSource = new List<Image>();
foreach (String imgurl in Directory.GetFiles(path))
{
    String filename = Path.GetFileName(imgurl);
    Uri uri = new Uri("ms-appx:///" + filename);
    var image = new Image
    {
        Source = new BitmapImage(uri)
    };
    // fv is my flipview
    newSource.Add(image);
}
fv.ItemsSource = newSource;

当您设置 ListView 的 ItemsSource 时，ListView 将为每个 object 生成一个项目。这些项目中的每一项都将 object 设置为 DataContext。当您使用绑定表达式时，您告诉 XAML 从当前 DataContext 加载给定的属性。 {Binding PathToIMage} 将从设置为 DataContext 的 object 中获取 PathToImage 的值。（作为旁注：不指定路径，只写 {Binding} 得到整个 object。因此，如果将字符串设置为 DataContext，{Binding} 将 return 的值字符串。)

您可以阅读有关数据绑定的内容here。

我认为只需将以下行粘贴到您的代码中就可以工作：
改变这个...

String path = Directory.GetCurrentDirectory() + @"\Imports";
foreach (String imgurl in Directory.GetFiles(path))
{
    String filename = Path.GetFileName(imgurl);
    Uri uri = new Uri("ms-appx:///" + filename);
    var image = new Image
    {
        Source = new BitmapImage(uri)
    };
    // fv is my flipview
    fv.Items.Add(image);
}

...到此..

String path = Directory.GetCurrentDirectory() + @"\Imports";
fv.ItemsSource = Directory.GetFiles(path).Select(p => "ms-appx:///" + p);

...还有这个...

<Image Source="{Binding PathToImage}" Stretch="UniformToFill" />

...至此

<Image Source="{Binding}" Stretch="UniformToFill" />

Windows 10 IoT Xaml 动态添加图像到 flipview

Windows 10 IoT Xaml dynamically add images to flipview

c#

xaml

win-universal-app

raspberry-pi2

windows-10-iot-core