通用 Windows 应用程序中的翻转视图

Question

我想像这张图片一样在我的代码中添加一个翻转视图，

但是当我在每一页中滑动时，我在所有页面中都会得到这个结果：

这是我的代码，

<FlipView x:Name="flipView1" HorizontalAlignment="Stretch"  VerticalAlignment="Stretch" Height="642">
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <Grid Style="{Binding HorizontalAlignment, ElementName=grid}" ScrollViewer.HorizontalScrollBarVisibility="Auto"  Background="Transparent" >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"  />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Grid  Style="{Binding HorizontalAlignment, ElementName=grid}" ScrollViewer.HorizontalScrollBarVisibility="Auto"  Background="Transparent" Margin="110,85,10,195" Grid.Row="0" Grid.Column="0">
                            <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"  />
                            <Button Grid.Column="1"  Grid.Row="0"  Background="#2c3389"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="22,24,25,10"/>
                            <Button Grid.Column="0"  Grid.Row="1"  Background="#2c3389"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="22,0,25,27" />
                            <Button Grid.Column="1"  Grid.Row="1"  Background="#2c3389"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="22,0,25,27"  />
                        </Grid>
                        <Grid  Style="{Binding HorizontalAlignment, ElementName=grid}" ScrollViewer.HorizontalScrollBarVisibility="Auto"  Background="Transparent" Margin="70,85,45,195" Grid.Row="0" Grid.Column="1">
                            <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"  />
                            <Button Grid.Column="1"  Grid.Row="0"  Background="#2c3389"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="22,24,25,10"/>
                            <Button Grid.Column="0"  Grid.Row="1"  Background="#2c3389"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="22,7,25,10" />
                            <Button Grid.Column="1"  Grid.Row="1"  Background="#2c3389"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="22,7,25,10"  />
                        </Grid>
                    </Grid>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>

请问您知道在这种情况下如何更正我的代码并使用数据绑定，我在通用 Windows 应用程序上工作
感谢帮助

Answer 1

这是因为您在 ItemTemplate 中放置了 2 个相似的网格彼此靠近。 ItemTemplate 为每个项目定义视图（在这种情况下为 FlipView 的每个页面）。如果您将设置 ItemsSource 的 FlipView，则此集合中的每个项目将完全复制 ItemTemplate。您可以像这样修复您的 XAML：

<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" />
                        <Button Grid.Column="1" Grid.Row="0" Background="#2c3389" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="22,24,25,10" />
                        <Button Grid.Column="0" Grid.Row="1" Background="#2c3389" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="22,0,25,27" />
                        <Button Grid.Column="1" Grid.Row="1" Background="#2c3389" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="22,0,25,27" />
                    </Grid>
                </DataTemplate>

我删除了一个带有按钮的网格和外部网格。现在一页将包含 4 个按钮。 您可以为您的 FlipView 设置ItemsSource。 flipView1.ItemsSource = /* collection of models */

@编辑

如果您想使用绑定并在Button.Content 中设置Image，您将需要包含单个FlipView 项目中每个按钮的图像源的类。例如：

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

那么你应该用这个类的对象准备集合。

var flipViewPages = new List<ButtonImages>();
\\ prepare  your collection - set Image1, Image2.. properties and add these objects to collection
flipView1.ItemSource = flipViewPages

然后在 XAML 中你可以使用{Binding}

<Button Grid.Column="0" Grid.Row="0" Background="#2c3389" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="22,24,25,10">
    <Image Source="{Binding Image1}" />
</Button>

如果您需要有关绑定的更多信息，您应该在其他帖子和网站上查找。 https://msdn.microsoft.com/library/ms752347(v=vs.100).aspx