NativeScript - How to convert xml layout to native view? - view

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

Related

Xamarin.Forms UWP - InvalidCastException when trying to set TextDecorations for TextBlock

In a Xamarin.Forms project, I'm trying to allow underlined Labels. So I have a custom renderer, and I'm trying to do something simple:
Control.TextDecorations = TextDecorations.Underline;
It compiles just fine, but when the app launches, I'm getting an InvalidCastException on that line which says:
System.InvalidCastException: 'Unable to cast object of type 'Windows.UI.Xaml.Controls.TextBlock' to type 'Windows.UI.Xaml.Controls.ITextBlock5'.'
Here's a screenshot of the exception:
Also, when inspecting the Control, I noticed there are a ton of InvalidCastException exceptions on other properties of the TextBlock control as well - here's a small sample:
Why is it trying to cast to a ITextBlock5 type? Is this a UWP bug? Is there a workaround to get underline to work?
The TextDecorations property is documented on MSDN to be supported on version 15063 and later.
You can use the ApiInformation class to check at runtime whether the property is avaiable or not.
According to the Microsoft documentation, the TextDecorations property wasn't introduced until version 15063. You're probably getting that exception because you're on an earlier version of Windows.
As a workaround, you can create an Underline() object and add a Run() object to the Underline object's Inlines collection, like this:
// first clear control content
Control.Inlines.Clear();
// next create new Underline object and
// add a new Run to its Inline collection
var underlinedText = new Underline();
underlinedText.Inlines.Add(new Run { Text = "text of xamarin element here" });
// finally add the new Underline object
// to the Control's Inline collection
Control.Inlines.Add(underlinedText);
Inside the custom renderer's OnElementChanged() override method, it would look something like this:
protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
{
base.OnElementChanged(e);
var view = e.NewElement as LabelExt; // LabelExt => name of PCL custom Label class
var elementExists = (view != null && Control != null);
if (!elementExists)
{
return;
}
// add underline to label
Control.Inlines.Clear();
var underlinedText = new Underline();
underlinedText.Inlines.Add(new Run { Text = view.Text });
Control.Inlines.Add(underlinedText);
}

How to present an iOS Modal View in MvvmCross

How can I present a modal view on iOS using MvvmCross?
Using Xamarin Studio on iOS and the MvvmCross NuGet version 4.2.2, none of the MvxModalSupportTouchViewPresenter, MvxModalNavSupportTouchViewPresenter or IMvxModalTouchView are even available.
Does the ViewModel even need to know about the fact that a particular view is presented as a modal view on iOS?
MvvmCross is a strong Page navigation framework. Default navigation using ShowViewModel<AViewModel> will use the stack metaphor: one on top of another on Android, slide atop each other on iOS, and use < on either platform to go back.
You can tell the ViewPresenter that a given view is modal by giving it a hint, in the form of an interface marker, by adopting IMvxModalIosView.
At the View Level
Adopt the IMvxModalIosView protocol:
public partial class AView : MvxViewController, IMvxModalIosView
At the AppDelegate Level
Replace var setup = new Setup(this, Window) by:
var presenter = new MvxModalSupportIosViewPresenter(this, Window);
var setup = new Setup(this, presenter);
setup.Initialize();
At the ViewModel Level
No change required. The ViewModel is actually not made aware of the modal presentation. Invoke:
ShowViewModel<AViewModel> // May be modal on certain platforms
To close a Page and go back to the previous one, regardless of your presentation style, use Close(this) on that very ViewModel. This will close a modal dialog, or pop a pushed view. A complete, bindable ICommand may look like this:
public ICommand BackCommand {
get { return new MvxCommand(() => Close(this)); }
}
Notes: In MvvmCross 4.2.2, Touch has been renamed iOS, so IMvxModalTouchView is now IMvxModalIosView. The new using are:
using MvvmCross.iOS.Platform;
using MvvmCross.iOS.Views.Presenters;
Using MvvmCross 5.5.2 all I had to get a modal was to add the following MvxModalPresentation attribute to my iOS view:
[Register("ExampleModalView")]
[MvxModalPresentation(
ModalPresentationStyle = UIModalPresentationStyle.PageSheet,
ModalTransitionStyle = UIModalTransitionStyle.CoverVertical
)]
public class ExampleModalView : MvxViewController
{
public ExampleModalView() {
}
...
}
Launching the modal is simple with the IMvxNavigationService service
await _navigationService.Navigate<ExampleModalViewModel>();
ExampleModalViewModel just needs to be a plain MvvmCross view model inheriting from MvxViewModel.
A useful reference for this is ModalView.cs in the iOS playground project: https://github.com/MvvmCross/MvvmCross/blob/develop/TestProjects/Playground/Playground.iOS/Views/ModalView.cs#L12

add web page in xamarin form

I'm very very new to using Xamarin forms. So new in fact I have just watched the "microsoft xamarin forms for absolute beginners".
I'm trying to include a webpage into the Xamarin form but the only info I can find is
var browser = new WebView {
Source = "http://xamarin.com"
};
This might sound silly but has anyone got a full tutorial on how to include one?
thanks
just create a WebView and assign it to a ContentPage. Then you can either make this page the main page of your app (in the App class) or you can navigate to it from another page.
ContentPage page = new ContentPage {
Content = new WebView { Source = "http://xamarin.com" }
};
To display a website from the internet, set the WebView's Source property to a string URL:
var browser = new WebView
{
Source = "http://xamarin.com"
};
see this:
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/webview?tabs=windows#performance

Map Annotation Disclosure Indicator - Xamarin.Form

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.

"Cannot resolve TargetName" error in custom storyboard

In WP7 silverlight app, i wanted to use a storyboard animation on a particular event.
The animation is changing button height property from x to y points (changed for query).
I am using below code in my program
Storyboard myStoryBoard = new Storyboard();
myStoryBoard.Duration = new Duration(TimeSpan.FromMilliseconds(200));
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
Storyboard.SetTargetName(myDoubleAnimation, button1.Name); // button1 is normal button on UI
Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Button.HeightProperty));
myDoubleAnimation.From = 200;
myDoubleAnimation.To = 300;
myStoryBoard.Children.Add(myDoubleAnimation);
myStoryBoard.Begin();
when i run my code, i am hitting with
Cannot resolve TargetName button1 error
any easy fix for my issue?
I think you can use SetTargetName only if the Storyboard is in the visual tree. I suggest using SetTarget instead: http://msdn.microsoft.com/en-us/library/system.windows.media.animation.storyboard.settarget%28v=vs.95%29.aspx
Storyboard.SetTarget(myDoubleAnimation, button1);

Resources