I am using Xamarin.Form platform to use Map feature in my application. I could able to add an annotation on the map. However, I would like to know is there a way to add disclosure indicator on annotation that enables user to tap to go to DetailViewController.
using Xamarin.Forms.Maps;
Map map;
Title= "MapView";
map = new Map {
IsShowingUser = true,
HeightRequest = 100,
WidthRequest = 960,
VerticalOptions = LayoutOptions.FillAndExpand
};
map.Pins.Add(new Pin {
Position = new Position(29.7,-95.0177232),
Label = "Boardwalk"
});
I want something similar to the following screnshot.
I don't believe this is possible to provide your own views in the current Xamarin.Forms Maps component (v1.2.3x) as it is very locked down.
Update 1:-
Unfortunately not. This is a requested feature for Xamarin.Forms, as of October 24 here.
The only way around at present would be to create your own custom renderer.
Related
I'm trying to make a Flyout page (previously MasterDetailPage) take up a 1/3 of the screen for the Flyout and 2/3 for Detail.
I was able to accomplish this on iOS by using a custom renderer that's a modification of the Xamarin.Form's Flyout implementation
But there isn't any such implementation for Android and I can't figure out how to accomplish this.
Anyone know how to do this?
You could use custom renderer to do that.
The renderer of FlyoutPage in Android is FlyoutPageRenderer. The following link lists the renderer and native control classes that implement each Xamarin.Forms Page type:
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/renderers
The source code of FlyoutPageRenderer:
https://github.com/xamarin/Xamarin.Forms/blob/5.0.0/Xamarin.Forms.Platform.Android/AppCompat/FlyoutPageRenderer.cs
You could get the field _flyoutLayout in source code. Then, you could set the height and width like the code below.
[assembly: ExportRenderer(typeof(FlyoutPage), typeof(FlyoutPageCustomRenderer))]
namespace App14.Droid
{
class FlyoutPageCustomRenderer: FlyoutPageRenderer
{
public FlyoutPageCustomRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(VisualElement oldElement, VisualElement newElement)
{
base.OnElementChanged(oldElement, newElement);
var fieldInfo = GetType().BaseType.GetField("_flyoutLayout", System.Reflection.BindingFlags.Instance | System.Reflection.BindingFlags.NonPublic);
var _flyoutLayou = (ViewGroup)fieldInfo.GetValue(this);
var lp = new LayoutParams(_flyoutLayou.LayoutParameters);
lp.Width = 400;
lp.Height = 600;
lp.Gravity = (int)GravityFlags.Left;
_flyoutLayou.LayoutParameters = lp;
}
}
}
For better effect, i set the background color to pink. The background color is set in flyout menu page.
If you wanna more information about the FlyoutPage, you could refer to the MS docs.
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/flyoutpage
I'm trying to create dialog with a custom layout view and when I try do this:
import app = require('application');
import { GridLayout } from 'ui/layouts/grid-layout';
const dialog = new android.app.AlertDialog.Builder(app.android.currentContext);
const layout = new GridLayout();
dialog.setView(layout);
So I got the following error:
Uncaught Error: Cannot convert object to Landroid/view/View;
I tried change to:
dialog.setView(layout.android);
And
dialog.setView(layout.nativeView);
And the dialog is displayed empty.
How I can convert a NativeScript UI Object to a native android View?
you can't access nativeView or android property of nativescript view without adding it to Visual UI tree. when nativescript view is added to UI tree then it gets valid values for android and nativeView.
so you have to do something like this:
let container= <StackLayout>this.page.getViewById("stackContainer");
let layout = new GridLayout();
let label = new Label();
label.text = "Custom Alert working";
layout.addChild(label)
container.addChild(layout)
now you will have values for android and nativeView properties of GridLayout.
but after that you will not be able to use layout.android or layout.nativeView in setView because it already contains parent. so workaround for this that you remove this view from container's native view.
let nativeView=layout.nativeView;
container.nativeView().removeView(nativeView)
dialog.setView(nativeView).show();
also note that removing child from container will also reset child's android property to null. that's why we are saving reference to nativeView variable.
here is working playground demo is you need help:https://play.nativescript.org/?template=play-ng&id=4610ET
I have a Xamarin.Forms screen defined is the core library as below:
Content = new WebView
{
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand,
Source = "https://google.com",
};
As a result for iOS the content is overlapped with the system tray (top bar with system icons). You can see them in left top corner. The issue is the same tray is separated from webview for Android and I couldn't just add static top margin. I need to do it on "per platform" basis. Is there a way to accomplish that?
This is possible. You can use the Device.OnPlatform() method. Find out more in the API docs.
Usage could be:
Device.OnPlatform (iOS: () => webView.Padding = new Thickness (0, 20, 0, 0));
20 is the height of the statusbar.
There is also some documentation about platform tweaks here.
I'm new to WP7 and I want to know if there is any way to add items like a TextBlock to
a page dynamically using the .cs part??
Try this
var textBlock = new TextBlock();
// set some properties
YourMainContainer.Children.Add(textBlock); //
If you need more details just comment this
If you know the controls that you'd like to appear on the page dynamically, then I'd approach the problem by including those controls in the XAML and using the Visibility property on the controls to show and hide them. In Silverlight, the Visibility enumeration is limited to the values Visible and Collapsed, so when it isn't visible the it doesn't take up any space. You can control Visibility with data-binding by using a converter (search on "visibility bind converter") if you are intersted in pursuing that avenue. You can show/hide groups of controls by changing the Visibility of their parent control, such as StackPanel or custom control.
Try this one,
TextBlock txtmsg = new TextBlock();
txtmsg.Text = "New Program.";
txtmsg.Margin = new Thickness(10, 20, 10, 10);
txtmsg.TextWrapping = TextWrapping.Wrap;
txtmsg.FontSize = 28;
txtmsg.TextAlignment = TextAlignment.Center;
ContentPanel.Children.Add(txtmsg);
Is it possible to programmatically move from one panorama page/item to the next and get the same kind of animated sliding effect you get when sliding with a finger?
I can use the PanoramaControl.DefaultItem property to move to the expected item/page, but you won't get the animated sliding effect. Any ideas here?
Its possible, just put the setting of the DefaultItem between a SlideTransition Completed event and you are done:
public static class PanoramaExtensions
{
public static void SlideToPage(this Panorama self, int item)
{
var slide_transition = new SlideTransition() { };
slide_transition.Mode = SlideTransitionMode.SlideLeftFadeIn;
ITransition transition = slide_transition.GetTransition(self);
transition.Completed += delegate
{
self.DefaultItem = self.Items[item];
transition.Stop();
};
transition.Begin();
}
}
Use my_panorama.SlideToPage(1) to slide to the second page.
You can use below code :
panoramaRoot.DefaultItem = (PanoramaItem)panoramaRoot.Items[1];
it is not programatically possible to change the selected index of a panorama control. As you mention the only way of setting the index is using the DefaultItem property which is only useful when navigationg to the page which contains the panorama.
Here is another post that discusses it.
I think the easiest way to achieve this would be to create separate visual states for each item and create animated slide transitions for transitioning to each state. Then you can use VisualStateManager.GoToState(<page>, <state>, true); to initiate the state change.
No - the panorama control doesn't support programmatic manipulation like this.
If you want an experience like this, then you could try a hand-written panorama control - e.g. http://phone.codeplex.com/