showing Image swapping like picture gallery in Windows Phone C#

Question

I am not able to make smooth swapping like image gallery in windows phone.

I tried flip gesture listener and its able to swap image but its not swapping smoothly.

I tried to search but didn't got any answer. I am trying to show a list of images in gallery view manner.I am struggling from past 3 days. Please it will be a help if you give me some suggestion or link.

Answer 1

This is a simple example i just built to show you how it has to be done.. hope u find it helpful

<phone:PhoneApplicationPage xmlns:Controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"  
x:Class="PhotoChooser.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <ListBox x:Name="lbImages">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Controls:Panorama>
                        <Controls:PanoramaItem>
                            <Image Source="{Binding ImageName}"/>
                        </Controls:PanoramaItem>
                    </Controls:Panorama>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Grid>

and the class file for this designer goes something like this

  public partial class MainPage : PhoneApplicationPage
{
    public MainPage()
    {
        InitializeComponent();

        PanoramaItem panItem = new PanoramaItem();
        List<ImageList> imgList = new List<ImageList>();


        imgList.Add(new ImageList() { ImageName = ImagePath.Image4 });
        lbImages.ItemsSource = imgList;
    }

    public class ImageList
    {
        public string ImageName { get; set; }
    }
}

This actually works smoothly and looks good too.. There are few more ways to achieve what you are trying. Do let me know if this works or not. I will suggest others if this doesn't work for u!