Everything works fine until i add Xamarin.Forms.Maps xaml tag to the view. My Application views work flow is as follows MainPage.Xaml --> LocationView.Xaml. MainPage has a button , i use delegate command to navigate to LocationView with the help of navigationservice.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="TruckGPS.Views.LocationViewPage" xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps">
<StackLayout VerticalOptions="StartAndExpand" Padding="30">
<maps:Map WidthRequest="320" HeightRequest="200"
x:Name="MyMap"
IsShowingUser="true"
MapType="Hybrid"/>
LocationViewPage has corresponding LocationViewPageViewModel.
When i click the button on MainPage ViewModel i invoke the Delegate command which works fine without the maps. It stops at the breakpoint on delegate method when clicked but never navigates.
MainPage ViewModel Code:
public MainPageViewModel(INavigationService navigationService)
{
_navigationService = navigationService;
ShowMapCommand = new DelegateCommand(ShowMap);
}
private void ShowMap()
{
_navigationService.NavigateAsync("LocationViewPage");
}
Related
I am doing an authentication in xamarin forms, using b2c, they asked me to embed the pop-up screen that triggers and in turn hide or eliminate both the cancel and the navigation bar, has someone done that part or otherwise modify it? (thanks in advance)enter image description here
Please check if below references can be worked in your case:
Hide Cancel button :
In custom policy:
Configure the setting.showCancelButton metadata item to false in the custom policy technical profile of the sign in or sign up or page for it is requiredrequired.
Example:
<TechnicalProfile Id="LocalAccountSignUpWithLogonEmail">
<DisplayName>Email signup</DisplayName>
<Protocol Name="Proprietary" Handler="Web.TPEngine.Providers.SelfAssertedAttributeProvider, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
<Metadata>
<Item Key="IpAddressClaimReferenceId">IpAddress</Item>
<Item Key="ContentDefinitionReferenceId">api.localaccountsignup</Item>
<Item Key="language.button_continue">Create</Item>
<Item Key=" setting.showCancelButton ">false</Item>
</Metadata>
<InputClaims>….
….
</TechnicalProfile>
See self asserted technical profile reference & Microsoft Q&A Reference
Through Xamarin Form:
For Xamarin forms ,Use Xamarin.Forms renderer to hide the "Cancel" button of a SearchBar on iOS using Control.ShowsCancelButton = false;
protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (e.PropertyName == "Text")
{ Control.ShowsCancelButton = false;}
}
References:
Xamarin forms– iOS disable cancel button on SearchBar (weblogs.us)
How to handle/cancel back navigation in Xamarin Forms-Stack Overflow
Disable Navigation bar:
If you use webview in the NavigationPage or NavigationPage wrap the contentpage, Try to add NavigationPage.HasNavigationBar="False" into your contentPage tags like following xaml, to disable navigation bar.
Example:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:FormsWebViewTest"
x:Class="FormsWebViewTest.MainPage"
NavigationPage.HasNavigationBar="False">
...........
.......//other part
</ContentPage>
Or
SetHasNavigationBar to false on your navigation page (in content page constructor).
ex:
public MyPage()
{
InitializeComponent();
NavigationPage.SetHasNavigationBar(this, false);
}
In short, I'm looking to disable the swipe gesture on the navigation for iOS in MvvMCross default template. Have done a ton of research and trials but been unsuccessful. This is for a personal/opensource project I'm working on. Thanks!!!
Details:
Using the MvvmCross 7.1.6 (latest as of 1/21/2021). I have implemented a MvxContentPage. The page has 2 joysticks on it. The page also has the hamburger turned on which I want. When using the app on the phone the left-nav flyout appears when moving the joystick. I have researched everything I could find, and am successful with Xamarin.Forms disabling the gesture, but in MvvmCross I cannot find a way to prevent the slide. I know there have been similar posts on other forums, but have not found anything that works. I was able to build a custom renderer using a Xamarin post from 2016 but it doesn't seem to hold (code below). I can confirm the renderer is invoked.
using AstromechControl.iOS.CustomRenderers;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
[assembly: ExportRenderer(typeof(AstromechControl.UI.Pages.JoystickPage), typeof(NoSwipeiOSCustomPageRenderer))]
namespace AstromechControl.iOS.CustomRenderers
{
public class NoSwipeiOSCustomPageRenderer : PageRenderer
{
public override void ViewDidAppear(bool animated)
{
base.ViewDidAppear(animated);
UINavigationController navctrl = ViewController.NavigationController;
navctrl.InteractivePopGestureRecognizer.Enabled = false;
ViewController.SetNeedsUpdateOfScreenEdgesDeferringSystemGestures();
}
}
}
Well, if anyone's still trying to figure this out in 2021... here's the fix...
https://github.com/MvvmCross/MvvmCross/issues/2306
Using my combination of Custom Page Renderer posted above, and this github link. I ended up with the following:
using AstromechControl.iOS.CustomRenderers;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
[assembly: ExportRenderer(typeof(AstromechControl.UI.Pages.JoystickPage), typeof(NoSwipeiOSCustomPageRenderer))]
namespace AstromechControl.iOS.CustomRenderers
{
public class NoSwipeiOSCustomPageRenderer : PageRenderer
{
public override void ViewDidAppear(bool animated)
{
if (Xamarin.Forms.Application.Current.MainPage is MasterDetailPage masterDetailPage)
{
masterDetailPage.IsGestureEnabled = false;
}
else if (Xamarin.Forms.Application.Current.MainPage is NavigationPage navigationPage && navigationPage.CurrentPage is MasterDetailPage nestedMasterDetail)
{
nestedMasterDetail.IsGestureEnabled = false;
}
}
}
}
I am using ContentView inside a ContentPage like this
<ContentView x:Name="MyContent"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<ContentView.GestureRecognizers>
<SwipeGestureRecognizer Swiped="SwipLeft" Direction="Left"/>
<SwipeGestureRecognizer Swiped="SwipRight" Direction="Right"/>
</ContentView.GestureRecognizers>
</ContentView>
in the code behind I set the relavent Content to the ContentView according to the SwipeDirection like below. and same as for SwipRight.
private void SwipLeft(object sender, SwipedEventArgs e)
{
if (e.Direction == SwipeDirection.Left)
{
//set the relavent page content here
}
}
I need to set an animation or transition to appear when I swipe between pages. I need this only for iOS. Can anyone help me for this or any method knows anyone to achieve this?
you can get the idea from this snapshot
click here for image
all the content and everything has done I just need to add transitions between pages.
You could use the TabbedPage . It seems that you want to let the tab display on the top of screen . In your case you could install the plugin TopTabbedPage from nuget .
Usage
<forms:TopTabbedPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Naxam.Demo.TestPage"
xmlns:views="clr-namespace:Naxam.Demo"
xmlns:forms="clr-namespace:Naxam.Controls.Forms;assembly=Naxam.TopTabbedPage.Forms"
BarTextColor="#00b9e1"
BarIndicatorColor="#00b9e1"
BarBackgroundColor="#ffffff"
Title="MyRide">
<views:Page1 /> // here is the content page , you need to put each contentview in independent ContenPage
<views:Page2 />
</forms:TopTabbedPage>
And in iOS project -> AppDelegate.cs
public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
// Override point for customization after application launch.
// If not required for your application you can safely delete this method
TopTabbedRenderer.Init();
Xamarin.Forms.Forms.Init();
LoadApplication(new App());
return base.FinishedLaunching(app, options);
}
For more details about the plugin you could refer the github project site .
I have an issue with showing a Modal on Ionic 5 Angular 8 on iOS.
So I have a page with two buttons, one is declared in the same page component, the other one is from a child component.
When the button in the same page is clicked, the modal opens fine.
When the button from the child component is clicked, the event is emitted to the parent Page, which then creates the modal, but the modal slides up, outside the view port.
I have tried all possible trouble shooting I can think of:
Removing all custom CSS, removing all html, changing the route of the event, adding a timeout etc..
I don't have any autofocus or bootstrap: [] in my entire app.
Here is what the page looks like
export class MyPage implements OnInit, OnDestroy {
//...
private openModal (params) {
const obj = {
component: ModalComponent,
componentProps: params
};
this.modalProvider.create (obj).then (
modal => {
modal.onDidDismiss().then(
() => {}
);
modal.presente ();
}
)
}
public onOpenModal () {
const params = {
//custom properties
}
this.openModal(params);
}
public localAction () {
const params = {
// custom params
}
this.openModal (params)
}
}
Now on the template side :
<ion-content force-overscroll="false" [scrollY]="false">
<!-- Some html --->
<ion-grid (click)="localAction()">
<!-- Some html --->
</ion-grid>
<!-- Some html --->
<child-component (modalOpenEmitter)="onOpenModal($event)">
</ion-content>
Ok I have found the problem after several hours digging.
It turns out it was because of the child component which host a list of button scrolling horizontally.
When a button from the the child component was clicked, an event was emitted as per normal, but I was using a DOM function called scrollintoview like so:
Child component.ts :
public btnClicked (value) {
//...
this.clickEmitter.emit(value); // Normal stuff
const element = document.getElementById(value.id);
if (element) {
element.scrollIntoView(); // This caused the the modal to disappear
}
}
This scrollIntoView was there to make the clicked button slide further in the view port.
Unfortunately, this beaks the modal on iOS, but it works fine on android by the way.
I have a list of the following class:
public class Set {
public string IconUrl { get; set; }
}
This list is bound to a ListView:
<ListView ItemsSource="{Binding Sets}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Image Source="{Binding IconUrl}" />
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
When the view loads and the user starts scrolling, the cells are reused and the Image briefly shows the previous image before the new image is downloaded and rendered.
Is there a way to prevent this kind of behavior without disabling RecycleElement?
I haven't tried this but on ViewCell you have Disappearing and Appearing events that you can hook into.
You may want to look at releasing the image source on the Disappearing event handler, but sometimes this can occur sometime later I think from recollection, so you may also want to try releasing the image on the Appearing event handler that hopefully will be executed prior to the display on the screen?
We have solved this by manually setting the Image source to null to force the render of the new images. we achieve this by using OnBindingContextChanged Event of the ListView. Hope this helps.
Edited (Added code below):
We have something like this:
public class PeopleCell : ViewCell
{...
Image profileImage;
public PeopleCell()
{
profileImage = new Image
{
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
BackgroundColor = Color.FromHex("f5f5f5"),
Source = ImageSource.FromFile("profile_blankimage"),
};...
protected override void OnBindingContextChanged()
{
base.OnBindingContextChanged();
people = BindingContext as CustomerViewModel;
if(people.Customer.Avatar != null)
profileImage.Source = ImageSource.FromUri(new Uri(people.Customer.Avatar.Url));