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

时间:2015-08-07 06:38:11

标签: c# xaml win-universal-app raspberry-pi2 windows-10-iot-core

我的项目中包含一个包含图像的文件夹。应将这些图像加载到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();

总是告诉我,它包含的数量是我在&#34;进口&#34;中的两倍。夹。为什么呢?

编辑:

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;

    }

1 个答案:

答案 0 :(得分: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只需要图像的路径即可工作。这意味着您可以在代码隐藏中执行此操作:

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

对于fv.Items.Count();的意外返回值:您是否在集合中转储了项目?

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

或者,您可以将所有图像添加到新列表&lt;&gt;并将该列表设置为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将为每个对象生成一个项目。这些项中的每一项都将对象设置为DataContext。当您使用Binding表达式时,您告诉XAML从当前DataContext加载给定Property。 {Binding PathToIMage}将从设置为DataContext的对象中获取PathToImage的值。 (作为旁注:指定无路径并只写{Binding}获取整个对象。因此,如果将字符串设置为DataContext,{Binding}将返回字符串的值。)

您可以阅读有关DataBinding 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" />