Callisto FlipViewIndicator不工作

Question

这是我的MainPage.xaml.cs

using System;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Imaging;

namespace FlipViewTest
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            this.addItemsToFlipView();
        }

        private void addItemsToFlipView()
        {
            for(int i = 0; i < 9; i++)
            {
                string imageUri = String.Format(@"ms-appx:///Assets/Images/Screens-0{0}.jpg",i+1);
                Uri uri = new Uri(imageUri);
                BitmapImage image = new BitmapImage(uri);
                mainFlipView.Items.Add(image);
            }
        }
    }
}

这是我的MainPage.xaml

<Page
    x:Class="FlipViewTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FlipViewTest"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:callisto="using:Callisto.Controls"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <FlipView x:Name="mainFlipView">
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <Image Source="{Binding}"/>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>
        <callisto:FlipViewIndicator FlipView="{Binding ElementName=mainFlipView}" />
    </Grid>
</Page>

当我移除

 `<callisto:FlipViewIndicator FlipView="{Binding ElementName=mainFlipView}" />` 

从xaml应用程序工作，当我添加它回来，它只是显示第一个图像，没有控制，我无法翻转图像。

如何正确添加callisto翻转视图指示器？

Answer 1

在比较了callisto的样本程序和矿山之后，我找到了解决方案。这是我的MainPage.xaml.cs：

using Callisto.Controls;
using System;
using System.Collections.ObjectModel;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Imaging;

namespace FlipViewTest
{
    public sealed partial class MainPage : Page
    {
        public ObservableCollection<BitmapImage> FlipImages = new ObservableCollection<BitmapImage>();

        public MainPage()
        {
            this.InitializeComponent();
            this.addItemsToFlipView();
        }

        private void addItemsToFlipView()
        {
            for (int i = 0; i < 9; i++)
            {
                string imageUri = String.Format(@"ms-appx:///Assets/Images/FlipImage-0{0}.jpg", i + 1);
                Uri uri = new Uri(imageUri);
                BitmapImage image = new BitmapImage(uri);
                FlipImages.Add(image);
            }
            mainFlipView.ItemsSource = FlipImages;
        }
    }
}

下面是MainPage.xaml：

<Page
    x:Class="FlipViewTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FlipViewTest"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:callisto="using:Callisto.Controls"
    mc:Ignorable="d">


    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <FlipView x:Name="mainFlipView">
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <Image Source="{Binding}"/>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>
        <callisto:FlipViewIndicator 
            x:Name="foo" 
            FlipView="{Binding ElementName=mainFlipView}" Margin="0,10" Grid.Row="1" HorizontalAlignment="Center"/>

    </Grid>
</Page>