在FlipView Windows应用商店的按钮中绑定图像

时间:2015-12-07 21:53:24

标签: c# xaml win-universal-app windows-10-universal

我是通用应用程序开发的新手,我有一个每页有4个按钮的flipview,每个按钮都有一个图像(总共8个图像),我创建了一个包含图像列表及其URls的模型类:

public class SampleItem
    {

    public string Image1 { get; set; }
    public string Image2 { get; set; }
    public string Image3 { get; set; }
    public string Image4 { get; set; }
    public string Image5 { get; set; }
    public string Image6 { get; set; }
    public string Image7 { get; set; }
    public string Image8 { get; set; }
}

public class ButtonImages
{
    public List<SampleItem> SampleItems { get; set; }

        public ButtonImages()
        {
            SampleItems = new List<SampleItem>();

            SampleItems.Add(new SampleItem()
            {

                Image1 = "images/1.png"
            });

            SampleItems.Add(new SampleItem()
            {

                Image2 = "images/2.png"
            });

        SampleItems.Add(new SampleItem()
        {

            Image3 = "images/3.png"
        });
        ...........//all the 8 images URIs

然后我定义了名为flipview1的flipview:

<Page.Resources>
        <DataTemplate x:Key="FlipViewItemTemplate">
            <Grid >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Button Grid.Column="0" Grid.Row="0" >
                    <Image Source="{Binding Image1}"/>
                </Button>
                <Button Grid.Column="1" Grid.Row="0">
                    <Image Source="{Binding Image2}" />
                </Button>
                <Button Grid.Column="0" Grid.Row="1">
                    <Image Source="{Binding Image3}"/>
                </Button>
                <Button Grid.Column="1" Grid.Row="1">
                    <Image Source="{Binding Image4}"/>
                </Button>
            </Grid>
        </DataTemplate>
</Page.Resources>
<FlipView x:Name="flipView1" ItemTemplate="{StaticResource FlipViewItemTemplate}"/>

这是我尝试获取8张图片并将它们放在每个页面的每个4个按钮中:

 private void getimages()
            {
                List<ButtonImages> T = new List<ButtonImages>();
                ButtonImages a;
                if(true)
                {
                    a = new ButtonImages();
                    T.Add(a);
                }
                flipView1.ItemsSource = T;
            }

但我得到8页,每页有4个按钮,每个页面中有一个按钮有一个图像,其他页面是空的:(

我调试了代码,并将T中的所有图像作为列表 你有什么想法我怎么能纠正代码

感谢您的帮助

1 个答案:

答案 0 :(得分:1)

首先,如果您希望每个FlipView页面有4张图片,则while(! word.equals("DONE")) { System.out.print("Please enter a word or DONE to exit: "); word = keyboard.next(); if(!word.equals("DONE")) { if(shortest != null){ if (word.length() < shortest.length()) { shortest = word; } }else{ shortest = word; } if (word.length() > longest.length()) { longest = word; } wordcount ++; } } 应包含4张图片路径:

SampleItem

其次,如果您想要2个包含4个图像的页面,则应创建包含2个public class SampleItem { public string Image1 { get; set; } public string Image2 { get; set; } public string Image3 { get; set; } public string Image4 { get; set; } }

对象的列表
SampleItem

最后你应该为你的FlipView设置ItemsSource

var page1 = new SampleItem()
{
    Image1 = "images/bar.png",
    Image2 = "images/cuisine.png",
    Image3 = "images/events.png",
    Image4 = ""//path to 4th image on 1st page
};
var page2 = new SampleItem()
{
    Image1 = "",//path to 1st image on 2nd page,
    Image2 = "",//path to 2nd image on 2nd page,
    Image3 = "",//path to 3rd image on 2nd page,
    Image4 = ""//path to 4th image on 2nd page
};
var pages = new List<SampleItem>()
{
    page1,
    page2
};

您的代码无法正常工作,因为您创建了包含8个元素的列表,并且每个元素只有一个Image属性设置。这就是为什么你得到8页并且只显示一个图像的原因。

顺便说一下,我已经回答了非常类似的问题(我认为是你的问题) flipview in a universal windows app