In Xamarin Forms 5.0, I created a TabbedPage and nested NavigationPage instances as its children. I noticed that the page push animation does not slide from right to left unlike iOS. How can I change the default transition animation? Please note that I do not want to use a third-party library for animations. Ideally, I'd like to solve this problem with a custom renderer / effect.
private void SetMainPage()
{
var tabbedPage = new Xamarin.Forms.TabbedPage { BarBackgroundColor = Color.White };
Xamarin.Forms.PlatformConfiguration.AndroidSpecific.TabbedPage.SetToolbarPlacement(tabbedPage, ToolbarPlacement.Bottom);
tabbedPage.Children.Add(new NavigationPage(new AboutPage()) { BarBackgroundColor = Color.Black, Title = "Tab1", IconImageSource = "icon_about" });
tabbedPage.Children.Add(new NavigationPage(new AboutPage()) { BarBackgroundColor = Color.Black, Title = "Tab2", IconImageSource = "icon_feed" });
MainPage = tabbedPage;
}
Why don't you just use NavigationPage as the parent of your TabbedPage ? I am using XF 5.0.0.2012 and working with this way
Related
I'm currently adding several different themes (10-ish) to a Xamarin.Forms app. I've figured out how to dynamically change the color of everything except the "underline" on a tab on TabbedPage (see the attached image).
Screenshot identifying the TabbedPage "underline" with a red rectangle
I've tried to set the five different color properties (that I know of) on the TabbedPage as well as the BackgroundColor on the ContentPages in the tabs:
TabbedPage tabbedPage = new TabbedPage { Title = "Tabbed Page" };
tabbedPage.BarBackgroundColor = Color.Black;
tabbedPage.BarTextColor = Color.Gray;
tabbedPage.SelectedTabColor = Color.Black;
tabbedPage.UnselectedTabColor = Color.Black;
tabbedPage.BackgroundColor = Color.Black;
tabbedPage.Children.Add(new ContentPage { Title = "Page 1", BackgroundColor = Color.Gray });
tabbedPage.Children.Add(new ContentPage { Title = "Page 2", BackgroundColor = Color.Gray });
await Application.Current.MainPage.Navigation.PushAsync(tabbedPage);
Is it possible to set the color of the "underline" in Xamarin.Forms? Or do I need to make platform-specific changes to achieve this?
Use app:tabIndicatorColor.
All you have to do is to create a Tabar.xml file with below code in the layout folder(create one if needed) in the Android project's Resources folder and change the color via app:tabIndicatorColor;
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.tabs.TabLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#ff0000"/>
And then add below code in onCreate method of MainActivity.cs
TabLayoutResource = Resource.Layout.Tabar;
I created a Horizontal / Vertical Scrollview in Xamarin Forms that contains several types of childs like:
Labels
CustomCheckboxes
ImageViews
Pickers
Sliders
Here is my code:
ScrollView scrollTracks = new ScrollView
{
BackgroundColor = Color.Black,
VerticalOptions = LayoutOptions.StartAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand,
Content = layoutTracks,
Orientation = ScrollOrientation.Both
};
When I click some child elements like the CustomCheckboxes, or the Labels, or the ImageViews, the program scroll automatically the view to the beginning.
I tested this on the UWP platform.
How can I make the program to stop doing this?
Add this tag to the ScrollView solved my issue:
IsTabStop = false
Here the code:
ScrollView scrollTracks = new ScrollView
{
BackgroundColor = Color.Black,
VerticalOptions = LayoutOptions.StartAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand,
Content = layoutTracks,
Orientation = ScrollOrientation.Both,
IsTabStop = false
};
In my project I want to add logo to navigation bar. In android by using custom renderer I have placed the logo to navigation bar. But i don't know how to set the logo in navigation bar at globally in ios xamarin forms. Anyone give suggestion how to solve this.
I have tried like this,
NavigationPage.SetTilteIcon(this, "icon.png"); // But image is not display
Icon placement Reference Screenshot
You can try by setting the icon as:
Application.Current.MainPage = new NavigationPage(new FirstPageName() { Icon="icon.png"});
While navigating to another page you can write this as:
this.Navigation.PushAsync(new SecondPageName() { Icon="icon.png"});
Make sure you have the icon image in iOS project folder.
You can try custom renderer for a single page. But we can't set it at globally. Because in iOS every ViewController has a NavigationItem, we should set it when we need.
Here is some code about how to set NavigationItem in page renderer:
public override void ViewWillAppear(bool animated)
{
base.ViewWillAppear(animated);
UIView leftView = new UIView(new CGRect(0, 0, 100, 40));
UIImageView imgView = new UIImageView(UIImage.FromBundle("icon.png"));
imgView.Frame = new CGRect(0, 5, 30, 30);
leftView.AddSubview(imgView);
UILabel label = new UILabel(new CGRect(30, 10, 70, 20));
label.Text = "page Title";
leftView.AddSubview(label);
//add event
UITapGestureRecognizer tap = new UITapGestureRecognizer((sender) =>
{
});
leftView.AddGestureRecognizer(tap);
leftItem = new UIBarButtonItem(leftView);
NavigationController.TopViewController.NavigationItem.SetLeftBarButtonItem(leftItem, true);
}
Please notice that put this image source in iOS's project.
Also if you do want to show this icon image in each page. Try to create a base page and construct this renderer for it. Then let your page inherit from it.
When I create WebView in xamarin, it is not visible when the application is launched. It gets visible when the view is readjusted.
How can I resolve the above issue.
Here is sample code that I am using
var browser = new WebView();
var htmlSource = new HtmlWebViewSource ();
public SamplePage()
{
InitializeComponent();
StackLayout stackLayout = new StackLayout
{
VerticalOptions = LayoutOptions.FillAndExpand,
Children =
{
sometextbox,
browser
}
}
}
//Code within some button's event
htmlSource.Html = #"<html><body>
<h1>Xamarin.Forms</h1>
<p>Welcome to WebView.</p>
</body></html>";
browser.Source = htmlSource;
It seems like the FillAndExpand should be on the webview, not on the StackLayout
The issue is that WebView has no idea how big it needs to be and so it is probably there but has no size. What I do is to assign a Width and Height in SizeChanged like so:
public SamplePage()
{
InitializeComponent();
StackLayout stackLayout = new StackLayout
{
VerticalOptions = LayoutOptions.FillAndExpand,
Children =
{
sometextbox,
browser
}
}
SizeChanged += (sender, args) => {
browser.WidthRequest = Width;
browser.HeightRequest = Height * 0.75;
}
}
If the browser still does not show up, keep the SizeChanged() code since it will update the WebView on rotation but also add the same code to OnAppearing():
protected override void OnAppearing() {
base.OnAppearing();
browser.WidthRequest = Width;
browser.HeightRequest = Height * 0.75;
}
If you needed to do that upon button click you could do that or you could even leave the above code in place and just change WebView.IsVisible.
I wanted chat application type user interface in my app & i am targeting android and iOS.
I am using Xamarin.Forms.Editor for reply
Editor _replyEntry = new Editor
{
HorizontalOptions = LayoutOptions.FillAndExpand,
TextColor = Color.Black
}
in this case the editor height remains constant and allows scrolling and editor does not expands
Then i used InvalidateMeasure()
_replyEntry .TextChanged += (sender, e) => { this.InvalidateMeasure(); };
in this case editor expands as when the text requires more space but does not allow scroll inside editor and if user types long message then editor does not allows scroll and text goes behind the keyboard and not visible to user
Is there any way to enable scroll and give max height to edit either in xamarin.forms of by writing custom renderer
Thanks
Here is my code
public class abc : ContentPage
{
public abc()
{
Image attchment = new Image
{
Source = "attachment.png",
HorizontalOptions = LayoutOptions.Start
};
Editor _replyEntry = new Editor
{
HorizontalOptions = LayoutOptions.FillAndExpand,
TextColor = Color.Black,
};
Button _sendButton = new Button
{
Text = "Send",
TextColor = Color.Black,
BackgroundColor = Color.Transparent,
HorizontalOptions = LayoutOptions.End
};
StackLayout replyStack = new StackLayout
{
Orientation = StackOrientation.Horizontal,
Padding = new Thickness(10),
Spacing = 10,
VerticalOptions = LayoutOptions.End,
Children = { attchment, _replyEntry, _sendButton }
};
Content = replyStack;
}
}
It looks like you will have to use a custom renderer to achieve what you are wanting.
There is a post here that has pretty much the same thing with what you are trying to achieve for Android.
In that demo it has an expanding multi-line EditText control (android:singleLine="false"), with only vertical scrollbars (android:scrollbars="vertical"), whilst disabling the horizontal scrollbars (android:scrollHorizontally="false").
You need to ensure the Editor' parent is expanding, then the editor will automatically expand too. If you make an empty contentpage and add an Editor, the is will just expand. If you place it inside a stacklayout, the you need to ensure that the stacklayout is expanding.