I have created a tabbed page in my xamarin forms project. Using android:TabbedPage.ToolbarPlacement="Bottom" option I added it on the bottom of android device. But Currently the icon and text are overlapping in tabs.
Screenshot:
TabbedPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:SmartWCM;assembly=SmartWCM"
BarTextColor="#0091da"
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
android:TabbedPage.ToolbarPlacement="Bottom"
BarBackgroundColor="#f2f2f2"
android:TabbedPage.BarItemColor="#0091da"
android:TabbedPage.BarSelectedItemColor="#0091da"
x:Class="Proj.MyTabbedPage">
</TabbedPage>
TabbedPage.xaml.cs
//I have added all the child from xaml.cs like below.
var homePage = new Pages.HomePage(false)
{
Title = "Home",
Icon = "ic_home_xx.png"
};
var topicsPage = new TweetsTopicsPage()
{
Title = "Announcements",
Icon = "ic_topics_fill_xx.png"
};
var groupPage = new TweetsGroupPage()
{
Title = "Class",
Icon = "ic_group_xx.png"
};
var ABPage = new DirectoryPage()
{
Title = "Contacts",
Icon = "ic_addressbook_xx.png"
};
Children.Add(homePage);
Children.Add(topicsPage);
Children.Add(groupPage);
Children.Add(ABPage);
Already found the same issue here. Is there any way to solve this issue from xaml.cs? Because I have a lot of conditions in xaml.cs.
To GiampaoloGabba
I added the custom renderer from here but still the text is overlapped with icon, see the below screenshot.
This is due the "shift mode" that is activated when there are 4 or more tabs.
You can try to fix it with an effect, check if this answer resolve your issue:
https://stackoverflow.com/a/56545801/9823528
Related
I've implemented Borderless Editor in my Xamarin.Forms application using Custom EditorRenderer. But I'm facing an issue that the editor text is not selectable at all in both cases, neither in Forms editor control nor in Rendered native editor control. My app has the functionality to let user copy paste the text in the editor while typing, like in any other text editing app. This is a basic feature in most of the apps and is by default there. But it's not working in my app. I've tried enabling it through
Control.SetTextIsSelectable(true);
but still it's not working. I've tried other things too, like:
Control.CustomSelectionActionModeCallback = new
CustomSelectionActionModeCallback();
Control.CustomInsertionActionModeCallback = new CustomInsertionActionModeCallback();
But nothing is working at all and text is not getting selected even a single word. Does anyone has any idea about this issue? How can I make the text selectable and allow default copy paste feature in custom editor?
Here's my code in Xaml:
<renderer:BorderlessEditor
Grid.Row="1"
x:Name="UserTextEditorAndroid"
BackgroundColor="{StaticResource WhiteColor}"
HeightRequest="350"
Margin="20,2"
MaxLength="1024"
IsReadOnly="{Binding Source={x:Reference LongTextTemplate}, Path=Editable, Converter={StaticResource InverseBool}}" />
And the custom render code is:
public class BorderlessEditorRenderer : EditorRenderer
{
public BorderlessEditorRenderer()
{
}
public static void Init() { }
protected override void OnElementChanged(ElementChangedEventArgs<Editor> e)
{
base.OnElementChanged(e);
if (e.OldElement == null)
{
Control.Background = null;
var layoutParams = new MarginLayoutParams(Control.LayoutParameters);
layoutParams.SetMargins(0, 0, 0, 0);
LayoutParameters = layoutParams;
Control.LayoutParameters = layoutParams;
Control.SetPadding(0, 0, 0, 0);
SetPadding(0, 0, 0, 0);
Control.SetTextIsSelectable(true);
Control.VerticalScrollBarEnabled = false;
}
}
}
Even if I use Xamarin.Forms own editor in Xaml instead of custom renderer then also it doesn't work at all. The text is still un-selectable.
I am having the same problem - but I'm not using Telerik. I'm running VS 2019 on Win 10. This is easy to repro ...
Create a new "Mobile App (Xamarin Forms)" and simply add an Editor to the MainPage.xaml file. I also put the Editor inside a ScrollView for kicks. The code below only shows a few words of text placed in the Editor, but I actually used a long paragraph from the Microsoft docs. I left that out below so as to simplify code presentation ... and avoid a mess!
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="Editor_Test.MainPage">
<StackLayout>
<!-- Place new controls here -->
<ScrollView>
<Editor Text="Visual Studio makes it easier ..."
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand" />
</ScrollView>
</StackLayout>
</ContentPage>
I get normal behavior:
Because of the ScrollView, I can scroll the text with a finger (mouse) drag
A long press (click) selects the word pressed
A double tap (click) selects the word tapped
I get different results if I change 1 line of code in the App ctor, in App.xaml.cs, to instantiate the MainPage with a NavigationPage, like so:
public App()
{
InitializeComponent();
//MainPage = new MainPage();
MainPage = new NavigationPage(new MainPage());
}
Now the behavior changes:
A long press (click) has no effect (no selection)
A double tap (click) has no effect (no selection)
In fact there is no way at all that I can see to select text in the Editor. I don't know why this happens ... but it does. It drove me a bit mad until I realized what was causing it.
I'm using:
Xamarin Forms 4.5.0.495
Xamarin Essentials 1.3.1
Building for Android 9 (Pie)
I'm new to Android/Xamarin ... so my question is, how best to implement my own simple page navigation - ie, without using Xamarin's NavigationPage? I have a simple 3 page app I'd like to make some progress with!
Here is The Code To setting Title and Image butt ..Title Showing button Slider button not Showing
masterPage = new MasterDetailPage()
{
BackgroundColor = Color.Transparent,
Master = BuildMenuPage(),
Title = AppResources.AppNameWithPortal,
IconImageSource =new FileImageSource {File= "slideout.png" }
};
I have also try masterPage.IconImageSource ="slideout.png";
still not working
I want this Result
Try to assign icon to master page:
Xamarin forms MasterDetailPage Menu icon not shown on iOS
var masterDetailpage = new MasterDetailPage {
Master = new Page { Title = "Sample", Icon = "menuIcon.png"},
Detail = new NavigationPage(new Page())
};
I think the screenshot you shared in your question is a screenshot of Universal Windows Platform (UWP). MasterDetailPage has different behaviors in different platform. You can check the document here.
If you want the result in the screenshot, you can customize your masterPage and add event to the slideout button, something like this:
<StackLayout>
<StackLayout>
<ImageButton Source="slideout.png"></ImageButton>
<Label Text="title">
</StackLayout>
<ListView x:Name="listView" x:FieldModifier="public">
...
</ListView>
</StackLayout>
The icon or fileImageSoure you set in the Page will be displayed if supported by the platform under certain circumstances, such as when a NavigationPage is displaying a ContentPage.
Usually, detailPage has a NavigationPage and the icon and title will be displayed there in Android.
You can check the sample here to see the default behavior of MasterDetailPage in Android.
I want to remove Tabbar from TabbedPage. I got it working but it leaves blank space or page height is not updated after hiding Tabbar.
Note that when we swipe through the pages, the blank goes and never comes back. This issue appears only for the first time.
I have tried from this link. But it doesn't work.
Also tried following
private void Element_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
try
{
TabBar.Hidden = true;
//TabBar.Bounds = new CoreGraphics.CGRect(View.Subviews[0].Frame.X, View.Subviews[0].Frame.Y,
// View.Subviews[0].Frame.Width, 0);
if (TabBar.Hidden)
{
// page
View.Subviews[0].Frame = new CoreGraphics.CGRect(0, 0, View.Subviews[1].Frame.Width, NativeView.Frame.Height);
// Tabbar
View.Subviews[1].Frame = new CoreGraphics.CGRect(View.Subviews[0].Frame.X, View.Subviews[0].Frame.Y,
View.Subviews[0].Frame.Width, 0);
}
else
{
View.Subviews[1].Frame = new CoreGraphics.CGRect(View.Subviews[1].Frame.X, View.Subviews[1].Frame.Y,
View.Subviews[1].Frame.Width, 49);
View.Subviews[0].Frame = new CoreGraphics.CGRect(View.Subviews[0].Frame.X, View.Subviews[0].Frame.Y,
View.Subviews[0].Frame.Width, View.Subviews[0].Frame.Height - 49);
}
//if (TabBar.Hidden)
// View.Subviews[1].Frame = new CoreGraphics.CGRect(View.Subviews[1].Frame.X, View.Subviews[1].Frame.Y, View.Subviews[1].Frame.Width, 0);
//else
// View.Subviews[1].Frame = new CoreGraphics.CGRect(View.Subviews[1].Frame.X, View.Subviews[1].Frame.Y, View.Subviews[1].Frame.Width, 49);
}
catch (Exception ex)
{
//TraceLog("Element_PropertyChanged" + ex.Message);
}
}
EDIT
I open tabbed page on list view item clicked. I allow to add multiple tabs dynamically. Also I have created custom tabbar using ContentView that I update when pages are added or removed from TabbedPage.
The sequence is :
- User opens first tab.
- Click on home icon given on tabbed page.
- open the second page by click on another list item
- swipe through the page and the page height will be normal.
Here is the code on ListView_ItemTapped (Not posted exactly how is it actually but you can get idea :) )
MultiTab ObjMultiTab = new MultiTab(); // Initialize tabbed page
// Get data from server
ObjMultiTab.Data = ObjData;
int Id = Convert.ToInt32(ObjData.id);
if (ActiveList.ContainsKey(Id)) // Dictionary that contains info about index and pageid that are already open
{
TabId = ActiveList[ObjData.id];
CurrentPage = Children[TabId]; // If user taps on already opend page
}
else
{
Count += 1; ActiveList.Add(Id, Count);
Children.Add(new SecondTabbedPage(TableData)); // Or add new child
CurrentPage = Children[Count];
}
await Application.Current.MainPage.Navigation.PushModalAsync(ObjMultiTab);
Is there any way to remove blank space for the first time also ?
Adding following function to the renderer removed blank space from TabbedPage.
public override void ViewDidLayoutSubviews()
{
base.ViewDidLayoutSubviews();
TabBar.Hidden = true;
var page = View.Subviews[0];
var tabbar = View.Subviews[1];
tabbar.Bounds = CGRect.Empty;
page.Bounds = UIScreen.MainScreen.Bounds;
}
There is a solution that doesn't require any renders and works on both Android and iOS.
Wrap the TabbedPage in a NavigationPage so the structure of your app becomes
NavigationPage (root)
TappedPage
NavigationPage
ContentPage (with tabbar)
ContentPage (without tabbar)
On the TabbedPage you have to hide the navigationbar of the 'root' NavigationPage, otherwise you have 2 navbars.
<TabbedPage
...
HasNavigationBar="False">
If you push a page using the 'root' NavigationPage, the tabbar is hidden and there is no blank space at the bottom.
--- Edit ---
See my example at:
https://github.com/Jfcobuss/HideTabbarExample/tree/master/HideTabbarExample
Downside of this solution is
It is bit of an hacky workaround
The title next to back-button is the title of the TabbedPage, not the current tab
The animation to the next page is not as fluent as default
I have an IOS App with a Tabbar and an embedded Xamarin Forms Page with a listview.
This is the code used to embedd it:
contactListViewController = new Business.Views.ContactListView { BindingContext = ViewModel }.CreateViewController();
contactListViewController.WillMoveToParentViewController(this);
View.Add(contactListViewController.View);
AddChildViewController(contactListViewController);
contactListViewController.DidMoveToParentViewController(this);
The page is displayed correctly, but it does have an additional bar on the top.
How can I get rid of that? I tried to set it to hidden on the NavigationController. But it doesn't have one (NavigationController is always null).
How can I remove that bar?
The solution is, to hide the Navigationbar on the mainpage not the new added ViewController:
NavigationController.NavigationBarHidden = true;
// add subview.
activityViewController = new Business.Views.ActivityView { BindingContext = ViewModel }.CreateViewController();
activityViewController.WillMoveToParentViewController(this);
View.Add(activityViewController.View);
AddChildViewController(activityViewController);
activityViewController.DidMoveToParentViewController(this);
I have added Tabbbed Page with navigation Page. e,g
Code Inside tabbed Page.
var NavPage = new NavigationPage(new Page1());
NavPage.Icon = "Icon1";
NavPage.Title = "Tab1";
Children.Add(NavPage);
above code not showing Page1 on tab1 click.
Could you please tell Is anything wrong with above code?
Page1 is Content Page.
It work when code like below.
var Page1 = new ContentPage
{
Content = button,
};
NavigationPage.SetHasNavigationBar(Page1 , false);
var navigationPage = new NavigationPage(page) { Title = "click" }
I want to follow approach one.