1

我想像这张图片一样在我的代码中添加一个翻转视图， 在此处输入图像描述

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

在此处输入图像描述

这是我的代码，

<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 应用程序上工作
谢谢你的帮助

4

1 回答 1

1

发生这种情况是因为您将 2x 相似的网格彼此靠近ItemTemplate。ItemTemplate为每个项目定义视图（在这种情况下为 FlipView 的每个页面）。如果您将设置ItemsSourceFlipView，则此集合中的每个项目都将完全复制 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 个按钮。您可以ItemsSource为您设置 FlipView。flipView1.ItemsSource = /* collection of models */

@编辑

如果您想使用绑定并在其中设置Image，Button.Content您将需要包含单个 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

于 2015-12-06T01:09:19.787 回答