Image/Photo gallery like built-in WP7 - windows-phone-7

I'm looking for a photo gallery for Windows Phone 7. Something that looks and works the same as the built-in photo viewer (slide photo's using a flick action, resize using pinch, drag). When you flick the image you can see it sliding to the next image...and snaps the list to that image.
I already built the resize and drag functionality for the images. I just can't figure out how to create the actual photo slider.
Can anyone point me into the right direction?
Things i've tried:
Pivot Viewer (doesn't work because it interferes with the drag functions of the image, haven't been able to disable the pivot viewer touch)
Plain listbox (can't find how to snap to the current image)
Thanks in advance

Actually I've implemented exactly what you are saying in one of my apps,
You need to use Silverlight Control TOolkit's gesture listener to capture Drag and Pinch from touch.
define a CompositeTransformation for your image and set it's scale (on pinch) and Offset (in drag).
Obviously when the image is not zoom, drag can trigger going to next image.
To make it feel smoother, you may want to define a storyboard on your page resources to use (instead of just settings Offset)
I hope it can help/
Drag handlers pseudo code for slider effect:
<Canvas>
<Image x:Name="imgImage" Source="{Binding ...}" Width="..." Height="...">
<Image.RenderTransform>
<CompositeTransform x:Name="imgImageTranslate" />
</Image.RenderTransform>
</Image>
</Canvas>
private void GestureListener_DragCompleted(object sender, DragCompletedGestureEventArgs e)
{
if (e.Direction == System.Windows.Controls.Orientation.Horizontal)
{
var abs = Math.Abs(PANEL_DRAG_HORIZONTAL);
if (abs > 75)
{
if (PANEL_DRAG_HORIZONTAL > 0) // MovePrevious;
else //MoveNext();
e.Handled = true;
}
}
}
double PANEL_DRAG_HORIZONTAL = 0;
private void GestureListener_DragDelta(object sender, DragDeltaGestureEventArgs e)
{
if (e.Direction == System.Windows.Controls.Orientation.Horizontal)
{
PANEL_DRAG_HORIZONTAL += e.HorizontalChange;
var baseLeft = -imgImage.Width / 2;
if (PANEL_DRAG_HORIZONTAL > 75) imgImageTranslate.OffsetX = baseLeft + PANEL_DRAG_HORIZONTAL;
else if (PANEL_DRAG_HORIZONTAL < -75) imgImageTranslate.OffsetX = baseLeft + PANEL_DRAG_HORIZONTAL;
else imgImageTranslate.OffsetX = baseLeft;
}
}
}
private void GestureListener_DragStarted(object sender, DragStartedGestureEventArgs e)
{
PANEL_DRAG_HORIZONTAL = 0;
}

What about using a ScrollViewer with horizontal orientation? Of course, you will have to manually detect user actions and implement the proper response (with a couple of properly set Storyboards).
Even a better approach would be writing your own custom control that will view images. A good place to start is this - a CoverFlow control in Silverlight. Once you get the idea how you can bind your image collection to a custom control, all you need is handle user gestures on the currently selected item.

Related

Catch the event of slip with one finger to the right/left in a Windows Phone application

All is in the title. I'm actually developing a kind of image gallery and I would like the user slip with one finger to the right to see the next picture and to the left picture for the previous. Whence my question : Is there a way to capture the event when the user slip his finger on the screen in Windows Phone?
You can use the GestureService in the Silverlight Control Toolkit for Windows Phone. In your UI element, add the following piece of code.
XAML:
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Flick="OnFlick"/>
</toolkit:GestureService.GestureListener>
.cs:
private void OnFlick(object sender, FlickGestureEventArgs e)
{
var vm = DataContext as SelectedCatalogViewModel;
if (vm != null)
{
// User flicked towards left
if (e.HorizontalVelocity < 0)
{
// Load the next image
LoadNextPage(null);
}
// User flicked towards right
if (e.HorizontalVelocity > 0)
{
// Load the previous image
LoadPreviousPage();
}
}
}
Have a look here : Implement Swipe event on WP8
Hope it helps!

WP7 slider strange behavior

I'm developing Windows Phone 7 app. I have slider control on several page. However, when I go to a certain page within my app, all my slider controls in every page behave strangely.
The symptom is that user can only drag the thumb on slider for very short range.
The certain page I mentioned has no problem with code and XAML. Why does it cause ALL sliders to behave wrongly ?
The problem is that using toolkit Gesture will cause Slider to behave strangely. So when start manipulating on Slider, you should disable Gesture listener, then enable it when stop manipulating on Slider.
<Slider Height="84" Name="fixedSlider" ManipulationStarted="disableGestures" ManipulationCompleted="restoreGestures" />
GestureType prevGestureType;
private void disableGestures(object sender, ManipulationStartedEventArgs e)
{
prevGestureType = TouchPanel.EnabledGestures;
TouchPanel.EnabledGestures = GestureType.None;
fixedSlider.IsHitTestVisible = false;
}
private void restoreGestures(object sender, ManipulationCompletedEventArgs e)
{
TouchPanel.EnabledGestures = prevGestureType;
}
Slider class has property SmallChange and if you look on the slider template, you will see, that when user tap on slider - value changes only on the small change. If you want to avoid this, you need to create custom slider behavior.

How can I prevent Scrollviewer to scroll back when scrollbarvisibility is set to disabled? wp7

I have created a Scrollviewer in WP7, which harbors 3 usercontrol, each one of which hold as their content XAML created UserControls. This works fine. This scrollviewer should be able to scroll between these items, but make this not possible for the user to scroll. So when an item in one of these contents are clicked upon, the scrollviewer slides left or right depending on the item selected, and bring into view one of the other usercontrols. I use a mediator to accomplish this:
<Grid.Resources>
<Storyboard x:Name="ItemAnimation">
<DoubleAnimation x:Name="ItemAnimationContent"
Storyboard.TargetName="Mediator"
Storyboard.TargetProperty="ScrollableWidthMultiplier"/>
</Storyboard>
</Grid.Resources>
<ScrollViewer Name="ScrollableItemPanel"
Grid.Row="2"
Grid.RowSpan="3"
Grid.ColumnSpan="3"
VerticalScrollBarVisibility="Disabled"
HorizontalScrollBarVisibility="Disabled">
<StackPanel Orientation="Horizontal">
<UserControl Name="NewsListBoxControl" Width="480" />
<UserControl Name="DetailedItemControl" Width="480"/>
<UserControl Name="ExternalBrowserItemControl" Width="480"/>
</StackPanel>
</ScrollViewer>
<local:ScrollableItemAnimationMediator x:Name="Mediator"
ScrollViewer="{Binding ElementName=ScrollableItemPanel}"/>
In basic, this works fine too, I can navigate between the items, and load upon them the content as usercontrols. But the problem lies in granting the user the abillity to scroll. Before the item scrolls, I set the hittestvisibilty to true, and the horizontalscrollbarvisibility to visible. After the animation is done, I want to grant back the hittestvisibility and set the horizontalscrollbarvisibility to Disabled again. This latter is where the problem is: when I set the horizontalscrollbarvisibility to Disabled, the scrollviewer automatically brings back into view the first of three items in the stackpanel. How can I stop this? This is the code I use to scroll the mediator:
private void CreateDetailedArticleItem( Dictionary<string, string> itemQuery )
{
_articleDetailPage.ItemQuery = itemQuery;
DetailedItemControl.Content = _articleDetailPage as UserControl;
Animate( _articleDetailPage, 0.0f, 0.5f, 250 );
}
private void Animate( IContentControl control, float from, float to, double milliseconds )
{
//this eventhandler will fire when the animation has completed
EventHandler handler = null;
//we take away the User Input just for the moment, so that we can animate without the user interfering. Also, we make horizontalScroll Visible
IsUserEnabled = false;
//we then set the content of the animation. Where from will it move, towards where and in what duration?
ItemAnimationContent.From = from;
ItemAnimationContent.To = to;
ItemAnimationContent.Duration = TimeSpan.FromMilliseconds( milliseconds );
//we start the animation
ItemAnimation.Begin( );
//we tell the new control that it will appear soon, so it can load its main content
control.ViewWillAppear( );
//also, we tell the currentcontrol that it will disappear soon, so it can unload its content and eventhandlers and so on
CurrentControl.ViewWillDisAppear( );
//the handler is a delegate. This way, it becomes rather easy and clean to fire the completed event, without creating a strong reference ( well, actually,
//we do create a strong reference, but as soon as it is fired, we remove it again, shhhh! ).
handler = delegate( object sender, EventArgs e )
{
//as stated, we remove the eventlistener again, so it won't keep firing all the time
ItemAnimation.Completed -= handler;
//after the animation, we tell the new control that it is now in screen, and can start downloading its data
control.ViewDidAppear( );
//at the same time, the "current" control has fully moved out of view, so it can now fully unload all its content.
CurrentControl.ViewDidDisAppear( );
//now, all we have to do is to make sure that the next time an item is being loaded, the new content is spoken to, not the old one
CurrentControl = control;
//and finally, enable the users input again, and remove the horizontal scrollbarvisibility
IsUserEnabled = true;
};
ItemAnimation.Completed += handler;
}
private bool IsUserEnabled
{
set
{
//when the user can control the scrollviewer, then the horizontal scrollvisibility is disabled, so that the user cannot move horizontally,
//otherwise, so we only make it visible when the program needs to animate.
ScrollableItemPanel.IsHitTestVisible = value;
ScrollableItemPanel.HorizontalScrollBarVisibility = value ? ScrollBarVisibility.Disabled : ScrollBarVisibility.Visible;
}
}
I had already asked this question, then regarded it as answered, as I thought it to be answered, namely using ScrollbarVisibility.Hidden instead of ScrollbarVisibility.Disabled, only the scrollbarvisibility stays visible this way, and the user can still scroll. Is there a native way to deal with this problem?
Any help would be greatly appreciated. Greetz
Rather than fight the behavior of the native control it may be easier to just manipulate the position of items yourself using a custom control (wrapping your other controls) which animates between different visual states (adjust the translate transform) depending on the "selected" item.

Is there a way of finding out what would my orientation have been?

I'm currently writing a portrait only app, but I have a customer requirement that they'd like to implement a special feature if the phone is turned on its side.
To be clear they don't want the page to change orientation - so keeping the page as portrait works well here - but they do want to be able to detect the sideways change.
Is there anyway of finding this out (e.g. from rootframe or from some other object?) or do I have to access the Accelerometer data and work it out myself?
To be clear on this...
I'm trying to keep the page in portrait at all times.
and if I specify SupportedOrientations="portraitorlandscape" then keeping the page in portrait seems to be hard (correct me if I'm wrong, but it just doesn't seem to want to stay in portrait - the MS SDK is too good at making the page go landscape)
and if I don't specify SupportedOrientations="portraitorlandscape" then I don't get calls to OnOrientationChanged in either the page or the RootFrame
And as the icing on the cake... I need the phone to stay in portrait mode too - I need the SystemTray to stay at the top of the screen (the portrait top).
You can handle the OnOrientationChanged event which will return a PageOrientation enumeration.
Accepting this because of the comments:
#Stuart - You may find the Orientation Helper class in this starter kit useful. It uses the accelerometer, so I guess you'll have to use that, but it might save you time rolling out your own version: http://msdn.microsoft.com/en-us/library/gg442298%28VS.92%29.aspx#Customizing_Behavior
This might help, but for a case when arriving to this particular page, not for the initial page - so only partly answering the question. It trigs the OnOrientationChanged although no change has been done! (Figured out this solution after having tried to find a solution for two days) :
On the particular page, write in . xaml code
Orientation="None"
On the .xaml.cs side, write under
InitializeComponent();
Orientation = this.Orientation;
this.OrientationChanged += new EventHandler<OrientationChangedEventArgs>
(OnOrientationChanged);
and separately
void OnOrientationChanged(object sender, OrientationChangedEventArgs e)
{
if ((e.Orientation & PageOrientation.Landscape) != 0)
{
MyImage.Height = 480; //for example
}
{
MyImage.Width = 480; // for example
}
}
In my case, I placed the image as follows:
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel>
<Image x:Name="MyImage"/>
</StackPanel>
.. followed by other code, still loading during which time picture is shown ...
This decreases the size of the image when in Landscape mode when entering the page!
Got the solution, finally, after having seen Jeff Prosises site
Detect orientation change:
http://alan.beech.me.uk/2011/04/19/detecting-orientation-change-wp7dev/
I had to do a similar thing in one of my apps before where an image that is used as the background doesnt rotate but other items on the page do.
The code looks a bit like this:
protected override void OnOrientationChanged(OrientationChangedEventArgs e)
{
// Keep the image in the same position as in portrait
// But still allows other controls to rotate when orientation changes.
switch (e.Orientation)
{
case PageOrientation.LandscapeRight:
ForegroundImage.RenderTransform = new CompositeTransform { Rotation = 90 };
ForegroundImage.RenderTransformOrigin = new Point(0.5, 0.5);
ForegroundImage.Margin = new Thickness(158.592, -158.792, 158.592, -160.558);
break;
case PageOrientation.LandscapeLeft:
ForegroundImage.RenderTransform = new CompositeTransform { Rotation = 270 };
ForegroundImage.RenderTransformOrigin = new Point(0.5, 0.5);
ForegroundImage.Margin = new Thickness(158.592, -158.792, 158.592, -160.558);
break;
default: // case PageOrientation.PortraitUp:
ForegroundImage.RenderTransform = null;
ForegroundImage.RenderTransformOrigin = new Point(0, 0);
ForegroundImage.Margin = new Thickness();
break;
}
base.OnOrientationChanged(e);
}
Unfortunately there's no real work around for the system tray or app bar. For the system tray you could hide this though and then only show it (for a period of time) when the user taps or swipes near that part of the screen.

Enabling slide animation on windows phone while changing textBlock text

I have a textBlock which covers the entire screen. When the user flicks the screen horizontally, textBlock content is changed. I wanted to show that the new text is shown sliding on the screen when the user does flick gesture.
I tried this:
void listener_Flick(object sender, FlickGestureEventArgs e)
{
if (e.Direction == System.Windows.Controls.Orientation.Horizontal)
{
if (e.HorizontalVelocity.CompareTo(0.0) < 0)
{
SlideTransition sTx = new SlideTransition();
sTx.Mode = SlideTransitionMode.SlideLeftFadeIn;
ITransition transition = sTx.GetTransition(textBlock1);
transition.Completed += delegate
{
transition.Stop();
};
transition.Begin();
textBlock1.Text = "New Text";
}
}
}
Though, I do see a little animation for the new text But I don't see new text really sliding from right. How do I achieve this?
Thanks
I'm not clear how your process is supposed to work as you are only doing one animation. In theory you need to animations. One for sliding out and one for sliding in. If doing this with a single control you wouldn't be able to see the items moving in and out at the same time.
A very similar question was also asked previously: how to implement textblock flick animation windows mobile 7

Resources