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
Related
I'm following the maps example https://developer.xamarin.com/samples/xamarin-forms/customrenderers/map/circle/ to create custom renderer to overlay circles. It seems to be working fine for all 3 platforms except I am unable to find any click event for iOS.
I am building a xamarin forms app and able to find out the click event on both Android and UWP but iOS seems to be far fetched.
Is there any way to do it?
iOS doesn't provide the API which detects the click event.
As a alternative workaround, we can add UITapGestureRecognizer on the mapview and judge if the tap point locates inside the circle.
Solution
//xxx
nativeMap.AddOverlay(circleOverlay);
nativeMap.AddGestureRecognizer(new UITapGestureRecognizer(TapHandle));
void TapHandle(UITapGestureRecognizer tap)
{
MKMapView mapView = tap.View as MKMapView;
CGPoint tapPoint = tap.LocationInView(mapView);
CLLocationCoordinate2D tapCoordinate = mapView.ConvertPoint(tapPoint, tap.View);
MKMapPoint point = MKMapPoint.FromCoordinate(tapCoordinate);
foreach(IMKOverlay overlay in mapView.Overlays)
{
MKCircleRenderer render = GetOverlayRenderer(mapView, overlay) as MKCircleRenderer;
CGPoint datPoint = render.PointForMapPoint(point);
render.InvalidatePath();
if (render.Path.ContainsPoint(datPoint,false))
{
break;
}
}
}
I've got a TabView in my NativeScript page. The tabs content is programmatically populated.
How to hide / collapse the tabs buttons (because the tabs are switched programmatically)?
see Image above of TabView buttons bar - which needs to be collapsed
You can try
For ios:
var myTabView = page.getViewById("myTabView")
myTabView.ios.tabBar.hidden = true;
For android
myTabView.android.removeViewAt(1);
A better solution for android (I hope i translated it correctly from my working nativescript angular code)
const tabLayout = myTabView.android.tabLayout;
// use native android methods to hide the tabLayout containing the tab buttons
if(isFullscreen) {
tabLayout.setVisibility(android.view.View.GONE);
} else {
tabLayout.setVisibility(android.view.View.VISIBLE);
}
I'm writing a Forms app. How to position a view right at the bottom of the screen and when some entry is focused and the keyboard is visible, the view to be right above the keyboard? On android, it is possible to set Window.SetSoftInputMode(SoftInput.AdjustResize) and that will make the Content resize every time the keyboard is appearing/disappearing. However, I need the status bar to be transparent and SoftInput.AdjustResize doesn't work with WindowManagerFlags.TranslucentStatus. My question is, how do I position a view right above the keyboard without setting SoftInput.AdjustResize?
Take this example:
public Page1()
{
InitializeComponent();
var al = new StackLayout
{
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand
};
var button = new BoxView {Color = Color.Red, VerticalOptions = LayoutOptions.EndAndExpand};
var entry = new Entry {HorizontalOptions = LayoutOptions.Fill};
al.Children.Add(entry);
al.Children.Add(button);
Content = al;
Content.SizeChanged += (sender, args) =>
{
button.Layout(new Rectangle(0, Content.Height - 120, App.Dimensions.Width, 120));
};
}
If you run this code, when you'll press the input, nothing will change, the "button" will remain on the bottom of the screen not visible because of the overlaying keyboard.
If we add Window.SetSoftInputMode(SoftInput.AdjustResize) in MainActivity's onCreate it works fine, the box is moved above the keyboard on entry's focus.
Also, if we change Content = al; to Content = new ScrollView {Content = al};, it works fine.
However, if we add Window.AddFlags(WindowManagerFlags.TranslucentStatus); in MainActivity's onCreate, none of those methods work anymore.
Thanks in advance.
I'm writing a Forms app. How to position a view right at the bottom of
the screen and when some entry is focused and the keyboard is visible,
the view to be right above the keyboard?
If you are using Xamarin Forms, then wrapping your UI elements in a ScrollView should do the trick. Something like this if you are using XAML:
<ScrollView>
<ScrollView.Content>
// Your Original XAML content here
</ScrollView.Content>
<ScrollView
EDIT:
Looking at the example you just added, I THINK I know what is happening. So, the ScrollView Trick only works for elements that require keyboard input. I.e if you instead had an entry element at the bottom of the screen, and wrapped everything in a ScrollView like I suggested, then the keyboard should push the entry element up for you. However in your case you have a boxview at the bottom of the screen, which the keyboard simply runs over.
What you have for Content.SizedChanged is a good idea, however I don't think the size of the view actually changes when the keyboard pops up (at least, Content.SizeChanged isn't called when the keyboard pops up), so that part of your code is really only called on loading of the page from the MCVE you provided.
HOWEVER, I was able to move the 'button' up when the keyboard appears by doing this:
Replace
Content.SizeChanged += (sender, args) =>
{
button.Layout(new Rectangle(0, Content.Height - 120, App.Dimensions.Width, 120));
};
With
entry.Focused += (sender, e) =>
{
button.TranslationY -= 120;
};
You may have a heck of a time getting that magic translation number for all the different devices and orientations though. When I tested it on the iPhone 6 simulator I had to push way above 120 before I could see it above the keyboard.
Hope that helps!
I am developing an iPad app using Xamarin.Forms.
I would like my settingspage to be modal so it lay over the previous page like a popup.
I have been trying all solutions I could find and most of them seems to recommend me to call this from a button:
await Navigation.PushModalAsync(ModalSettingsPage);
What happens when I use it is that my settingspage comes in from below as a modal page but not as a popup, it covers the entire screen.
This is my current code:
//Setup button (action bar)
ToolbarItems.Add(new ToolbarItem
{
// Text = "Setup",
Icon = "settings1.png",
Order = ToolbarItemOrder.Default,
Command = new Command(() => Navigation.PushModalAsync(new ModalSettingsPage())) //Action to perfome on click , open modal view
});
Also, does anyone now if there is any good way to positions the ToolbarItems? I have two items and would like each one to be positioned at each side, but by default they are both positioned to the right.
With the evolution of Forms (currently 4.5.0), it has now become simple to push a modalpage which is not fullscreen. Use the following in your code-behind of your xaml contentpage:
using Xamarin.Forms;
using Xamarin.Forms.PlatformConfiguration;
using Xamarin.Forms.PlatformConfiguration.iOSSpecific;
namespace YourAppWithAModalPage
{
public class ModalPage : ContentPage
{
public ModalPage()
{
// iOS Solution for a ModalPage (popup) which is not fullscreen
On<iOS>().SetModalPresentationStyle(UIModalPresentationStyle.FormSheet);
}
}
}
There is nothing pre-made in Forms to give you a popup like I think you want. Instead, you would have to create this or use a third-party solution. For example, here is a "popup" implementation that might work for you.
i have gui the i created in the designer , simple one .
QMainWIndow that contains stackedWidget , the application starts with
stackedWidget index 0 that contains qwebkit widget and after some user flow ,it changes to stackedWidget
index 1 that contains QTree widget , to center the first widget i use in the QMainWindow constractor this line of code
this->setCentralWidget(ui.webView); but when the application switching to index number 1 im getting exception that is
coming from the switching command .
why ?
A stacked widget is a container widget that contains other widget. In your settings, you seems to use two stacked widget : a QWebKit widget and a QTreeWidget.
To have them displayed in the QMainWindow, you have to set the central widget of the QMainWindow to be the stacked widget and uses QStackedWidget::changeCurrentIndex() slot to pass from the first widget to the other.
Here is a code sample using a QPushButton and a QLabel as elements of the stacked widget.
QMainWindow *mainWindow = new QMainWindow();
QStackedWidget *stackedWidget = new QStackedWidget();
// stacked item 0
QPushButton *pushButton = new QPushButton("Here is a button");
stackedWidget->addItem(pushButton);
// stacked item 1
QLabel *label = new QLabel("Here is a label");
stackedWidget->addItem(label);
// add the stacked widget to the main window
mainWindow->setCentralWidget(stackedWidget);
To change the current displayed item from the button to the label, you can use:
stackedWidget->setCurrentIndex(1); // go to the label widget
stackedWidget->setCurrentIndex(0); // go back to the button widget
Alternative response to the comments. Are you sure you want to use a stacked widget? Actually, stacking widget are specialized to create sort of tab like presentation of widget. If you want to switch from one widget to the other you can use directly the QMainWindow::setCentralWidget() method as seen in the following code.
QMainWindow *mainWindow = new QMainWindow();
QVector< QWidget* > widgets;
// stacked item 0
QPushButton *pushButton = new QPushButton("Here is a button");
// stacked item 1
QLabel *label = new QLabel("Here is a label");
widgets << pushButton << label;
// add the first widget to the main window
mainWindow->setCentralWidget(widgets[0]);
When you want to switch to the other widget, you can use:
mainWindow->setCentralWidget(widgets[1]);
If you are trying to center align the web view, setCentralWidget is not what you think it is. A central widget is the main widget in a main window. The term central is meant to indicate it's the primary widget where you put your contents in, while tool bars, dock widgets, and status bar are like "accessory widgets."
To align, or otherwise position, a widget, take a look at QLayout and add a proper layout to your main window or the central widget.
It sounds like the QMainWindow central widget should be the stacked widget and not the webView.