What I wud like my app to ideally do is this, to show pivots with their contents in portrait mode and to show a graph when the phone is tilted and set to landscape mode.
I have used OnOrientationChanged() to detect the orientation changes.
Do i have to navigate to a new page if i have to show the graph? Or can i manage it in the same pivot page??
Again does windows phone have graphing tools? or have to rely on the 3rd party tools?
Alfah
Why not just draw both controls and in OrientationChanged adjust the visibilities to what you need? Remember to set your controls correctly for the initial state, too...
protected override void OnOrientationChanged(OrientationChangedEventArgs e)
{
if (e.Orientation == PageOrientation.Portrait)
{
MyPivot.Visibility = Visibility.Visible;
MyGraph.Visibility = Visibility.Collapsed;
}
else
{
MyPivot.Visibility = Visibility.Collapsed;
MyGraph.Visibility = Visibility.Visible;
}
}
Related
Is there a (half) generic way to handle rotation/orientation in Xamarin Forms for different views and platforms (Android, iOS, WinPhone)?
The UI does rotate, and that is nice enough, though it wreaks havoc to my layout (absolute layout right now). I suppose with a Stacklayout I could make it a litte more flexible, but would then hit a road block somewhere else when the layout is more intricate.
Can I somehow display different views for portrait and landscape, with the same ViewModel? (I am using XLABs based MVVM.)
Possible solutions I have found:
http://blog.rthand.com/post/2014/07/24/Different-XAML-layouts-for-different-device-orienations-in-XamarinForms.aspx is lacking iOS and I wonder if it will handle MVVM too well, seems good though and I am investigating it right now
http://www.jimbobbennett.io/orientation-with-xamarin-forms/ sounds promising but the sample is iOS only, the linked GIT repository has no documentation at all, it just says "Xamarin Helpers"
http://www.sellsbrothers.com/posts/Details/13740 might also be a possibility for programmatically created views. Though in my tests I did not get a size changed event (though I listened at a different code place) for ios simulator when rotating. (The solution is based on size changed to detect rotation.)
If you are already using XLabs then you could use IXFormsApp and property 'Orientation' and event handler 'Rotation'. You would have to add the native observers per platform and set IXFormsApp's 'Orientation' there which would cause the event handler to invoke.
For example on iOS:
public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
var xapp = new XFormsAppiOS();
xapp.Init(this);
var resolverContainer = new SimpleContainer();
resolverContainer.Register<IXFormsApp>(xapp);
Resolver.SetResolver(resolverContainer.GetResolver());
var a = new App();
LoadApplication(a);
UIDevice.Notifications.ObserveOrientationDidChange((s, e) =>
{
xapp.Orientation = ... // set orientation here
});
Now you can monitor orientation changes by resolving IXFormsApp:
xapp = Resolver.Resolve<IXFormsApp>();
if (xapp.Orientation == Orientation.Landscape) { ... } else { ... }
xapp.Rotation += (sender, args) =>
{
switch (args.Value)
{
case Orientation.LandscapeLeft:
break;
default:
// etc.
break;
}
};
As for layouts I would imagine RelativeLayout would be the most convenient choice as you could put the orientation inside the Constraint's. On rotation make the layout refresh itself.
My app has 10 pages and all of them have black background. I want to let user change background color of all pages using radioButton in my app. How can I do this in easiest way?
Go through these blogs
1. Theme Forcing for Windows Phone 7 or,
2. Windows Phone Mango Custom application Theme
these might prove helpful to you. You can study these and modify to put them in your settings page.
Thank You :)
Ok so you have 10 pages and on each page you want to change the background colour of those pages through the settings menu. What you can do is use the Windows Phone IsolatedStorageSettings.
Firstly you want to initialize the IsolatedStorageSettings. You can do that like this:
IsolatedStorageSettings MyAppSettings = IsolatedStorageSettings.ApplicationSettings;
Then you will have to set a default value for it so it doesn't throw an exception. You can do this:
MyAppSettings.Add("PageBackgroundColor", "#000000"); // you can set whatever the default colour you want here. i.e. Black
the best place i think would be is to add this code in:
private void Application_Launching(object sender, LaunchingEventArgs e)
{
if (IsolatedStorageSettings.ApplicationSettings.Contains("PageBackgroundColor"))
{
// Don't do anything because you've already set the default background colour for the pages
}
else
{
// add the default color
}
}
Now in your MainPage you can reinitialize the IsolatedStorageSettings. Once you've done that you will want to get the value of the setting and depending on the value you will want to change the background color. To read the value:
string Sortval = (string)MyAppSettings["PageBackgroundColor"];
You can add this in the:
protected override void OnNavigatedTo(NavigationEventArgs e)
{
}
Or
public MainPage
{
InitializeComponent();
}
Remember that public MainPage will only run once and the OnNavigatedTo runs every time the page is loaded so if you want to update the background color right after adding the setting, OnNavigatedTo is the way to go but if you want to apply the changes after a restart, public Mainpage is it.
Now to read the value and change it you want to do something like:
string val = (string)MyAppSettings["PageBackgroundColor"];
if (val == "#000000")
{
//change to black
}
else if (val == "your hex color")
{
//change to whatever color
}
else if (val == "another hex color")
{
//...
}
Now to save the value you want to reinitialize the IsolatedStorageSettings in your settings page and to save the values it would be something like this:
MyAppSettings.Remove("PageBackgroundColor");
MyAppSettings.Add("PageBackgroundColor", "your hex color");
MyAppSettings.Save();
This is untested however It should give you the very basic idea on how to do it in terms of saving and loading setting and then applying it
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!
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.
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