Question

我想使用2页的flipview，每页四个按钮，在每个按钮中我想从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>

我创建了一个名为＆＃34; ButtonImages＆＃34;包含图像URI：

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来调用图像并将它们放在flipview页面的每个按钮中：

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

我得到的结果是8页不是2页，每页包含4个具有相同图像的按钮，我想念任何东西？非常感谢你的帮助

FlipView和图像集合

0 个答案: