WinRT FlipView like control in WP8

Question

In my app I need to display a collection of Images exactly like in the Windows Phone 8 Photo App where you can swipe right and left between the images.

I've tried both the Panorama and Pivot control but both controls don't behave like WinRTs FlipView.

Panorama fits quite well but appears to have the "Right-Peek" Amount hardwired into the control. (please correct me if I'm wrong)

Pivot in turn shows blackness during swipes (finger still down) and only displays the next image when you release your finger and the control scrolls the next item into place.

Any suggestions?

Answer 1

There is no direct equivalent to the FlipView in Windows Phone. The Panorama and Pivot controls have very different functionalities and are designed fro different purposes.

Telerik have a SlideView control which is very similar to the native control used by the photos app.
You can also get the Telerik controls free as part of the Nokia Premium Developer Program. (Worth investigating if you don't have a Dev Center subscription.)

Answer 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

Answer 3

I know it is not the same solution, but maybe you can tweak this coverflow example here... so that the images are not stacked but side by side?