通用 Windows 应用程序中的翻页视图 [英] flipview in a universal windows app
问题描述
我想像这张图片一样在我的代码中添加一个翻转视图，
I want to add a flipview in my code like this image,
但是当我在每个页面中滑动时，我在所有页面中都会得到这个结果:
but I get this result in all pages when I slide in every page:
这是我的代码，
<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 应用程序上工作
感谢帮助
have you please any idea how can I correct my code and use the databinding in this case,I work on a universal windows App
thanks for help
推荐答案
发生这种情况是因为您在 ItemTemplate 中将 2x 相似的网格彼此靠近放置.ItemTemplate 为每个项目(在本例中为 FlipView 的每个页面)定义视图.如果您将设置 FlipView 的 ItemsSource，则此集合中的每个项目都将完全复制 ItemTemplate.您可以像这样修复 XAML:
It happen because you put 2x similar grids close to each other in ItemTemplate. ItemTemplate define view for each item (each page of FlipView in this case). If you will set ItemsSource of FlipView, each item in this collection will exactly copy of ItemTemplate. You can fix your XAML like that:
<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 =/* 模型集合 */
I removed one grid with buttons and outer grid. Now one page will contains 4 buttons.
You can set ItemsSource for you FlipView. flipView1.ItemsSource = /* collection of models */
@edit
如果您想使用绑定并在 Button.Content 中设置 Image，您将需要包含单个 FlipView 项目中每个按钮的图像源的类.例如:
If you want to use binding and set Image in Button.Content you will need class which will contains Image sources for each button in single FlipView item. For example:
public class ButtonImages
{
public string Image1 { get; set; }
public string Image2 { get; set; }
public string Image3 { get; set; }
public string Image4 { get; set; }
}
那么你应该用这个类的对象准备集合.
Then you should prepare collection with objects of this class.
var flipViewPages = new List<ButtonImages>();
\\ prepare your collection - set Image1, Image2.. properties and add these objects to collection
flipView1.ItemSource = flipViewPages
然后在 XAML 中你可以使用 {Binding}
Then in XAML you can use {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
If you need more information about binding you should look for it on other posts and sites. https://msdn.microsoft.com/library/ms752347(v=vs.100).aspx
这篇关于通用 Windows 应用程序中的翻页视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
