通用 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 的每个页面）。如果您将设置 FlipView 的 ItemsSource，则此集合中的每个项目都将完全复制 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 */

@edit

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

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

那么你应该用这个 class.

的对象准备集合

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

通用 windows 应用中的翻转视图

flipview in a universal windows app

win-universal-app

windows-10-universal