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.

your question isn't really clear. when you say smooth do you mean it's not animating or that the animation is running at very low frame rates? — morishuz, Apr 27 '13 at 09:12
@dr.mo let me make you clear. I have a list of images, now I want to view it like photo gallery image view in windows phone. I am not doing any animation here i am simply moving my images left to right or vise versa to view all images in the list . I am able to do that but the animation you find in windows phone gallery to view images that I am not able to do that.It should work like gallery. please help me ... — Sanghati Mukherjee, Apr 27 '13 at 09:17
@SanghatiMukherjee Do you want to view one picture after other or list of pictures in one single screen? If you let me know which one you want i have something in mind that can work.. i will try to give u the code or tell you how it can be done.. — Apoorva, May 07 '13 at 04:54
@apoorva I want the first option i.e. view one picture after other left to right vice verse ... just like gallery in windows phone. if you have some suggestion or code it will be a help .. — Sanghati Mukherjee, May 07 '13 at 06:12
I have a suggestion.. Take a panorama control and create panorama items dynamically and bind each picture to each panorama item — Apoorva, May 07 '13 at 11:45

score 1 · Accepted Answer · answered May 07 '13 at 12:21

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!

showing Image swapping like picture gallery in Windows Phone C#

1 Answers1