1

我想使用一个有 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>

我创建了一个名为“ButtonImages”的类，其中包含图像 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 来调用图像并将它们放在翻转视图页面的每个按钮中：

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

结果我得到的是 8 页而不是 2 页，每页包含 4 个具有相同图像的按钮，我有什么想念的吗？？非常感谢您的帮助

4

0 回答 0