flipview в универсальном приложении Windows

Я хочу добавить в свой код перевернутый вид, как это изображение, введите здесь описание изображения

но я получаю этот результат на всех страницах, когда я просматриваю каждую страницу:

введите здесь описание изображения

это мой код,

<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
спасибо за помощь


win-universal-app windows-10-universal
person hanali    schedule 06.12.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это происходит из-за того, что вы помещаете 2 одинаковых сетки близко друг к другу в ItemTemplate. 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 кнопки. Вы можете установить 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

person Tomasz Pikć    schedule 06.12.2015
comment
спасибо, сэр, это работает нормально, но что, если я хочу добавить в каждую кнопку на каждой странице набор изображений, должен ли я использовать: ‹Button.Content› ‹Image Source={Binding}/› ‹/Button.Content› - person hanali; 06.12.2015