How to do the navigations based on Gestures in windows phone apps? - windows

In my app I have a Home page and 2 other pages, So I want to navigate from one page to another and viceversa, When I'm horizontally swiping from right to left and when I'm horizontally swiping from left to right it should be navigated to Home page.
Suppose, We are on Home page on swiping from right to left( Home Page ---> Page1, again swipe ---> Page2, again swipe ---> Page1 ...Like that..... ) and on all the page if I swipe from left to right it should be navigated to Home page. How to do this in windows phone 8 app ?
My Code:
if (e.HorizontalVelocity < 0) //when it is true it should navigate to next index value
{
try
{
Pivot_Main.SelectedIndex++;// here every time it's showing the same index value it is not incrementing
switch (Pivot_Main.SelectedIndex)
{
case 0:
Pivot_Main.SelectedIndex = 0;
txtBlock_Pivot_Heading.Text = "Temperature";
var brush = new SolidColorBrush(Color.FromArgb(0xFF, 0x8C, 0xC6, 0x3F));
b_celcius = true;
temperature_Page_Clear();
txtBlock_OptText.Text = "ºC";
btn_OptText.Content = "ºC";
Grid_PivotHeading.Background = brush;
Canvas_Home.Background = brush;
Canvas_DisplayName.Width = 55;
// btn_OptText.SetValue(Canvas.LeftProperty, 380.0);
break;
case 1:
Pivot_Main.SelectedIndex = 1;
txtBlock_Pivot_Heading.Text = "Length";
length_Page_Clear();
b_meter = true;
}
}
}
Please Help me, Genuine help is appreciated.

You have multiple options here.
If you can manage to do things in one page then Pivot or Panorama controls will be sufficient.
Also,if you need that every page should be different and you want to use NavigationService.Navigate() to go from one page to another then, you have event called Flick.you can manage to handle left/right swipes through this through HorizontalVelocity and VerticalVelocity of that events.
To use Flick Gesture you will need to add this code in your xaml w.r.t. to your UI element:
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Flick="OnFlick"/>
</toolkit:GestureService.GestureListener>
and in .cs its handler:
private void OnFlick(object sender, FlickGestureEventArgs e)
{
// User flicked towards left
if (e.HorizontalVelocity < 0)
{
//your respective navigation to other page
}
// User flicked towards right
if (e.HorizontalVelocity > 0)
{
//your respective navigation to other page
}
Details of Gesture support you can get here

Related

FlipView doesn't show the arrows to navigate in desktop, when more items are added in runtime

I'm using FlipView to show some items in a page. The webservice I'm getting the data from support paging, so I'm adding the next page of items to the FlipView when the user has scrolled to the current last item e.g. if the page size is 5, I'm adding 5 more items whenever the SelectedIndex of FlipView is 4,9,14,19 etc. (index starts at 0).
FlipView has two tiny arrows that we can use in desktop environment (using Mouse) to navigate through the FlipView. When we are at the last item, the right arrow would disappear, because we cannot go any further. Now, if I add more items to the list at this point, the right arrow doesn't reappear, so it doesn't give the impression that there are more items in FlipView. The right arrow would only reappear if
We hover mouse on the left arrow
We click at the location where the right arrow should be
Which isn't a good solution and it requires further user education. Is there any way to address this issue?
Here is a git repo that shows the issue: https://github.com/4bh1sh3k/FlipViewDemo. To repro the issue, scroll till the last item, and then use the button below to add more items to the FlipView.
This should be determined by the control itself. If you do want the button displayed automatically, you may force the next button (which named NextButtonHorizontal in FlipView style and template) to visible after more items added. For how to get the NextButtonHorizontal button you could use VisualTreeHelper class. For example:
private void OnButtonClick(object sender, RoutedEventArgs e)
{
AddImageUris();
IEnumerable<Button> items = FindVisualChildren<Button>(myFlipView);
foreach (Button item in items)
{
if (item.Name == "NextButtonHorizontal")
{
item.Visibility = Visibility;
}
}
}
private static IEnumerable<T> FindVisualChildren<T>(DependencyObject depObj) where T : DependencyObject
{
if (depObj != null)
{
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(depObj); i++)
{
DependencyObject child = VisualTreeHelper.GetChild(depObj, i);
if (child != null && child is T)
{
yield return (T)child;
}
foreach (T childOfChild in FindVisualChildren<T>(child))
{
yield return childOfChild;
}
}
}
}
By the way, this can resolve your issue but I'm not very recommend that. Avoid using a flip view control for larger collections, for large collections, consider a ListView or GridView. More details please reference FlipView guidelines.

custom renderer to show title for each content page in a Xamarin tabbed page

I have a tabbed page which sits at the bottom of the screen and so has it's own custom renderer to achieve this.
I want to amend the renderer so that on UpdateSelectedTabIndex(Page page) the content pages get their own title, as this is overridden by the tabbed page it seems and no title is visible.
I was thinking along the lines of the code below but it doesn't work, can anyone point me in the right direction?
void UpdateSelectedTabIndex(Page page)
{
var index = Element.Children.IndexOf(page);
_bottomBar.SelectTabAtPosition(index, true);
if(index == 0)
{
page.Title = "HOME";
}
}

How to use carousel View in xamarin ios

I am trying to implement Images carousel View as per the below image.
I want to display multiple images using carousel view with highlighted dots when user scroll the images (Highlight the respective dot below the image) in Xamarin IOS.
I tried with iCarousel - Xamarin Component ( iCarousel Link ) to display images with dots. Here i am able to display the images in carousel view. Can any one suggest me to resolve this issue.
You can add a UIPageControl underneath the iCarousel view:
UIPageControl pageControl = new UIPageControl(frame));
pageControl.Pages = carousel.NumberOfItems;
pageControl.CurrentPage = carousel.CurrentItemIndex;
// For some reason I needed to set the back ground color
// for ValueChanged event to fire if you want pages to
// change when the UIPageControl is tapped.
pageControl.BackgroundColor = UIColor.Black;
View.AddSubview(pageControl);
Then handle the carousel.ScrollEnd event:
carousel.ScrollEnd += (sender, e) =>
{
pageControl.CurrentPage = carousel.CurrentItemIndex;
};
And if you want to be able to change the page by tapping the UIPageControl:
pageControl.ValueChanged += (sender, e) =>
{
carousel.CurrentItemIndex = pageControl.CurrentPage;
};
With a UIPageControl, you tap on the left or right of the control to go to the previous or next page, but you can't go to a specific page by clicking a dot. See: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIPageControl_Class/index.html
I added the iCarousel Component sample with the UIPageControl added here: https://github.com/jgold6/XamarinSupportSamples/tree/master/iOS-iCarouselWithPageControl

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!

Windows Phone 7 Selection_Changed automatically

currently I'm developing an app for WP7 but came across a little problem with a Listbox event call Selection_Change. The problem is that when i return to the page that contains the listbox the selection_change event triggers without being changed at all or without any user input. The listbox code is similar to this:
private void lsbHistory_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
int index = lsbHistory.SelectedIndex;
NavigationService.Navigate(new Uri("/Views/NextPage, UriKind.Relative));
}
On the page I navigate to, the only way out of the navigated page is by pressing back button or start button meaning that it will return to the page that contains the listbox. When I Navigate back the selection change triggers leading me sometimes to a exception. Has anyone been through this before?
Consider always checking if it's -1 (the default value).
private void lsbHistory_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
int index = lsbHistory.SelectedIndex;
if (index != -1)
{
NavigationService.Navigate(new Uri("/Views/NextPage, UriKind.Relative));
lsbHistory.SelectedIndex = -1; // Set it to -1, to enable re-selection.
}
}
Also, you should consider wrapping the Navigate call in Dispatcher.BeginInvoke to have a better, more smooth, page transition.
The event will be fired when the list is populated.
The simplest solution for you will probably be to add a check that there is nothing selected before triggering your navigation:
if (lsbHistory.SelectedIndex > -1)
{
// do navigation
}
One thing to notice is that when you navigate back to the page which containt the ListBox, the ListBox still has the SelectedItem set to the value it had when the user navigated away. This means that lsbHistory.SelectedIndex will get the index of the item which was selected when the user navigated forward.
Maybe there's something in your code which presumes that the ListBox's SelectedItem is null when the user navigates to the page?

Resources