связывать изображения в кнопках в магазине приложений Windows FlipView

Question

Я новичок в разработке универсальных приложений, у меня есть флип-шоу с 4 кнопками на каждой странице, каждая кнопка имеет изображение (всего 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 

тогда я определяю мой FlipView имени flipview1:

<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, как список у вас какие-либо идеи, пожалуйста, как я могу исправить код

спасибо за помощь

Answer 1

Во-первых, если вы хотите 4 изображений в FlipView странице вашего SampleItem должна содержать 4 путь к изображениям:

public class SampleItem 
{ 
    public string Image1 { get; set; } 
    public string Image2 { get; set; } 
    public string Image3 { get; set; } 
    public string Image4 { get; set; } 
} 

Во-вторых, если вы хотите 2 страницы с 4 изображениями вы должны создать список с 2-мя объектами SampleItem

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 
}; 

И, наконец, вы должны установить ItemsSource для FlipView

flipView1.ItemsSoruce = pages; 

Ваш код не работает должным образом потому что вы создали список из 8 элементов, и каждый элемент имеет только одно из свойств свойства. Вот почему вы получаете 8 страниц и отображается только одно изображение.

Btw Я уже отвечал на очень похожий вопрос (я думаю, что его Yours один) flipview in a universal windows app