FlipView control is not available in Windows Phone

问题:

FlipView control is not available in Windows Phone 8 SDK, what are the alternate approach for implementing similar functionality?

回答1:

There are a few options here. If you only want to display a fixed number of "pages", you can use the Panorama app. If you have a lot of pages to display, you'll want to use the pivot control.

If you absolutely have to re-implement the FlipView, you can do this by putting "left" and "right" buttons in the application bar. You'll need to build your own content area with a custom control. If you're going for a "cool" gesture-based navigation, you'll want to get the toolkit.

回答2:

Here is the customized FlipView control for WP8 like WINRT FlipView Control...

Step 1 : Add a new Usercontrol and name it as "FlipView.xaml"

Step 2 : Add following xaml in "FlipView.xaml"

 <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
    <ContentPresenter  Name="contentPresenter"/>
    <Button BorderThickness="0" Name="leftButton" FontSize="70" Margin="-25" HorizontalAlignment="Left" VerticalAlignment="Center" Content="&lt;" Click="Button_Click"/>
    <Button BorderThickness="0" Name="rightButton" FontSize="70" Margin="-25" HorizontalAlignment="Right" VerticalAlignment="Center" Content="&gt;" Click="Button_Click_1"/>
</Grid>

Step 3 : Add the following code in the "FlipView.cs"

public partial class FlipView : UserControl
{
    public FlipView()
    {
        InitializeComponent();
        Datasource = new List<object>();
        SelectedIndex = 0;
    }

    private IList Datasource;
    public static readonly DependencyProperty ItemTemplateProperty =
        DependencyProperty.Register("ItemTemplate", typeof(DataTemplate), typeof(FlipView), new PropertyMetadata(default(DataTemplate)));

    public DataTemplate ItemTemplate
    {
        get { return (DataTemplate)GetValue(ItemTemplateProperty); }
        set
        {
            SetValue(ItemTemplateProperty, value);
            contentPresenter.ContentTemplate = value;
            contentPresenter.Content = SelectedItem;
        }
    }

    public static readonly DependencyProperty ItemsSourceProperty =
       DependencyProperty.Register("ItemsSource", typeof(IList), typeof(FlipView), new PropertyMetadata(default(IList)));

    public IList ItemsSource
    {
        get { return (IList)GetValue(ItemsSourceProperty); }
        set
        {
            SetValue(ItemsSourceProperty, value);
            Datasource = value;
            SelectedIndex = SelectedIndex;
        }
    }

    public static readonly DependencyProperty SelectedIndexProperty =
        DependencyProperty.Register("SelectedIndex", typeof(int), typeof(FlipView), new PropertyMetadata(default(int)));

    public int SelectedIndex
    {
        get { return (int)GetValue(SelectedIndexProperty); }
        set
        {
            SetValue(SelectedIndexProperty, value);

            rightButton.Visibility = leftButton.Visibility = Visibility.Visible;
            if (SelectedIndex == 0)
            {
                leftButton.Visibility = Visibility.Collapsed;
            }

            if (SelectedIndex + 1 == Datasource.Count)
            {
                rightButton.Visibility = Visibility.Collapsed;
                SelectedItem = Datasource[SelectedIndex];
            }

            if (Datasource.Count > SelectedIndex + 1)
            {
                SelectedItem = Datasource[SelectedIndex];
            }
        }
    }

    public static readonly DependencyProperty SelectedItemProperty =
        DependencyProperty.Register("SelectedItem", typeof(object), typeof(FlipView), new PropertyMetadata(default(object)));

    public object SelectedItem
    {
        get { return (object)GetValue(SelectedItemProperty); }
        set
        {
            SetValue(SelectedItemProperty, value);
            contentPresenter.Content = SelectedItem;
        }
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        SelectedIndex--;
    }

    private void Button_Click_1(object sender, RoutedEventArgs e)
    {
        SelectedIndex++;
    }
}

Step 4 : Now at the mainpage, add the namespace to use the flipview Usercontrol

Example: xmlns:FlipViewControl="clr-namespace:ImageFlip" (Note: It differs according to your Solution name).

Step 5 : Using the namespace, add the flipview control as follow as..

  <Grid x:Name="LayoutRoot" Background="Transparent">
    <FlipViewControl:FlipView Name="imgViewer">
        <FlipViewControl:FlipView.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding}" Stretch="Fill"/>
            </DataTemplate>
        </FlipViewControl:FlipView.ItemTemplate>
    </FlipViewControl:FlipView>
</Grid>

Step 6 : Add the following code in mainpage.cs

 // Constructor
    public MainPage()
    {
        InitializeComponent();

        // Sample code to localize the ApplicationBar
        //BuildLocalizedApplicationBar();
        imgViewer.ItemsSource = new List<string> { "/Images/1.jpg", "/Images/2.jpg", "/Images/3.jpg" };
    }

Hope this will help.

Thanks

回答3:

I've used the FlipView version from the Windows Phone Toolkit.

If you have the NuGet extension enabled, getting the Toolkit is very easy: right click your project in Solution Exporer -> Manage NuGet Packages -> make sure the Online is selected (in the left column) -> type in the Search field (right column) "toolkit" -> Click the Install button on the appropriate package.

Using the FlipView from code behind is as simple as:

Microsoft.Phone.Controls.FlipView flipView = new Microsoft.Phone.Controls.FlipView(); flipView.ItemSource = myItemSource; flipView.ItemTemplate = myItemTemplate; I preferred to use this approach because this FrameworkElement responds well to the swipe gesture.