flipview in a universal windows app

Question

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:

this is my code,

<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>

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

Tomasz Pikć Tomasz Pikć · Accepted Answer · 2015-12-06T01:09:19

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>

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

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

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>

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

flipview in a universal windows app

1 Answers