c# - FlipView と画像のコレクション

Question

各ページに4つのボタンがある2ページのフリップビューで作業したい、各ボタンに8つの画像から別の画像を入れたい、Windowsユニバーサルアプリで作業している、このコードを試した：このコードで試したflipView のすべてのページに 4 つのボタン xaml のみを配置するには:

 <FlipView x:Name="flipView1" HorizontalAlignment="Stretch"  VerticalAlignment="Stretch" Height="642" Background="Transparent"  d:DataContext="{Binding Source={d:DesignInstance Type=local:ButtonImages, IsDesignTimeCreatable=True}}"   ItemsSource="{Binding SampleItems}">
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <Grid Background="Transparent">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Button Grid.Column="0" Grid.Row="0" Background="#2c3389" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="22,24,25,10" >
                            <Image Source="{Binding ImageUri}"/>
                        </Button>
                        <Button Grid.Column="1" Grid.Row="0" Background="#2c3389" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="22,24,25,10">
                            <Image Source="{Binding ImageUri}"/>
                        </Button>
                        <Button Grid.Column="0" Grid.Row="1" Background="#2c3389" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="22,0,25,27" >
                            <Image Source="{Binding ImageUri}"/>
                        </Button>
                        <Button Grid.Column="1" Grid.Row="1" Background="#2c3389" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="22,0,25,27" >
                            <Image Source="{Binding ImageUri}"/>
                        </Button>
                    </Grid>

                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>

画像 URI を含む「ButtonImages」という名前のクラスを作成しました。

public class SampleItem
{
    public string ImageUri { get; set; }
}

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

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

            SampleItems.Add(new SampleItem()
            {

                ImageUri = "images/bar.png"
            });

            SampleItems.Add(new SampleItem()
            {

                ImageUri = "images/cuisine.png"
            });
            ...... //the rest of 8 images list
        }
    }

次に、MainPage.xmal.cs コンストラクターで Datacontext を使用して画像を呼び出し、フリップビュー ページのすべてのボタンに配置しました。

public MainPage()
{
    this.DataContext = new ButtonImages();
    this.InitializeComponent();
}

その結果、2 ページではなく 8 ページになり、各ページには同じ画像のボタンが 4 つ含まれています。助けてくれてどうもありがとう